Trouver et remplacer toutes les instances d'un mot avec jquery

Question

J'ai un article avec de nombreuses instances du mot "couleur". J'ai mis en place un bouton avec la classe .colour pour que vous puissiez cliquer dessus et changer l'orthographe de "couleur" en "couleur" sur toute la page. J'ai écrit quelques jQuery pour faire ceci mais cela change seulement une instance du mot couleur mais pas tous. Vous devez continuer à cliquer plusieurs fois sur le bouton pour les changer tous. Existe-t-il un moyen de boucler plusieurs fois le script jusqu'à ce qu'il change toutes les instances? Aussi est-il possible de faire en sorte qu'il ne soit pas sensible à la casse? Je suis nouveau à javascript et jquery ainsi pourrait être une question noob. Merci

Voici un codepen de celui-ci: http://codepen.io/patrickaltair/pen/vcdmy

Answer 1

Demandez à votre remplacer l'utilisation d'une expression rationnelle avec un remplacement global.

Change:

$(this).html().replace("color","colour") 

à:

$(this).html().replace(/color/g,"colour"); 

codepen example

Answer 2

trouver tous et remplacer

$(this).html().split('color').join("colour"); 

Answer 3

Je suis pour ma part pas un grand fan de l'utilisation .html() dans de tels cas,

$(document).ready(function(){ 
 
    $(".colour").click(function(){ 
 
    $("body *").contents().each(function() { 
 
     if(this.nodeType==3){ 
 
     this.nodeValue = this.nodeValue.replace(/color/g, 'colour') 
 
     } 
 
    }); 
 
    }) 
 
})

h2.colour, h2.color{ 
 
    font-size:16px; 
 
    max-width: 200px; 
 
    margin: 1em auto; 
 
    text-align: center; 
 
    padding:0.4em; 
 
    color: #999; 
 
    background-color: #ccc; 
 
    @include border-top-radius(5px); 
 
    @include border-bottom-radius(5px); 
 
    @include transition (all 0.3s ease-in-out); 
 
} 
 

 
h2.colour:hover, h2.color:hover{ 
 
    color: #000; 
 
    background-color: #aaa; 
 
} 
 

 

 

 
p{ 
 
    max-width: 400px; 
 
    margin: 1em auto; 
 
    margin-top: 5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p class="text"> 
 
    Seasonal Colors: Some colors are more appropriate at certain times of year than others. Pastels are usually associated with spring/summer, while autumn colors are rust, <span style="color:brown">brown</span>, <span style="color:green">green</span>, and <span style="color:firebrick">burgundy</span>. Wearing rust in the summer, or light yellow in the fall looks out of place. That color's place in society. Second lower case color. 
 
</p> 
 

 
<h2 class="colour">Colour</h2>

2 problèmes que je vois lors de l'utilisation .html() sont

1. Il sera remplacer le dom qui signifie que tous les gestionnaires d'événements/données jQuery attachés à ces éléments seront perdus

2. remplacer les attributs qui peuvent ne pas être ce que vous voulez. Notez que j'ai ajouté un peu de couleur à votre texte, mais il est pas perdu après avoir remplacé la « couleur » par « couleur »

Answer 4

utiliser ceci:

// recherche globale dans la chaîne

str = str. remplacer (/ find/g, "remplacer");

// OU recherche globale et insensible à la casse dans la chaîne

str = str.replace (/ find/gi, » remplacer »);