Javascript 使用 jquery 查找和替换单词的所有实例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25938585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Find and Replace all instances of a word with jquery
提问by patrick.altair
I have an article with many instances of the word "color". I set up a button with the class .colour so that if you want you can click it and change the spelling from "color" to "colour" throughout the page. I've written some jQuery to do this but it only changes one instance of the word color but not all. You'd have to keep repeatedly clicking the button to change all of them.
我有一篇文章有很多“颜色”这个词的例子。我设置了一个带有 .colour 类的按钮，这样如果您愿意，您可以单击它并将整个页面的拼写从“color”更改为“colour”。我已经写了一些 jQuery 来做到这一点，但它只改变了单词 color 的一个实例，但不是全部。您必须不断重复单击按钮才能更改所有这些按钮。
$(document).ready(function(){
$(".colour").click(function(){
$("body").children().each(function() {
$(this).html($(this).html().replace("color","colour"));
});
})
})
Is there a way to repeatedly loop the script until it changes all instances? Also is it possible to make it so it is not case-sensitive? I'm new to javascript and jquery so might be a noob question. Thanks
有没有办法重复循环脚本直到它更改所有实例？也有可能使它不区分大小写吗？我是 javascript 和 jquery 的新手，所以可能是一个菜鸟问题。谢谢
Here's a codepen of it: http://codepen.io/patrickaltair/pen/vcdmy
这是它的代码笔：http://codepen.io/patrickaltair/pen/vcdmy
回答by j08691
Have your replace use a regex with a global replace.
让您的替换使用具有全局替换的正则表达式。
Change:
改变：
$(this).html().replace("color","colour")
to:
到：
$(this).html().replace(/color/g,"colour");
回答by Arun P Johny
I for one am not a big fan of using .html()in such cases, so
.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's place in society. Second lower case color.
</p>
<h2 class="colour">Colour</h2>2 problems I see when using .html() are
我在使用 .html() 时看到的 2 个问题是
It will replace the dom which means any event handlers/jQuery data attached to those elements will be lost
It will replace attributes also which may not be what you want. Notice that I added some color to your text but it's not lost after replacing "color" with "colour"
它将替换 dom，这意味着附加到这些元素的任何事件处理程序/jQuery 数据都将丢失
它也会替换可能不是您想要的属性。请注意，我为您的文本添加了一些颜色，但在将“颜色”替换为“颜色”后并没有丢失
回答by pankaj prajapati
Use this:
用这个：
Global search in string
字符串中的全局搜索
str = str.replace(/find/g,”replace”);
Or global and case-insensitive search in string
或在字符串中进行全局和不区分大小写的搜索
str = str.replace(/find/gi,”replace”);
回答by alessandrio
find all and replace
查找所有并替换
$(this).html().split('color').join("colour");
