jQuery znajdź i zamień ciąg

Question 1

Mam gdzieś na stronie określony tekst, powiedzmy „lizaki”, i chcę zamienić wszystkie wystąpienia tego ciągu na „pianki”. Problem w tym, że nie wiem, gdzie dokładnie jest tekst. Wiem, że mógłbym zrobić coś takiego:

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

To prawdopodobnie by zadziałało, ale muszę przepisać jak najmniej kodu HTML, więc myślę o czymś takim:

wyszukaj ciąg
znajdź najbliższy element nadrzędny
przepisz tylko najbliższy element nadrzędny
zamień to nawet w atrybutach, ale nie we wszystkich, na przykład zamień to w class, ale nie wsrc

Na przykład miałbym taką strukturę

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

W tym przykładzie każde wystąpienie „lizaków” zostanie zastąpione, <img src="...pozostanie tylko takie samo, a jedynymi elementami, które faktycznie zostaną zmanipulowane, będą <a>i oba <span>.
Czy ktoś wie, jak to zrobić?

Question 2

Możesz zrobić coś takiego:

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

Lepiej będzie oznaczyć wszystkie tagi tekstem, który ma zostać zbadany, odpowiednią nazwą klasy.

Może to również powodować problemy z wydajnością. jQuery lub javascript w ogóle nie nadają się do tego rodzaju operacji. Lepiej zrobić to po stronie serwera.

Question 3

Możesz zrobić coś w ten sposób:

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

przykład: http://jsfiddle.net/steweb/MhQZD/

Question 4

Poniżej znajduje się kod, którego użyłem do zastąpienia tekstu kolorowym tekstem. To proste, wziąłem tekst i zastąpiono go HTMLtagiem. Działa dla każdego słowa w tagach tej klasy.

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

Możesz zrobić coś takiego:

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

Dlaczego po prostu nie dodajesz klasy do kontenera ciągów, a następnie nie zastępujesz wewnętrznego tekstu? Tak jak w tym przykładzie.

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

Mam gdzieś na stronie określony tekst, powiedzmy „lizaki”, i chcę zamienić wszystkie wystąpienia tego ciągu na „pianki”. Problem w tym, że nie wiem, gdzie dokładnie jest tekst. Wiem, że mógłbym zrobić coś takiego:

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

To prawdopodobnie by zadziałało, ale muszę przepisać jak najmniej kodu HTML, więc myślę o czymś takim:

wyszukaj ciąg
znajdź najbliższy element nadrzędny
przepisz tylko najbliższy element nadrzędny
zamień to nawet w atrybutach, ale nie we wszystkich, na przykład zamień to w class, ale nie wsrc

Na przykład miałbym taką strukturę

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

W tym przykładzie każde wystąpienie „lizaków” zostanie zastąpione, <img src="...pozostanie tylko takie samo, a jedynymi elementami, które faktycznie zostaną zmanipulowane, będą <a>i oba <span>.
Czy ktoś wie, jak to zrobić?

Answer 2

Istnieje doskonała, dobrze napisana wtyczka do zamiany tekstu. jquery-replaceetext-plugin . Wtyczka zastępuje tekst, pozostawiając wszystkie tagi i atrybuty nietknięte. Możesz również znaleźć fajny samouczek dla tej wtyczki pod adresem spotlight-jquery-replaceetext

Hussein

Answer 3

153

Możesz zrobić coś takiego:

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

Lepiej będzie oznaczyć wszystkie tagi tekstem, który ma zostać zbadany, odpowiednią nazwą klasy.

Może to również powodować problemy z wydajnością. jQuery lub javascript w ogóle nie nadają się do tego rodzaju operacji. Lepiej zrobić to po stronie serwera.

kgiannakakis
źródło

Wiem, niestety nie mogę tego zrobić po stronie serwera. Również rozwiązanie, które zasugerowałeś, jest dla mnie nieodpowiednie, ponieważ nie wiem, gdzie dokładnie będzie sznurek. Może być w <span>środku, może być <h4>i tak dalej ...

cypher,

Wtedy możesz spróbować $ ("*"), ale nie polecam tego.

kgiannakakis,

Answer 4

Wiem, niestety nie mogę tego zrobić po stronie serwera. Również rozwiązanie, które zasugerowałeś, jest dla mnie nieodpowiednie, ponieważ nie wiem, gdzie dokładnie będzie sznurek. Może być w <span>środku, może być <h4>i tak dalej ...

cypher,

Answer 5

Wtedy możesz spróbować $ ("*"), ale nie polecam tego.

kgiannakakis,

Answer 6

Możesz zrobić coś w ten sposób:

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

przykład: http://jsfiddle.net/steweb/MhQZD/

Answer 7

Poniżej znajduje się kod, którego użyłem do zastąpienia tekstu kolorowym tekstem. To proste, wziąłem tekst i zastąpiono go HTMLtagiem. Działa dla każdego słowa w tagach tej klasy.

$('.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
źródło

1

Myślę, że cudzysłowy wokół zmiennej łańcuchowej w funkcji „zamień” muszą zostać usunięte.

Jason Glisson

Answer 9

1

Myślę, że cudzysłowy wokół zmiennej łańcuchowej w funkcji „zamień” muszą zostać usunięte.

Jason Glisson

Answer 10

Możesz zrobić coś takiego:

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

Dlaczego po prostu nie dodajesz klasy do kontenera ciągów, a następnie nie zastępujesz wewnętrznego tekstu? Tak jak w tym przykładzie.

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
źródło

2

To jest 4-latek i już odpowiedział na pytanie, ale problem polegał na tym, że nie mogłem zrobić tego, co sugerujesz.

cypher

Ta odpowiedź całkowicie ignoruje specyfikację OP: „Chcę zamienić wszystkie wystąpienia tego ciągu… Problem polega na tym, że nie wiem, gdzie dokładnie jest tekst”.

Łukasz

Answer 12

2

To jest 4-latek i już odpowiedział na pytanie, ale problem polegał na tym, że nie mogłem zrobić tego, co sugerujesz.

cypher

Answer 13

Ta odpowiedź całkowicie ignoruje specyfikację OP: „Chcę zamienić wszystkie wystąpienia tego ciągu… Problem polega na tym, że nie wiem, gdzie dokładnie jest tekst”.

Łukasz

jQuery znajdź i zamień ciąg

Odpowiedzi: