javascript - 查找并替换文本而不破坏点击事件

Question

客户要求其网站上的所有商标符号(™ 和 ®)以特定方式设计；考虑到它们出现的数量(从标题到正文和导航)，我们决定使用 JavaScript 来完成此操作。

我们想要做的是在页面文本中找到 ™ 和 ® 的每个实例(但不在元素属性内)并将它们包装在 <sup> 中标签，以便我们可以在 CSS 中设置它们的样式。

这是我们目前拥有的代码:

Trademark = {
    init: function () {
        $('body').contents().each(function () {
            var element = $(this);
            if (element.html()) {
                element.html(element.html().replace(/(?![^<]+>)™/gi, '<sup class="trademark">™</sup>'));
                element.html(element.html().replace(/(?![^<]+>)®/gi, '<sup class="trademark">®</sup>'));
            }
        });
    }
}

$(function () {
    Trademark.init();
})

它工作得很好，但是我们现在遇到了这样的问题:JavaScript 点击事件没有被注册到其内容被替换的元素上——我假设是因为它们在被替换时被从 DOM 中删除了。被操纵。

是否有对此进行修改(对 JS 或正则表达式)可以阻止这种情况发生？谢谢!

Answer 1

仅过滤文本节点并替换父节点的innerHTML，这样元素本身就不会被替换，并且事件处理程序应保持不变。

Trademark = {
    init: function () {
        $('*').contents().each(function() {
            if (this.nodeType == 3 && this.nodeValue) {
                if ( this.nodeValue.indexOf('™') != -1 || this.nodeValue.indexOf('®') != -1 ) {
                    this.parentNode.innerHTML = this.parentNode.innerHTML.replace(/(?![^<]+>)(™|®)/gi, '<sup class="trademark">$1</sup>');
                }
            }
        });
    }
}

FIDDLE