JavaScript: Agregar elementos en textNode

Question

Quiero agregar un elemento a un textNode. Por ejemplo: tengo una función que busca una cadena dentro del textNode del elemento. Cuando lo encuentro, quiero reemplazarlo con un elemento HTML. ¿Hay algún estándar para eso? Gracias.

Answer 1

No puede simplemente reemplazar la cadena, tendrá que reemplazar todo el elemento TextNode, ya que TextNode elements can't contain child elements en el DOM.

Por lo tanto, cuando usted encuentra su nodo de texto, generar su elemento de repuesto, vuelva a colocar el nodo de texto con una función similar a:

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

Por lo que parece que quiere hacer, tendrá que romper aparte el Nodo de Texto actual en dos nuevos Nodos de Texto y un nuevo elemento HTML. He aquí algunos ejemplos de código para señalar que es de esperar en la dirección correcta:

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

Tal jQuery habría hecho esto más fácil, pero es bueno entender por qué todas estas cosas funciona de la manera que lo hace.