如何突出RegEx与jQuery的匹配？

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

我想将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 
}

来源

2012-12-21 spiel

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

你想添加样式到文本的div，或者创建一个围绕文本发现的范围只突出显示？ –

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

-1

我在我的代码有点改变，解决它像这样：

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"); 
}

来源

2012-12-21 23:44:16 spiel

为什么要重新发明轮子？有这个准备好的解决方案。例如，尝试this plugin。这是插件的source code。这实际上是几行代码，所以如果你真的想编写自己的突出显示引擎，你可以分析它看看突出显示是如何执行的。

来源

2012-12-21 12:51:34 mingos

我已经看过很多插件了，而且没有我需要的，这就是为什么我要求直接编码。看看你链接的来源，不是我一直在寻找的。非常感谢您尽力帮助！ – spiel

你可以尝试用一些替代（）

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/

来源

2012-12-21 12:53:11

当我打开你的小提琴时，我会收到各种奇怪的警报。另外，替换并不完全是我想到的，因为我想对父元素进行样式设置，而不是在文本周围添加一个范围。非常感谢您尽力帮助。 – spiel

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

来源

2016-05-21 14:18:28 dude

如何突出RegEx与jQuery的匹配？

回答

相关问题