jQuery findet und ersetzt einen String

83

Ich habe irgendwo auf der Website einen bestimmten Text, sagen wir "Lollypops", und ich möchte alle Vorkommen dieser Zeichenfolge durch "Marshmellows" ersetzen. Das Problem ist, dass ich nicht weiß, wo genau der Text ist. Ich weiß, ich könnte so etwas tun:

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

Dies würde wahrscheinlich funktionieren, aber ich muss so wenig HTML wie möglich neu schreiben, also denke ich an etwas wie:

  1. Suche nach der Zeichenfolge
  2. Suchen Sie das nächstgelegene übergeordnete Element
  3. Schreiben Sie nur das nächstgelegene übergeordnete Element neu
  4. Ersetzen Sie dies auch in Attributen, aber nicht in allen, z. B. in class, aber nicht insrc

Zum Beispiel hätte ich eine solche 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>

In diesem Beispiel würde jedes Auftreten von "Lollypops" ersetzt, nur <img src="...würde gleich bleiben und die einzigen Elemente, die tatsächlich manipuliert würden, wären <a>und beide <span>s.
Weiß jemand, wie man das macht?

javascript jquery jquery-selectors Chiffre
quelle
Es gibt ein ausgezeichnetes, gut geschriebenes Plugin zum Ersetzen von Text. jquery-replaceetext-plugin . Das Plug-In ersetzt Text und lässt alle Tags und Attribute unberührt. Sie finden auch ein nettes Tutorial für dieses Plug-In unter spotlight-jquery-replaceetext
Hussein

Antworten:

149

Sie könnten so etwas tun:

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

Es ist besser, alle Tags mit Text zu markieren, der mit einem geeigneten Klassennamen untersucht werden muss.

Dies kann auch zu Leistungsproblemen führen. jQuery oder Javascript sind im Allgemeinen für diese Art von Operationen nicht wirklich geeignet. Sie sind besser dran, es serverseitig zu tun.

kgiannakakis
quelle
Ich weiß, leider kann ich das auf der Serverseite nicht tun. Außerdem ist die von Ihnen vorgeschlagene Lösung für mich ungeeignet, da ich nicht weiß, wo genau sich die Zeichenfolge befindet. Es kann in sein <span>, es kann in sein <h4>und so weiter ...
Chiffre
Dann könnten Sie $ ("*") ausprobieren, aber ich würde es nicht empfehlen.
kgiannakakis
14

Sie könnten etwas auf diese Weise tun:

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

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

stecb
quelle
7

Unten ist der Code, mit dem ich Text durch farbigen Text ersetzt habe. Es ist einfach, den Text zu nehmen und ihn innerhalb eines HTMLTags zu ersetzen . Es funktioniert für jedes Wort in diesen Klassen-Tags.

$('.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);
});
Bipul Chandra Dev Nath
quelle
2 
var string ='my string'
var new_string = string.replace('string','new string');
alert(string);
alert(new_string);
Sai
quelle
1
Ich denke, die Anführungszeichen um die Zeichenfolgenvariable in der Funktion 'Ersetzen' müssen entfernt werden.
Jason Glisson
0

Sie könnten so etwas tun:

HTML 

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


jQuery

$(".element span").text(function(index, text) { 
    return text.replace('am', 'am not'); 
});
Murtaza JAFARI
quelle
-3

Warum fügen Sie dem Zeichenfolgencontainer einfach keine Klasse hinzu und ersetzen dann den inneren Text? Genau wie in diesem Beispiel.

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
quelle
2
Dies ist eine 4 Jahre alte und bereits beantwortete Frage, aber das Problem war, dass ich nicht tun konnte, was Sie vorschlagen.
Chiffre
Diese Antwort ignoriert die Spezifikation des OP vollständig: "Ich möchte alle Vorkommen dieser Zeichenfolge ersetzen ... Das Problem ist, dass ich nicht weiß, wo genau der Text ist."
Luke