Найти и заменить все экземпляры слова с помощью jquery

У меня есть статья со многими примерами слова "цвет". Я установил кнопку с классом .colour, чтобы, если вы хотите, вы можете щелкнуть ее и изменить орфографию от "color" до "color" на всей странице. Я написал несколько jQuery для этого, но меняет только один экземпляр цвета слова, но не все. Вам нужно будет многократно нажимать кнопку, чтобы изменить все из них.

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

Есть ли способ повторить цикл script, пока он не изменит все экземпляры? Также можно сделать так, чтобы он не учитывал регистр? Я новичок в javascript и jquery, поэтому может быть вопрос о нобе. Благодаря

Вот его код: http://codepen.io/patrickaltair/pen/vcdmy

Ответы

Ответ 1

Замените замену регулярным выражением с глобальной заменой.

Изменить:

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

в

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

пример codepen

Ответ 2

Я в этом случае не являюсь большим поклонником использования .html(), поэтому

$(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 place in society. Second lower case color.
</p>

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

Ответ 3

найти все и заменить

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

Ответ 4

используйте это:

//глобальный поиск в строке

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

//ИЛИ глобальный и нечувствительный к регистру поиск в строке

str = str.replace(/find/gi, "replace" );