JavaScript: Ajouter des éléments dans textNode

Question

Je souhaite ajouter un élément à un textNode. Par exemple: J'ai une fonction qui cherche une chaîne dans le textNode de l'élément. Quand je le trouve, je veux le remplacer par un élément HTML. Y a-t-il une norme pour cela? Merci.

Answer 1

Vous ne pouvez pas simplement remplacer la chaîne, vous devrez remplacer l'élément TextNode entier, puisque TextNode elements can't contain child elements dans le DOM.

Alors, quand vous trouvez votre nœud de texte, générer votre élément de remplacement, puis remplacez le nœud de texte avec une fonction similaire à:

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

Pour ce, il semble que vous voulez faire, vous devrez briser séparer le nœud de texte actuel en deux nouveaux nœuds de texte et un nouvel élément HTML. Voici quelques exemples de code pour vous diriger, espérons dans la bonne direction:

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

Peut-être que jQuery aurait fait cela plus facile, mais il est bon de comprendre pourquoi toutes ces choses fonctionne comme il le fait.