为什么JavaScript不能用链接代替文本？

所以我有一个Chrome扩展，它在加载页面时将替换由正则表达式指定的文本，并将其替换为我想要的任何文本。现在，我不想用更多文本替换它，而是想用超链接替换文本，但我遇到了麻烦。此代码只是打破页面：为什么JavaScript不能用链接代替文本？

var elements = document.getElementsByTagName('*'); 

for (var i = 0; i < elements.length; i++) { 
    var element = elements[i]; 

    for (var j = 0; j < element.childNodes.length; j++) { 
    var node = element.childNodes[j]; 

    if (node.nodeType === 3) { 
     var text = node.nodeValue; 
     var replacedText = document.createTextNode(text.replace(/dog/gi, 'jQuery')); 
     var aLink = document.createElement('a'); 
     aLink.href = "http://google.com"; 
     aLink.appendChild(replacedText); 
     element.replaceChild(aLink, node); 
    } 
    } 
}

任何想法我做错了什么？

来源

2016-04-28 Tom Maxwell

什么是控制台输出的错误。 –

只是一个猜测，但是它会永久运行，因为循环（基于一个活动列表）递归地递减到刚刚创建的''？你需要指定你的意思是“休息”。 – apsillers

您需要重新考虑该方法，因为当文本节点包含匹配项时，需要在多个文本节点和链接中进行切分。例如，这（一个文本节点）：

dog woof dog woof

成为该（一个链接，一个文本节点，一个环节，一个文本节点）：

<a>...</a> woof <a>...</a> woof

这是我会怎么做：

//get all text nodes in an array 
 
    var root = document.getElementsByTagName("body")[0]; 
 
    var n, text_nodes=[], walk=document.createTreeWalker(root,NodeFilter.SHOW_TEXT,null,false); 
 
    while(n=walk.nextNode()) text_nodes.push(n); 
 

 
    var regex = /dog/i; 
 

 
    for(var ii = 0; ii < text_nodes.length; ++ii) { 
 
     var text_node = text_nodes[ii]; 
 
     
 
     //treat each match one at a time 
 
     var index; 
 
     while(-1 !== (index = text_node.nodeValue.search(regex))) { 
 
      //create link 
 
      var link = document.createElement("a");    
 
      link.setAttribute("href", "http://stackoverflow.com"); 
 
      link.appendChild(document.createTextNode("cat")); 
 

 
      //new text node is everything preceding the match 
 
      text_node_before = document.createTextNode(text_node.nodeValue.substr(0, index)); 
 
      
 
      //old text node becomes the rest 
 
      text_node.nodeValue = text_node.nodeValue.substr(index).replace(regex, ""); 
 

 
      text_node.parentNode.insertBefore(text_node_before, text_node); 
 
      text_node.parentNode.insertBefore(link, text_node); 
 
     } 
 
    }

<p>dog dog cat <strong>boing boing</strong> dog woof</p>

来源

2016-04-28 18:38:14

为什么JavaScript不能用链接代替文本？

回答

相关问题