如何使用 jQuery 突出显示 RegEx 匹配项？

Posted 2023-03-06

【中文标题】如何使用 jQuery 突出显示 RegEx 匹配项？

【英文标题】：How to highlight RegEx matches with jQuery?

【发布时间】：2012-12-09 01:14:42

【问题描述】：

以代码为基础，是否可以在不使用额外插件的情况下突出显示任何匹配项？

我想将style="backgorund: green;" 添加到找到项目的 div 中，以便我可以立即看到它们。

到目前为止我尝试过的事情都没有奏效，所以我希望一些来自我大脑之外的新想法会起到作用。

function finder(items)
    var needed = [
         /* items */
    ];
    var re = new RegExp(needed.join("|"), "i");
    return(items.match(re) != null);


var found = finder(document.body.innerhtml);
var output = found ? "found" : "not found";

if(output == 'found') 
    //highlight found array item

【问题讨论】：

相关：我最近做了类似的事情：github.com/Ralt/regexfiddle

您想将样式添加到包含文本的 div 中，还是在找到的文本周围创建一个跨度以仅突出显示它？

@FlorianMargaine 我想将样式添加到包含查找的元素，而不是在其周围创建新元素。现在将查看到目前为止给出的答案，看看是否已经有我可以使用的东西。

【参考方案1】：

使用innerHTML 是邪恶的，因为它会一次又一次地替换事件并触发 DOM 的生成。我建议使用现有的插件，因为你会遇到更多的陷阱。查看mark.js 以突出显示自定义正则表达式。

【参考方案2】：

我稍微改变了我的代码并解决了这个问题：

function finder(items)
    var needed = [
         /* items */
    ];
    var reg = new RegExp(needed.join("|"), "i");
    var found = (textToCheck.match(reg) != null);
    var foundItem = textToCheck.match(reg);
    return [found,foundItem];


var found = finder(document.body.innerHTML)[0];
var foundItem = finder(document.body.innerHTML)[1];

if(found === true) 
    $('div:contains('+foundItem+')').css("background", "greenyellow");

【参考方案3】：

你可以试试用 replace()

for (var i = 0; i < needed.length; i++) 
    var word = needed[i];
    document.body.innerHTML = document.body.innerHTML.replace(word, '<span style="background: #00ff00">' + word + '</span>');

在这里试试：http://jsfiddle.net/4kjuw/

【讨论】：

当我打开你的小提琴时，我会收到各种奇怪的警报。此外，替换并不是我的想法，因为我想为父元素设置样式，而不是在文本周围添加跨度。非常感谢您尝试提供帮助。

【参考方案4】：

为什么要重新发明***？有现成的解决方案。例如，试试this plugin。这是插件的source code。它实际上是几行代码，所以如果您真的想编写自己的高亮引擎，您可以对其进行分析以了解高亮是如何执行的。

【讨论】：

我之前已经看过不少插件，但都没有我需要的，这就是我要求直接代码的原因。看看你链接的来源，不是我一直在寻找的。非常感谢您尝试提供帮助！