JavaScript：在textNode中添加元素

Question

我想將一個元素添加到textNode。例如：我有一個函數在元素的textNode內搜索一個字符串。當我找到它時，我想用HTML元素替換。那有什麼標準嗎？ 謝謝。

Answer 1

你不能只是替換字符串，你必須替換整個TextNode元素，因爲在DOM中的TextNode elements can't contain child elements。

所以，當你發現你的文本節點，產生的替換件，然後替換類似功能的文本節點：

function ReplaceNode(textNode, eNode) { 
    var pNode = textNode.parentNode; 
    pNode.replaceChild(textNode, eNode); 
} 

對於它出現什麼你想做的事，你就必須打破將當前的文本節點分成兩個新的文本節點和一個新的HTML元素。下面是一些示例代碼，希望你指出正確的方向：

function DecorateText(str) { 
    var e = document.createElement("span"); 
    e.style.color = "#ff0000"; 
    e.appendChild(document.createTextNode(str)); 
    return e; 
} 

function SearchAndReplaceElement(elem) { 
    for(var i = elem.childNodes.length; i--;) { 
     var childNode = elem.childNodes[i]; 
     if(childNode.nodeType == 3) { // 3 => a Text Node 
      var strSrc = childNode.nodeValue; // for Text Nodes, the nodeValue property contains the text 
      var strSearch = "Special String"; 
      var pos = strSrc.indexOf(strSearch); 

      if(pos >= 0) { 
       var fragment = document.createDocumentFragment(); 

       if(pos > 0) 
        fragment.appendChild(document.createTextNode(strSrc.substr(0, pos))); 

       fragment.appendChild(DecorateText(strSearch)); 

       if((pos + strSearch.length + 1) < strSrc.length) 
        fragment.appendChild(document.createTextNode(strSrc.substr(pos + strSearch.length + 1))); 

       elem.replaceChild(fragment, childNode); 
      } 
     } 
    } 
} 

也許jQuery的會作出這更容易，但它是很好理解爲什麼所有這些東西的作品它的方式。