2010-10-18 11 views
11

Ich möchte ein Element zu einem textNode hinzufügen. Zum Beispiel: Ich habe eine Funktion, die im textNode des Elements nach einer Zeichenkette sucht. Wenn ich es finde, möchte ich es durch ein HTML-Element ersetzen. Gibt es dafür einen Standard? Danke.JavaScript: Hinzufügen von Elementen in textNode

+0

Können/möchten Sie jQuery verwenden? –

+1

Sorry, ich kann nicht. Aber BTW, zeigen Sie Ihre Lösung zu den anderen Jungs ... – thomas

+0

Sie haben bereits die Funktion, nach der Zeichenfolge zu suchen, oder Sie fragen darüber auch? – palswim

Antwort

18

Sie können nicht einfach die Zeichenfolge ersetzen, müssen Sie das gesamte TextNode-Element ersetzen, seit TextNode elements can't contain child elements im DOM.

Also, wenn Sie Ihren Text-Knoten finden, Ihre Ersatzelement erzeugen, dann ersetzen Sie den Text-Knoten mit einer ähnlichen Funktion wie:

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

Für das, was es scheint, was Sie tun wollen, müssen Sie brechen Trennen Sie den aktuellen Textknoten in zwei neue Textknoten und ein neues HTML-Element. Hier einige Beispiel-Code, den Sie hoffentlich in die richtige Richtung weisen:

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

Vielleicht würde jQuery dies einfacher gemacht haben, aber es ist gut zu verstehen, warum all dieses Zeug so funktioniert, es funktioniert.

+0

Haben Sie Beispiele? Vielen Dank. – thomas