web-dev-qa-db-fra.com

jQuery rechercher et remplacer la chaîne

J'ai quelque part sur le site Web un texte spécifique, disons "lollypops", et je souhaite remplacer toutes les occurrences de cette chaîne par "marshmellows". Le problème est que je ne sais pas où se trouve exactement le texte. Je sais que je pourrais faire quelque chose comme:

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

Cela fonctionnerait probablement, mais je dois réécrire le moins de code HTML possible. Je pense donc à quelque chose comme:

  1. rechercher la chaîne
  2. trouver l'élément parent le plus proche
  3. réécrire uniquement l'élément parent le plus proche
  4. remplacez ceci même dans les attributs, mais pas tous, par exemple remplacez-le dans class, mais pas dans src

Par exemple, j'aurais une structure comme celle-ci

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

Dans cet exemple, chaque occurrence de "lollypops" serait remplacée, seul <img src="... resterait identique et les seuls éléments réellement manipulés seraient <a> et les deux <span>s.
Est-ce que quelqu'un sait comment faire cela?

javascriptjqueryjquery-selectors
72
cypher

Vous pouvez faire quelque chose comme ça:

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

Il sera préférable de marquer toutes les balises avec du texte devant être examiné avec un nom de classe approprié.

Cela peut également poser des problèmes de performances. jQuery ou javascript en général ne conviennent pas vraiment à ce type d'opérations. Vous feriez mieux de le faire côté serveur.

135
kgiannakakis

Vous pouvez faire quelque chose de cette façon:

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

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

14
stecb

Vous trouverez ci-dessous le code que j'ai utilisé pour remplacer du texte, par du texte coloré. C'est simple, prenez le texte et remplacez-le par une balise HTML. Cela fonctionne pour chaque mot de cette balise de 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);
});
6
Bipul Chandra Dev Nath
var string ='my string'
var new_string = string.replace('string','new string');
alert(string);
alert(new_string);
0
Sai Krishna