101 votes

jQuery rechercher et remplacer la chaîne

J'ai quelque part sur le site web d'un texte précis, disons-le, "lollypops", et je veux remplacer toutes les occurrences de cette chaîne avec "marshmellows". Le problème est que je ne sais pas où exactement le texte. Je sais que je pourrais faire quelque chose comme:

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

Ce serait sans doute travailler, mais j'ai besoin de réécrire que peu de HTML que je peux, donc je suis en train de penser à quelque chose comme:

  1. recherche de la chaîne
  2. trouver le plus proche parent de l'élément
  3. réécrire le plus proche parent de l'élément
  4. remplacer ce même dans les attributs, mais pas tous, par exemple le remplacer en class, mais pas en src

Dans l'exemple, j'aurais structure comme ceci

<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é, seulement <img src="... resterait le même, et les seuls éléments qui seraient effectivement être manipulés serait <a> et les deux <span>s.
Quelqu'un sait comment faire cela?

172voto

kgiannakakis Points 62727

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.

17voto

Hussein Points 23042

Il existe un excellent plugin bien écrit pour remplacer le texte. http://www.benalman.com/projects/jquery-replacetext-plugin/ . Le plug-in remplace le texte en laissant toutes les balises et tous les attributs intacts. Vous pouvez également trouver un bon tutoriel pour ce plug-in à l' adresse http://net.tutsplus.com/tutorials/javascript-ajax/spotlight-jquery-replacetext/

15voto

stecb Points 7663

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/

8voto

Le code ci-dessous est le code que j'ai utilisé pour remplacer du texte, par du texte en couleur. C'est simple, a pris le texte et le remplacer dans 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);
});
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X