一尘不染

如何使用jQuery为特定单词的所有实例的/ parts /设置样式?

javascript

异常情况。我有一个客户,我们称他们为“立即购买”。他们想为他们的名字的每个实例在其整个网站的副本,以程式化的类似“购买 现在
”,其中他们的名字下半年为黑体。

我真的很讨厌花一天时间在所有副本中添加标签。有没有使用jQuery的好方法?

我已经看到了jQuery的Highlight插件,它非常接近,但是我只需要将该单词的后半部分加粗即可。


阅读 305

收藏
2020-05-01

共1个答案

一尘不染

为了可靠地执行此操作,您必须遍历文档中的每个元素以查找文本节点,然后在其中搜索文本。(这是问题中提到的插件的作用。)

这是一个普通的JavaScript /
DOM,它允许RegExp模式匹配。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);
});
2020-05-01