javascript - 用 anchor 标记替换 DOM 文本

Question

我正在搜索 html 正文，但标签以纯文本形式显示。如何更正此问题，以将 John 替换为名称和链接以显示可点击的 anchor 。 javascript中可以解决搜索词的替换吗？这是不正确的。

我进行搜索和替换:

htmlreplace(/(John)/gi,"<a href=\"index.html\">$1</a>");

function htmlreplace(a, b, element) {
  if (!element) element = document.body;
  var nodes = element.childNodes;
  for (var n = 0; n < nodes.length; n++) {
    if (nodes[n].nodeType == Node.TEXT_NODE) {
      var r = new RegExp(a, 'gi');
      nodes[n].textContent = nodes[n].textContent.replace(r, b);
    } else {
      htmlreplace(a, b, nodes[n]);
    }
  }
}

Answer 1

这与您所要求的很接近。需要一些重构，但希望这对您来说是一个好的开始。

htmlreplace( /(John)/gi, "index.html" );

function htmlreplace( regex, link, element ) {
  if ( !element ) { element = document.body; }
  let nodes = element.childNodes;
  nodes.forEach((node)=>{
    if (node.nodeType == Node.TEXT_NODE) {
      let nodeTextContent = node.textContent;
      let match = regex.exec( nodeTextContent );  
      if ( match && node.parentNode.tagName !== "SCRIPT" ){
        let parentNode = node.parentNode;
        let parentHTML = parentNode.innerHTML;
        let a = document.createElement('a');
        a.href = link;
        a.textContent = match[1];
        console.log( 
          match[1],
          parentNode.tagName,
          parentNode.innerHTML,

        );
        parentNode.insertBefore( a, node );
        parentNode.removeChild( node );
        // let addedLink = nodeTextContent.replace( regex, `<a href="${link}">${match[1]}</a>` );
        parentNode.innerHTML = parentHTML.replace( regex, `<a href="${link}">${match[1]}</a>` );
        // parentNode.innerHTML = addedLink;
        // parentNode.innerHTML = nodeTextContent.replace(regex,"") + parentNode.innerHTML;
       }
    } else {
      htmlreplace( regex, link, node );
    }

  })

}

这是一个代码笔:https://codepen.io/kostasx/pen/VwwLKWz?editors=0010

[更新]更新代码以通过以下测试:

<!-- Test Case #1 [ PASS ] -->
<p>Hello
  <span>John</span>
</p>
<!-- Test Case #2 [ PASS ] -->
<h1>Hello John</h1>
<!--   Test Case #3 [ PASS ]-->
<span>
  <i>Hello</i> John
</span>
<br>
<!--   Test Case #4 [ PASS ]-->
<span>John hi</span>
<br>
<!--   Test Case #5 [ PASS ]-->
<span>John hi John</span>