考虑这个文档片段：
<div id="test">
<h1>An article about John</h1>
<p>The frist paragraph is about John.</p>
<p>The second paragraph contains a <a href="#">link to John's CV</a>.</p>
<div class="comments">
<h2>Comments to John's article</h2>
<ul>
<li>Some user asks John a question.</li>
<li>John responds.</li>
</ul>
</div>
</div>
我想用字符串“Peter”替换字符串“John”的每个匹配项.这可以通过HTML重写来完成：
$('#test').html(function(i,v) {
return v.replace(/John/g,'Peter');
});
工作演示：http://jsfiddle.net/v2yp5/
上面的jQuery代码看起来很简单直接,但这是骗人的,因为它是一个糟糕的解决方案. HTML重写会重新创建#test DIV中的所有DOM节点.随后,不保留以编程方式(例如“onevent”处理程序)或用户(输入的表单字段)对该DOM子树进行的更改.
那么执行此任务的适当方式是什么？
解决方法
您希望遍历所有子节点并仅替换文本节点.否则,您可以匹配HTML,属性或序列化的任何其他内容.替换文本时,您只想使用文本节点,而不是整个HTML序列化.
我想你已经知道了:)
Bobince有一个great piece of JavaScript for doing that.
