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

仅过滤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>');
                }
            }
        });
    }
}

FIDDLE

在不破坏点击事件的情况下查找和替换文本

1 个答案: