爲什麼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不能用鏈接代替文本？

回答

相關問題