javascript – 什么是HTML重写的好方法？

考虑这个文档片段：

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