Trova e sostituisci tutte le istanze di una parola con jquery

Question

Ho un articolo con molte istanze della parola "colore". Ho impostato un pulsante con la classe .colour in modo che, se lo desideri, puoi fare clic su di esso e cambiare l'ortografia da "colore" a "colore" in tutta la pagina. Ho scritto alcuni jQuery per farlo, ma cambia solo un'istanza della parola colore ma non tutti. Dovresti continuare a cliccare ripetutamente sul pulsante per cambiarli tutti.

$(document).ready(function(){ 
    $(".colour").click(function(){ 
     $("body").children().each(function() {   
      $(this).html($(this).html().replace("color","colour")); 
     }); 
    }) 
}) 

C'è un modo per ripetere ripetutamente lo script finché non cambia tutte le istanze? Inoltre è possibile farlo in modo che non sia sensibile al maiuscolo/minuscolo? Sono nuovo di javascript e jquery quindi potrebbe essere una domanda noob. Grazie

Ecco un codepen di esso: http://codepen.io/patrickaltair/pen/vcdmy

Answer 1

avere il vostro sostituire l'uso di un'espressione regolare con una sostituzione globale.

Cambio:

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

a:

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

codepen example

Answer 2

trovare tutte e sostituire

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

Answer 3

Io per primo non sono un grande fan di utilizzare .html() in questi casi, in modo

$(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 problemi che vedo quando si utilizza html() sono

1. Sarà sostituire il dom che significa che tutti i gestori di eventi/dati jQuery allegati a tali elementi andranno persi

2. Sarà sostituisci anche gli attributi che potrebbero non essere quello che vuoi. Si noti che ho aggiunto un po 'di colore per il testo ma non è perso dopo la sostituzione di "colore" con "colore"

Answer 4

uso questo:

// ricerca globale nella stringa

str = str. sostituire (/ trovare/g,”sostituire”);

// o globale e la cassa ricerca maiuscole nella stringa

str = str.replace (/ trovare/gi,”sostituire”);