Javascript jQuery查找和替换字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5115152/
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
jQuery find and replace string
提问by cypher
I have somewhere on website a specific text, let's say "lollypops", and I want to replace all the occurrences of this string with "marshmellows". The problem is that I don't know where exactly the text is. I know I could do something like:
我在网站上的某个地方有一个特定的文本，比如说“棒棒糖”，我想用“棉花糖”替换这个字符串的所有出现。问题是我不知道文本的确切位置。我知道我可以这样做：
$(body).html($(body).html().replace('lollypops', 'marshmellows'));
This would probably work, but I need to rewrite as little HTML as I can, so I'm thinking something like:
这可能会奏效，但我需要尽可能少地重写 HTML，所以我在想：
- search for the string
- find the closest parent element
- rewrite only the closest parent element
- replace this even in attributes, but not all, for example replace it in
class, but not insrc
- 搜索字符串
- 找到最近的父元素
- 只重写最近的父元素
- 甚至在属性中替换它，但不是全部，例如将其替换为
class，但不替换为src
In example, I would have structure like this
例如，我会有这样的结构
<body>
<div>
<div>
<p>
<h1>
<a>lollypops</a>
</h1>
</p>
<span>lollypops</span>
</div>
</div>
<p>
<span class="lollypops">Hello, World!</span>
<img src="/lollypops.jpg" alt="Cool image" />
</p>
<body>
In this example, every occurrence of "lollypops" would be replaced, only <img src="...would remain the same and the only elements that would actually be manipulated would be <a>and both <span>s.
Does anybody know how to do this?
在这个例子中，每次出现的“棒棒糖”都将被替换，只会<img src="...保持不变，并且实际操作的唯一元素将是<a>和两者<span>。
有人知道怎么做这个吗？
回答by kgiannakakis
You could do something like this:
你可以这样做：
$("span, p").each(function() {
var text = $(this).text();
text = text.replace("lollypops", "marshmellows");
$(this).text(text);
});
It will be better to mark all tags with text that needs to be examined with a suitable class name.
最好用需要用合适的类名检查的文本标记所有标签。
Also, this may have performance issues. jQuery or javascript in general aren't really suitable for this kind of operations. You are better off doing it server side.
此外，这可能存在性能问题。jQuery 或 javascript 通常并不适合这种操作。你最好在服务器端做。
回答by stecb
You could do something this way:
你可以这样做：
$(document.body).find('*').each(function() {
if($(this).hasClass('lollypops')){ //class replacing..many ways to do this :)
$(this).removeClass('lollypops');
$(this).addClass('marshmellows');
}
var tmp = $(this).children().remove(); //removing and saving children to a tmp obj
var text = $(this).text(); //getting just current node text
text = text.replace(/lollypops/g, "marshmellows"); //replacing every lollypops occurence with marshmellows
$(this).text(text); //setting text
$(this).append(tmp); //re-append 'foundlings'
});
example: http://jsfiddle.net/steweb/MhQZD/
回答by Bipul Chandra Dev Nath
Below is the code I used to replace some text, with colored text. It's simple, took the text and replace it within an HTMLtag. It works for each words in that class tags.
下面是我用来用彩色文本替换一些文本的代码。很简单，获取文本并将其替换为HTML标签。它适用于该类标签中的每个单词。
$('.hightlight').each(function(){
//highlight_words('going', this);
var high = 'going';
high = high.replace(/\W/g, '');
var str = high.split(" ");
var text = $(this).text();
text = text.replace(str, "<span style='color: blue'>"+str+"</span>");
$(this).html(text);
});
回答by Sai Krishna
var string ='my string'
var new_string = string.replace('string','new string');
alert(string);
alert(new_string);
回答by Murtaza JAFARI
You could do something like this:
你可以这样做：
HTML
HTML
<div class="element">
<span>Hi, I am Murtaza</span>
</div>
jQuery
jQuery
$(".element span").text(function(index, text) {
return text.replace('am', 'am not');
});
回答by Dumitru Dimcenco
Why you just don't add a class to the string container and then replace the inner text ? Just like in this example.
为什么不将类添加到字符串容器然后替换内部文本？就像在这个例子中一样。
HTML:
HTML：
<div>
<div>
<p>
<h1>
<a class="swapText">lollipops</a>
</h1>
</p>
<span class="swapText">lollipops</span>
</div>
</div>
<p>
<span class="lollipops">Hello, World!</span>
<img src="/lollipops.jpg" alt="Cool image" />
</p>
jQuery:
jQuery：
$(document).ready(function() {
$('.swapText').text("marshmallows");
});
