Question

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

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

Answer 1

您可以尝试使用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/

Answer 2

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

Answer 3

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

Answer 4

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

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

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

4 个答案: