javascript - jquery:仅在文本节点上进行替换

Question

我正在尝试将文本解析为 html，进行一些更改，然后再次转回纯文本。

我要做的更改基本上就是用另一个术语替换一些术语(例如用'new'替换'old') .

我只想更改文本类型，而不是 html 元素的属性和特性(例如，不应更改 href 值。)。

请看代码:

h= '<span myAtrib="something"><a href="old(this SHOULD NOT be changed)">old(this SHOULD be changed)</a></span>';

h=$("<div>"+ h +"</div>").find('span[myAtrib="something"]').html(function (i, oldHtml) {
    oldHtml = oldHtml.replace(/old/g, 'new');
return oldHtml;
}).end().html();

我应该如何使替换仅发生在文本节点上，或者至少应该如何过滤掉 anchor 元素？

Answer 1

How should I make the replacement happen only on text nodes

通过递归迭代所有子节点/后代并测试该节点是否是文本节点:

function replace($element, from, to) {
    $element.contents().each(function() {
        if (this.nodeType === 3) { // text node
            this.nodeValue = this.nodeValue.replace(from, to);
        }
        else if (this.nodeType === 1) { // element node
            replace($(this), from, to);
        }
    });
}
var $ele = $("<div>"+ h +"</div>").find('span[myAtrib="something"]')
replace($ele, /old/g, "new");
var html = $ele.end().html();

DEMO

您也可以在没有 jQuery 的情况下轻松完成此操作。