javascript - 什么是 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

一个 jQuery 插件版本如何减少一点代码？

http://jsfiddle.net/v2yp5/4/

jQuery.fn.textWalk = function( fn ) {
    this.contents().each( jwalk );
    function jwalk() {
        var nn = this.nodeName.toLowerCase();
        if( nn === '#text' ) {
            fn.call( this );
        } else if( this.nodeType === 1 && this.childNodes && this.childNodes[0] && nn !== 'script' && nn !== 'textarea' ) {
            $(this).contents().each( jwalk );
        }
    }
    return this;
};

---

$('#test').textWalk(function() {
    this.data = this.data.replace('John','Peter');
});

---

或者做一些鸭子输入，并可以选择传递几个字符串进行替换:

http://jsfiddle.net/v2yp5/5/

jQuery.fn.textWalk = function( fn, str ) {
    var func = jQuery.isFunction( fn );
    this.contents().each( jwalk );

    function jwalk() {
        var nn = this.nodeName.toLowerCase();
        if( nn === '#text' ) {
            if( func ) {
                fn.call( this );
            } else {
                this.data = this.data.replace( fn, str );
            }
        } else if( this.nodeType === 1 && this.childNodes && this.childNodes[0] && nn !== 'script' && nn !== 'textarea' ) {
            $(this).contents().each( jwalk );
        }
    }
    return this;
};

$('#test').textWalk(function() {
    this.data = this.data.replace('John','Peter');
});

$('#test').textWalk( 'Peter', 'Bob' );