javascript - 将 HTML 添加到通过 node.nodeValue 提取的文本节点

Question

我想知道在提取 contents() 并对其中的所有文本节点执行替换后，是否有任何方法可以输出 HTML。

jsFiddle:http://jsfiddle.net/bikerabhinav/t8835/1/

HTML:

<div id="msg">
    Hi, this is a Textnode _link_<br>
    this is Textnode number 2
    <br /><a href="http://google.com">element node</a>
</div>

JS:

$('#msg').contents().each(function() {
    if(this.nodeType == 3) {
        var u = this.nodeValue;
        var reg = /_link_/g;
        this.nodeValue = u.replace(reg,'<a href="http://google.com">Google</a>');
    }
});

输出:

Hi, this is a Textnode <a href="http://google.com">Google</a>
this is Textnode number 2 
element node

我需要什么:

Hi, this is a Textnode <a href="http://google.com">Google</a><br> <!-- as a HTML link -->
this is Textnode number 2 <br>
element node

附言:

• 我故意不使用 html() 获取内容，执行 .replace，然后使用 html() 再次设置值，因为使用此代码段的原始应用程序具有复杂的结构(即它将运行的 DOM 元素，加上要匹配和替换的字符串，有超过 30 个表达式需要搜索并替换为特殊字符，如笑脸代码)。

  但是DOM中只有text-nodes有要替换的字符串，保留外层的html结构和元素是必要的。

上面的代码可以工作，只是不是在 HTML 中。有办法实现吗？

Answer 1

如果我对你的理解正确，我相信这样做会:

$('#msg').contents().each(function() {
    if(this.nodeType == 3) {
        var u = this.nodeValue;
        var reg = /_link_/g;
        $(this).replaceWith(u.replace(reg,'<a href="http://google.com">Google</a>'));
    }
});

http://jsfiddle.net/t8835/2/