JavaScript: Aggiungere elementi in TextNode

Question

Voglio aggiungere un elemento ad un TextNode. Ad esempio: ho una funzione che cerca una stringa all'interno del textNode dell'elemento. Quando lo trovo, voglio sostituire con un elemento HTML. C'è qualche standard per quello? Grazie.

Answer 1

Non si può semplicemente sostituire la stringa, si dovrà sostituire l'intero elemento TextNode, dal momento che TextNode elements can't contain child elements nel DOM.

Così, quando si trova il nodo di testo, generare il vostro elemento sostitutivo, quindi sostituire il nodo di testo con una funzione simile a:

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

Per quello che sembra che si vuole fare, si dovrà rompere a parte il nodo di testo corrente in due nuovi nodi di testo e un nuovo elemento HTML. Ecco alcuni esempi di codice di indicarvi spera nella giusta direzione:

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

Forse jQuery avrebbe fatto questo più facile, ma è bene capire perché tutto questo roba funziona il modo in cui lo fa.