Sostituisci tutta l'ocurrance di una stringa in un elemento

Question

Voglio sostituire una stringa particolare nel (il testo di) tutti gli elementi discendenti di un dato elemento.

innerHTML non può essere utilizzato poiché questa sequenza può apparire negli attributi. Ho provato ad usare XPath, ma sembra che l'interfaccia sia essenzialmente di sola lettura. Poiché questo è limitato a un elemento, non è possibile utilizzare funzioni come document.getElementsByTagName.

Qualcuno potrebbe suggerire un modo per farlo? Qualsiasi metodo jQuery o DOM puro è accettabile.

Edit:

Alcune delle risposte stanno suggerendo il problema che stavo cercando di risolvere: la modifica del testo direttamente su un elemento causerà tutti i nodi figli non testuale per essere rimosso.

Quindi il problema dipende essenzialmente da come selezionare in modo efficiente tutti i nodi di testo in un albero. In XPath, puoi farlo facilmente come //text(), ma l'attuale interfaccia XPath non ti permette di cambiare questi nodi di testo.

Un modo per farlo è con ricorsione come mostrato nello answer di Bergi. Un altro way utilizza il selettore find('*') di jQuery, ma questo è un po 'più costoso. Sto ancora aspettando di vedere se ci sono soluzioni migliori.

Answer 1

basta usare un semplice selfmade DOM-iteratore, che cammina in modo ricorsivo su tutti i nodi:

(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

Siamo spiacenti, appena ricevuto io stesso:

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

ho usato toUpperCase() qui per rendere il risultato più evidente, ma qualsiasi operazione String sarebbe valido lì.

Answer 3

utilizzando jQuery:

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

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

Se si preferisce per la ricerca in tutti i bambini invece di solo i bambini immediati, utilizzare .find() invece.

http://jsfiddle.net/ExwDx/

Edit: La documentazione per children, each, text e find.

Answer 4

Una soluzione potrebbe essere quella di navigare attraverso tutti i nodi disponibili (TextNode inclusi) e applicare un motivo regexp sui risultati. Per afferrare TextNodes, è necessario invocare jQuerys .contents(). Per esempio:

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

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

Riferimento: .contents()