Ersetzen Sie alle ourrance einer Zeichenfolge in einem Element

Question

Ich möchte eine bestimmte Zeichenfolge in (der Text von) alle untergeordneten Elemente eines bestimmten Elements ersetzen.

innerHTML kann nicht verwendet werden, da diese Sequenz in Attributen erscheinen kann. Ich habe versucht, XPath zu verwenden, aber es scheint, dass die Schnittstelle im Wesentlichen schreibgeschützt ist. Da dies auf ein Element beschränkt ist, können Funktionen wie document.getElementsByTagName ebenfalls nicht verwendet werden.

Kann irgendjemand irgendeinen Weg vorschlagen, dies zu tun? Jede jQuery- oder reine DOM-Methode ist akzeptabel.

Edit:

Einige Antworten sind darauf hindeutet, das Problem, das ich habe versucht, um zu arbeiten: an einem Element den Text direkt ändern verursachen alle Nicht-Text Kind-Knoten entfernt werden.

Das Problem besteht also im Wesentlichen darin, wie alle Textknoten in einem Baum effizient ausgewählt werden können. In XPath können Sie es einfach als //text() ausführen, aber die aktuelle XPath-Schnittstelle erlaubt es Ihnen nicht, diese Textknoten zu ändern.

Ein Weg, dies zu tun, ist durch Rekursion wie in der answer von Bergi gezeigt. Ein weiterer way ist die Verwendung der find('*') Selektor von jQuery, aber das ist ein bisschen teurer. Ich warte immer noch darauf, ob es bessere Lösungen gibt.

Answer 1

nur einen einfachen Eigenbau DOM-Iterator verwenden, die rekursiv über alle Knoten geht:

(function iterate_node(node) { 
    if (node.nodeType === 3) { // Node.TEXT_NODE 
     var text = node.data.replace(/any regular expression/g, "any replacement"); 
     if (text != node.data) // there's a Safari bug 
      node.data = text; 
    } else if (node.nodeType === 1) { // Node.ELEMENT_NODE 
     for (var i = 0; i < node.childNodes.length; i++) { 
      iterate_node(node.childNodes[i]); // run recursive on DOM 
     } 
    } 
})(content); // any dom node 

Answer 2

Sorry, hätte es nur mich:

$('#id').find('*').each(function(){ 
    $.each(this.childNodes, function() { 
     if (this.nodeType === 3) { 
      this.data = this.data.toUpperCase(); 
     } 
    }) 
}) 

I verwendet toUpperCase (hier) das Ergebnis deutlicher zu machen, aber jeder String Betrieb dort gültig sein würde.

Answer 3

Mit jQuery:

$('#parent').children().each(function() { 
    var that = $(this); 

    that.text(that.text().replace('test', 'foo')); 
}); 

Wenn Sie es vorziehen, durch alle Kinder statt nur unmittelbaren Kinder zu suchen, verwenden Sie .find() statt.

http://jsfiddle.net/ExwDx/

Edit: Dokumentation für children, each, text und find.

Answer 4

Eine Lösung könnte sein, durch alle verfügbaren Knoten (TextNodes enthalten) zu surfen und ein Regexp-Muster auf die Ergebnisse anzuwenden. Um auch TextNodes zu erhalten, müssen Sie jQuerys .contents() aufrufen. Zum Beispiel:

var search = "foo", 
    replaceWith = 'bar', 
    pattern = new RegExp(search, 'g'); 


function searchReplace(root) { 
    $(root).contents().each(function _repl(_, node) { 
     if(node.nodeType === 3) 
      node.nodeValue = node.nodeValue.replace(pattern, replaceWith); 
     else searchReplace(node); 
    }); 
} 

$('#apply').on('click', function() { 
    searchReplace(document.getElementById('rootNode')); 
}); 

Beispiel: http://jsfiddle.net/h8Rxu/3/

Referenz: .contents()