javascript - 我如何使用 jQuery 为特定单词的所有实例设置样式/部分/？

Question

异常情况。我有一个客户，我们称他们为“BuyNow”。他们希望在其网站副本中出现的每个名称都具有类似“立即购买”的样式，其中名称的后半部分以粗体显示。

我真的很讨厌花一天时间给所有的副本添加 标签。有没有使用 jQuery 执行此操作的好方法？

我看过 jQuery 的突出显示插件，它非常接近，但我只需要将该词的后半部分加粗。

Answer 1

要可靠地执行此操作，您必须遍历文档中的每个元素以查找文本节点，并在其中搜索文本。 (这就是问题中提到的插件所做的。)

这是一个允许 RegExp 模式匹配的普通 JavaScript/DOM。 jQuery 在这里并没有真正给你太多帮助，因为选择器只能选择元素，而‘:contains’选择器是递归的，所以对我们不太有用。

// Find text in descendents of an element, in reverse document order
// pattern must be a regexp with global flag
//
function findText(element, pattern, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType==1) {
            findText(child, pattern, callback);
        } else if (child.nodeType==3) {
            var matches= [];
            var match;
            while (match= pattern.exec(child.data))
                matches.push(match);
            for (var i= matches.length; i-->0;)
                callback.call(window, child, matches[i]);
        }
    }
}

findText(document.body, /\bBuyNow\b/g, function(node, match) {
    var span= document.createElement('span');
    span.className= 'highlight';
    node.splitText(match.index+6);
    span.appendChild(node.splitText(match.index+3));
    node.parentNode.insertBefore(span, node.nextSibling);
});