什么是HTML重写的好方法？

Question

考虑这个文档片段:

<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子树进行的更改.

那么执行此任务的适当方式是什么？

Answer 1

您想要循环遍历所有子节点并仅替换文本节点。否则，您可以匹配 HTML、属性或任何其他序列化的内容。替换文本时，您只想使用文本节点，而不是序列化的整个 HTML。

我想你已经知道了:)

Bobince 有一个很棒的 JavaScript 代码可以做到这一点。