Question

我有一篇文章，里面有许多关于＆＃34; color＆＃34;这个词的例子。我设置了一个带有.colour类的按钮，这样如果你想要，你可以点击它并改变＃34; color＆＃34;到＆＃34;颜色＆＃34;整个页面。我已经编写了一些jQuery来执行此操作，但它只更改了单词颜色的一个实例，但并非全部。您必须反复单击按钮才能更改所有内容。

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

有没有办法重复循环脚本，直到它改变所有实例？是否有可能使它不区分大小写？我是javascript和jquery的新手，所以可能是一个noob问题。感谢

以下是它的代码：http://codepen.io/patrickaltair/pen/vcdmy

Answer 1

让你的替换使用具有全局替换的正则表达式。

变化：

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

为：

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

<强> codepen example

Answer 2

我不是在这种情况下使用.html()的忠实粉丝，所以

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用.html（）时遇到的2个问题

它将替换dom，这意味着附加到这些元素的任何事件处理程序/ jQuery数据都将丢失
它将替换可能不是您想要的属性。请注意，我为您的文字添加了一些颜色，但在更换＆＃34; color＆＃34;之后它没有丢失。使用＆＃34; color＆＃34;

Answer 3

使用此：

全局搜索字符串

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

或在字符串

中进行全局和不区分大小写的搜索

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

Answer 4

查找全部并替换

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

使用jquery查找和替换单词的所有实例

4 个答案: