Reemplazar toda la aparición de una cadena en un elemento

Question

Quiero reemplazar una cadena en particular en (el texto de) todos los elementos descendientes de un elemento dado.

innerHTML no se puede utilizar, ya que esta secuencia puede aparecer en los atributos. He intentado usar XPath, pero parece que la interfaz es esencialmente de solo lectura. Como esto está limitado a un elemento, las funciones como document.getElementsByTagName tampoco se pueden usar.

¿Podría alguien sugerir alguna forma de hacerlo? Cualquier jQuery o método DOM puro es aceptable.

Editar:

Algunas de las respuestas están sugiriendo el problema que estaba tratando de evitar: modificar el texto directamente sobre un elemento hará que todos los nodos secundarios no son de texto a ser removidos.

Por lo tanto, el problema se reduce esencialmente a cómo seleccionar eficientemente todos los nodos de texto en un árbol. En XPath, puede hacerlo fácilmente como //text(), pero la interfaz XPath actual no le permite cambiar estos nodos de texto, parece.

Una forma de hacerlo es por recursividad como se muestra en el answer por Bergi. Otro way es usar el selector find('*') de jQuery, pero esto es un poco más caro. Todavía estoy esperando para ver si hay mejores soluciones.

Answer 1

sólo tiene que utilizar un simple DOM-iterador selfmade, que camina de forma recursiva sobre todos los nodos:

(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

Lo sentimos, acabo yo mismo:

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

que utilizan toUpperCase() aquí para hacer el resultado más obvio, pero cualquier operación de cuerdas sería válida allí.

Answer 3

Usando jQuery:

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

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

Si prefiere buscar a través de todos los niños en lugar de sólo los niños inmediatos, utilice .find() lugar.

http://jsfiddle.net/ExwDx/

Editar: Documentación para children, each, text y find.

Answer 4

Una solución podría ser navegar a través de todos los nodos disponibles (TextNodes incluidos) y aplicar un patrón de expresiones regulares en los resultados. Para capturar TextNodes también, necesita invocar jQuerys .contents(). Por ejemplo:

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

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

Referencia: .contents()