Javascript 查找和替换文本而不销毁单击事件

客户要求提供所有商标符号(™ 和®）在其网站上以特定方式进行设计；考虑到从标题到正文和导航，它们随处可见，我们决定用JavaScript实现这一点

我们要做的是找到™ 和®在页面文本中（但不是在元素属性中），并将它们包装在

标记中，以便我们可以在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();
})

商标={
init：函数（）{
$（'body'）.contents（）.each（函数（）{
var元素=$（此）；
if（element.html（））{
html（element.html（）.replace（/（？！[^）™/gi，'™'));
html（element.html（）；
}
});
}
}
$（函数（）{
商标名。init（）；
})

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

---

是否对此（JS或regex）进行了修改以阻止这种情况发生？谢谢！

仅过滤textNodes并替换parentNode的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>');
                }
            }
        });
    }
}

商标={
init：函数（）{
$（'*'）.contents（）.each（函数（）{
if（this.nodeType==3&&this.nodeValue）{
if（this.nodeValue.indexOf（'™') != -1 | | this.nodeValue.indexOf（'®'）！=-1）{
this.parentNode.innerHTML=this.parentNode.innerHTML.replace（/（？！[^）(™|®)/gi，“$1”）；
}
}
});
}
}

---

奇怪的是，这会删除绑定到元素的事件，因为您只处理元素的内容。您能否设置一个显示问题的方法，因为它似乎工作正常：可能重复@Rorymcrossan-它会删除事件处理程序，因为每个元素的整个html都被替换。@adeneo似乎可以：@Rorymcrossan-那只是因为没有嵌套->