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

Question

不寻常的情况.我有一个客户,我们称之为"BuyNow".他们想为整个网站的副本,以程式化的类似"购买他们的名字的每个实例现在 ",其中他们的名字下半年为黑体.

我真的很讨厌花一天时间将<strong>标签添加到所有副本中.使用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);
});

Answer 2

正则表达式就replace()浮现在脑海中。就像是

var text = $([selector]).html();
text = text.replace(/Now/g,'<strong>Now<\strong>');
$([selector]).html(text);

html()使用此操作时请注意。首先，有可能替换元素href属性<a>和其他属性中的匹配字符串，这可能会导致页面无法正确运行。也许可以编写一个更好的正则表达式来克服一些潜在的问题，但性能可能会受到影响（我不是正则表达式专家）。其次，使用html()替换内容将导致不可序列化的数据丢失，例如绑定到被替换的元素标记的事件处理程序、表单数据等。编写仅针对文本节点的函数可能是更好/更安全的选择，这仅取决于页面的复杂程度。

如果您有权访问 HMTL 文件，如果内容是静态的，最好对要更改文件外观的单词进行查找和替换。NotePad++的“在文件中查找”选项在大多数情况下都适用于此作业。

遵循 SingleShot 的建议并将 a<span>与 CSS 类一起使用将比使用<strong>元素提供更大的灵活性。