6

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

我想添加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
}
4

4 回答 4

1

为什么要重新发明轮子？有现成的解决方案。例如，试试这个插件。这是插件的源代码。它实际上是几行代码，所以如果您真的想编写自己的高亮引擎，您可以分析它以查看高亮是如何执行的。

于 2012-12-21T12:51:34.367 回答
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/

于 2012-12-21T12:53:11.380 回答
1

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

于 2016-05-21T14:18:28.700 回答
-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-21T23:44:16.850 回答