如何将特定文本转换为 div 节点内的链接？答案

【问题标题】：How can I convert specific text to link within a div node?如何将特定文本转换为 div 节点内的链接？
【发布时间】：2022-02-04 01:34:55
【问题描述】：

注意：第一个要求是它不使用jQuery。如果可以避免的话，我也不想使用.innerHTML（即使这需要更多代码）

我在一个页面（多个位置）中有 div，如下所示：

<div class="p-user-content">John Smith current working on ticket LQ-1954</div>
    ... again, multiple locations ...
<div class="p-user-content">Sally Jones <a href="[something]">assigned</a> GM-3398 yesterday</div>

会有简单的文字，和标签，如<a>，如图所示。

以下脚本成功识别所有“文本节点”：

var el = document.getElementsByClassName('p-user-content');
for (var i in el) {
    if (typeof el[i].childNodes === 'undefined') continue
    for (var k in el[i].childNodes) {
        if (typeof el[i].childNodes[k] === 'function') continue
        if (el[i].childNodes[k].nodeType !== Node.TEXT_NODE) continue

        /**
         This successfully gets the nodeValue
         */
        console.log(el[i].childNodes[k].nodeValue)
    }
}

我要做的是逐字拆分文本节点，然后将LQ-1954和GM-3398之类的值转换为锚元素，然后将修改后的文本和锚链接替换回现有的div。我可以拆分文本并进行匹配部分，但是我该怎么做

使用新链接重新构建节点并
将其替换回相同的 div 中？

【问题讨论】：

没有href 元素的锚元素没有任何用处（尽管href="#" 可以在一定程度上解决这个问题）；但是将它们制成锚链接的目的是什么？ href 应该设置为什么？
"但是我将如何 a) 使用新链接重新构建节点" - document.createElement、document.createTextNode、appendChild ... "和 b ) 将其替换回同一个 div 中？” - replaceChild, insertBefore, ...
如果您要将一个文本节点拆分为多个新的文本/元素节点，那么首先在现有文本节点之前插入新节点，然后再删除该文本节点可能最有意义。
（如果您的任何目标文本可能已经出现在链接中，您必须检查当前文本节点有哪些父节点。在<a href="...">foo GM-3398 bar</a> 中，您不会想用附加链接替换GM-3398 ...)

标签： javascript html dom replace

【解决方案1】：

你可以使用 .replace

document.body.outerHTML = document.body.outerHTML.replace(/(LQ-1954)/g , '<a> $1 </a>')

【讨论】：

【解决方案2】：

如果你必须避免通过改变innerHTML的值来操作html，创建一个新元素并用它替换旧元素：

function addLinks(){
var el = document.getElementsByClassName('p-user-content');
for (var i in el) {
if (typeof el[i].childNodes === 'undefined') continue
let value = el[i].innerHTML.replace(/[A-Z]{2}-[\d]{4}/g, (match)=>'<a href="#">' + match + '</a>');
  let newDiv = document.createElement('div')
  newDiv.insertAdjacentHTML("beforeend", value);
  el[i].replaceChildren(newDiv)
}
}

<div class="p-user-content">John Smith current working on ticket LQ-1954</div>
    ... again, multiple locations ...
<div class="p-user-content">Sally Jones <a href="[something]">assigned</a> GM-3398 yesterday</div> 

<button onclick="addLinks()">Add Links</button>

使用innerHTML的简单方法：

function addLinks(){
var el = document.getElementsByClassName('p-user-content');
for (var i in el) {
if (typeof el[i].childNodes === 'undefined') continue
el[i].innerHTML = el[i].innerHTML.replace(/[A-Z]{2}-[\d]{4}/g, (match)=>'<a href="#">' + match + '</a>');
}
}

<div class="p-user-content">John Smith current working on ticket LQ-1954</div>
    ... again, multiple locations ...
<div class="p-user-content">Sally Jones <a href="[something]">assigned</a> GM-3398 yesterday</div> 

<button onclick="addLinks()">Add Links</button>

【讨论】：