Заменить DOM-текст тегом привязки

Question

Я ищу html body, но тег отображается в виде обычного текста. Как исправить это для якоря, чтобы заменить Джона именем и ссылкой, чтобы показать кликабельный якорь. Можно ли заменить поисковое слово в 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

Я изменил исходный код оригинального JavaScript. Оно работает. Я благодарен, что это решено.

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

  })

}

Answer 2

Это что-то близкое к тому, что вы просите. Требует некоторого рефакторинга, но надеюсь, что это хорошее начало для вас.

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>