En algún lugar del sitio web tengo un texto específico, digamos "piruletas", y quiero reemplazar todas las apariciones de esta cadena con "marshmellows". El problema es que no sé dónde está exactamente el texto. Sé que podría hacer algo como:
$(body).html($(body).html().replace('lollypops', 'marshmellows'));Esto probablemente funcionaría, pero necesito reescribir la menor cantidad de HTML posible, así que estoy pensando en algo como:
class , pero no en srcPor ejemplo, tendría una estructura como esta.
<body> <div> <div> <p> <h1> <a>lollypops</a> </h1> </p> <span>lollypops</span> </div> </div> <p> <span class="lollypops">Hello, World!</span> <img src="/lollypops.jpg" alt="Cool image" /> </p> <body> En este ejemplo, se reemplazaría cada aparición de "lollypops", solo <img src="... permanecería igual y los únicos elementos que en realidad se manipularían serían <a> y ambos <span> s.
¿Alguien sabe cómo hacer esto?
Podrías hacer algo como esto:
$("span, p").each(function() { var text = $(this).text(); text = text.replace("lollypops", "marshmellows"); $(this).text(text); });Será mejor marcar todas las etiquetas con texto que debe examinarse con un nombre de clase adecuado.
Además, esto puede tener problemas de rendimiento. jQuery o javascript en general no son realmente adecuados para este tipo de operaciones. Es mejor hacerlo del lado del servidor.
Podrías hacer algo de esta manera:
$(document.body).find('*').each(function() { if($(this).hasClass('lollypops')){ //class replacing..many ways to do this :) $(this).removeClass('lollypops'); $(this).addClass('marshmellows'); } var tmp = $(this).children().remove(); //removing and saving children to a tmp obj var text = $(this).text(); //getting just current node text text = text.replace(/lollypops/g, "marshmellows"); //replacing every lollypops occurence with marshmellows $(this).text(text); //setting text $(this).append(tmp); //re-append 'foundlings' });ejemplo: http://jsfiddle.net/steweb/MhQZD/
A continuación se muestra el código que usé para reemplazar parte del texto, con texto en color. Es simple, tomó el texto y lo reemplazó dentro de una etiqueta HTML . Funciona para cada palabra en las etiquetas de esa clase.
$('.hightlight').each(function(){ //highlight_words('going', this); var high = 'going'; high = high.replace(/\W/g, ''); var str = high.split(" "); var text = $(this).text(); text = text.replace(str, "<span style='color: blue'>"+str+"</span>"); $(this).html(text); });