jQuery buscar y reemplazar cadena

Question 1

Tengo en algún lugar del sitio web un texto específico, digamos "chupetines", 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:

buscar la cadena
encontrar el elemento padre más cercano
reescribe solo el elemento padre más cercano
reemplace esto incluso en atributos, pero no en todos, por ejemplo reemplácelo en class, pero no ensrc

Por 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, cada aparición de "lollypops" sería reemplazada, solo <img src="...permanecería igual y los únicos elementos que realmente serían manipulados serían <a>y ambos <span>s.
¿Alguien sabe cómo hacer esto?

Question 2

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 deba 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.

Question 3

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/

Question 4

A continuación se muestra el código que usé para reemplazar un texto con texto en color. Es simple, toma el texto y reemplázalo dentro de una HTMLetiqueta. 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);
});

Question 5

var string ='my string'
var new_string = string.replace('string','new string');
alert(string);
alert(new_string);

Question 6

Podrías hacer algo como esto:

HTML

<div class="element">
   <span>Hi, I am Murtaza</span>
</div>

jQuery

$(".element span").text(function(index, text) { 
    return text.replace('am', 'am not'); 
});

Question 7

¿Por qué simplemente no agrega una clase al contenedor de cadenas y luego reemplaza el texto interno? Como en este ejemplo.

HTML:

<div>
    <div>
        <p>
           <h1>
             <a class="swapText">lollipops</a>
           </h1>
        </p>
        <span class="swapText">lollipops</span>
    </div>
</div>
<p>
   <span class="lollipops">Hello, World!</span>
   <img src="/lollipops.jpg" alt="Cool image" />
</p>

jQuery:

$(document).ready(function() {
    $('.swapText').text("marshmallows");
});

Answer 1

Tengo en algún lugar del sitio web un texto específico, digamos "chupetines", 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:

buscar la cadena
encontrar el elemento padre más cercano
reescribe solo el elemento padre más cercano
reemplace esto incluso en atributos, pero no en todos, por ejemplo reemplácelo en class, pero no ensrc

Por 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, cada aparición de "lollypops" sería reemplazada, solo <img src="...permanecería igual y los únicos elementos que realmente serían manipulados serían <a>y ambos <span>s.
¿Alguien sabe cómo hacer esto?

Answer 2

Hay un excelente complemento bien escrito para reemplazar texto. jquery-replacetext-plugin . El complemento reemplaza el texto dejando intactas todas las etiquetas y atributos. También puede encontrar un buen tutorial para este complemento en spotlight-jquery-replacetext

Hussein

Answer 3

153

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 deba 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.

kgiannakakis
fuente

Lo sé, desafortunadamente no puedo hacer esto en el lado del servidor. Además, la solución que sugirió no es adecuada para mí, ya que no sé dónde estará exactamente la cadena. Puede estar adentro <span>, puede estar adentro <h4>y así sucesivamente ...

cypher

Entonces podrías probar $ ("*"), pero no lo recomendaría.

kgiannakakis

Answer 4

Lo sé, desafortunadamente no puedo hacer esto en el lado del servidor. Además, la solución que sugirió no es adecuada para mí, ya que no sé dónde estará exactamente la cadena. Puede estar adentro <span>, puede estar adentro <h4>y así sucesivamente ...

cypher

Answer 5

Entonces podrías probar $ ("*"), pero no lo recomendaría.

kgiannakakis

Answer 6

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/

Answer 7

A continuación se muestra el código que usé para reemplazar un texto con texto en color. Es simple, toma el texto y reemplázalo dentro de una HTMLetiqueta. 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);
});

Answer 8

2

var string ='my string'
var new_string = string.replace('string','new string');
alert(string);
alert(new_string);

Sai
fuente

1

Creo que las comillas alrededor de la variable de cadena en la función 'reemplazar' deben eliminarse.

Jason Glisson

Answer 9

1

Creo que las comillas alrededor de la variable de cadena en la función 'reemplazar' deben eliminarse.

Jason Glisson

Answer 10

Podrías hacer algo como esto:

HTML

<div class="element">
   <span>Hi, I am Murtaza</span>
</div>

jQuery

$(".element span").text(function(index, text) { 
    return text.replace('am', 'am not'); 
});

Answer 11

-3

¿Por qué simplemente no agrega una clase al contenedor de cadenas y luego reemplaza el texto interno? Como en este ejemplo.

HTML:

<div>
    <div>
        <p>
           <h1>
             <a class="swapText">lollipops</a>
           </h1>
        </p>
        <span class="swapText">lollipops</span>
    </div>
</div>
<p>
   <span class="lollipops">Hello, World!</span>
   <img src="/lollipops.jpg" alt="Cool image" />
</p>

jQuery:

$(document).ready(function() {
    $('.swapText').text("marshmallows");
});

Dumitru Dimcenco
fuente

2

Esta es una pregunta de 4 años y ya respondió, pero el problema fue que no pude hacer lo que sugieres.

cifrado

Esta respuesta ignora por completo la especificación del OP: "Quiero reemplazar todas las ocurrencias de esta cadena ... El problema es que no sé dónde está exactamente el texto".

Lucas

Answer 12

2

Esta es una pregunta de 4 años y ya respondió, pero el problema fue que no pude hacer lo que sugieres.

cifrado

Answer 13

Esta respuesta ignora por completo la especificación del OP: "Quiero reemplazar todas las ocurrencias de esta cadena ... El problema es que no sé dónde está exactamente el texto".

Lucas

jQuery buscar y reemplazar cadena

Respuestas: