jQuery localizar e substituir string

Question 1

Tenho em algum lugar do site um texto específico, digamos "pirulitos", e quero substituir todas as ocorrências dessa string por "marshmellows". O problema é que não sei exatamente onde está o texto. Eu sei que poderia fazer algo como:

$(body).html($(body).html().replace('lollypops', 'marshmellows'));

Isso provavelmente funcionaria, mas preciso reescrever o mínimo de HTML possível, então estou pensando em algo como:

procure a string
encontre o elemento pai mais próximo
reescrever apenas o elemento pai mais próximo
substitua isso mesmo em atributos, mas não em todos, por exemplo, substitua em class, mas não emsrc

Por exemplo, eu teria uma estrutura 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>

Neste exemplo, cada ocorrência de "pirulitos" seria substituída, apenas <img src="...permaneceria igual e os únicos elementos que seriam realmente manipulados seriam <a>e ambos <span>.
Alguém sabe como fazer isto?

Question 2

Você poderia fazer algo assim:

$("span, p").each(function() {
    var text = $(this).text();
    text = text.replace("lollypops", "marshmellows");
    $(this).text(text);
});

Será melhor marcar todas as tags com texto que precisa ser examinado com um nome de classe adequado.

Além disso, isso pode ter problemas de desempenho. jQuery ou javascript em geral não são adequados para este tipo de operações. É melhor fazê-lo no lado do servidor.

Question 3

Você poderia fazer algo assim:

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

exemplo: http://jsfiddle.net/steweb/MhQZD/

Question 4

Abaixo está o código que usei para substituir algum texto, por texto colorido. É simples, pegue o texto e coloque dentro de uma HTMLtag. Funciona para cada palavra nas marcas dessa classe.

$('.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

Você poderia fazer algo assim:

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 que você simplesmente não adiciona uma classe ao contêiner de string e, em seguida, substitui o texto interno? Exatamente como neste exemplo.

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

Tenho em algum lugar do site um texto específico, digamos "pirulitos", e quero substituir todas as ocorrências dessa string por "marshmellows". O problema é que não sei exatamente onde está o texto. Eu sei que poderia fazer algo como:

$(body).html($(body).html().replace('lollypops', 'marshmellows'));

Isso provavelmente funcionaria, mas preciso reescrever o mínimo de HTML possível, então estou pensando em algo como:

procure a string
encontre o elemento pai mais próximo
reescrever apenas o elemento pai mais próximo
substitua isso mesmo em atributos, mas não em todos, por exemplo, substitua em class, mas não emsrc

Por exemplo, eu teria uma estrutura 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>

Neste exemplo, cada ocorrência de "pirulitos" seria substituída, apenas <img src="...permaneceria igual e os únicos elementos que seriam realmente manipulados seriam <a>e ambos <span>.
Alguém sabe como fazer isto?

Answer 2

Existe um plugin excelente e bem escrito para substituir texto. plugin jquery-replaceetext . O plug-in substitui o texto, deixando todas as tags e atributos intactos. Você também pode encontrar um bom tutorial para este plug-in em spotlight-jquery-replaceetext

Hussein

Answer 3

153

Você poderia fazer algo assim:

$("span, p").each(function() {
    var text = $(this).text();
    text = text.replace("lollypops", "marshmellows");
    $(this).text(text);
});

Será melhor marcar todas as tags com texto que precisa ser examinado com um nome de classe adequado.

Além disso, isso pode ter problemas de desempenho. jQuery ou javascript em geral não são adequados para este tipo de operações. É melhor fazê-lo no lado do servidor.

kgiannakakis
fonte

Eu sei, infelizmente não posso fazer isso no lado do servidor. Além disso, a solução que você sugeriu não é adequada para mim, pois não sei onde exatamente o barbante ficará. Pode estar em <span>, pode estar em <h4>e assim por diante ...

criptografar

Então você pode tentar $ ("*"), mas eu não o recomendaria.

kgiannakakis

Answer 4

Eu sei, infelizmente não posso fazer isso no lado do servidor. Além disso, a solução que você sugeriu não é adequada para mim, pois não sei onde exatamente o barbante ficará. Pode estar em <span>, pode estar em <h4>e assim por diante ...

criptografar

Answer 5

Então você pode tentar $ ("*"), mas eu não o recomendaria.

kgiannakakis

Answer 6

Você poderia fazer algo assim:

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

exemplo: http://jsfiddle.net/steweb/MhQZD/

Answer 7

Abaixo está o código que usei para substituir algum texto, por texto colorido. É simples, pegue o texto e coloque dentro de uma HTMLtag. Funciona para cada palavra nas marcas dessa classe.

$('.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
fonte

1

Acho que as aspas em torno da variável string na função 'substituir' precisam ser removidas.

Jason Glisson

Answer 9

1

Acho que as aspas em torno da variável string na função 'substituir' precisam ser removidas.

Jason Glisson

Answer 10

Você poderia fazer algo assim:

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 que você simplesmente não adiciona uma classe ao contêiner de string e, em seguida, substitui o texto interno? Exatamente como neste exemplo.

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
fonte

2

Esta é uma pergunta de 4 anos já respondida, mas o problema é que não pude fazer o que você está sugerindo.

cifrado em

Esta resposta ignora completamente a especificação do OP: "Quero substituir todas as ocorrências desta string ... O problema é que não sei exatamente onde está o texto."

Lucas

Answer 12

2

Esta é uma pergunta de 4 anos já respondida, mas o problema é que não pude fazer o que você está sugerindo.

cifrado em

Answer 13

Esta resposta ignora completamente a especificação do OP: "Quero substituir todas as ocorrências desta string ... O problema é que não sei exatamente onde está o texto."

Lucas

jQuery localizar e substituir string

Respostas: