用锚标记替换 DOM 文本

Question

I am searching the html body, but the tag shows in plain text. How do I correct this for an anchor to replace John with the name and a link to show a clickable anchor. Can the replacement of the search word be solved in javascript? It is incorrect.

I doing search and replace:

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

This is something close to what you are asking. Needs some refactoring, but hope it's a good start for you.

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 );
    }

  })

}

Here's a Codepen: https://codepen.io/kostasx/pen/VwwLKWz?editors=0010

[ UPDATE ] Code updated to pass the following tests:

<!-- 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>

Answer 2

I modified the source code of the original javascript. It works. I am thankful it's solved.

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

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;
        parentNode.removeChild( node );
        parentNode.innerHTML = nodeTextContent.replace(regex, link) + parentNode.innerHTML;
       }
    } else {
      htmlreplace( regex, link, node );
    }

  })

}