Question

我正在处理一个快速“搜索和突出显示”脚本的小问题。我正在使用正则表达式，因为我想在文档加载后在客户端进行搜索。我的搜索/突出显示功能如下：

function highlight(word, colour, container) {
    var regex = new RegExp("(>[^<]*?)(" + word + ")", "ig");
    var replace = "$1<span name='searchTerm' style='background-color: " + colour + "'>$2</span>";

    if (regex.exec(container.innerHTML)) {
        container.innerHTML = container.innerHTML.replace(regex, replace);
        return true;
    }
    return false;
}

word是要搜索的字词，colour是突出显示它的颜色，container是要搜索的元素。

考虑包含此内容的元素：

<ul>
    <li>Set the setting to the correct setting.</li>
</ul>

我说我将单词“set”传递给了高亮功能。在它的当前状态中，它只会因惰性重复而找到第一个set实例。

那么如果我将正则表达式更改为：

var regex = new RegExp("(>[^<]*?)?(" + word + ")", "ig");

现在效果很好，它突出显示字符串“set”的所有实例。但是，如果我传递搜索词“li”，那么它将替换标签内的文字！

是否可以快速修复此正则表达式以获取我想要的行为？我需要它来替换搜索字符串的所有实例，而不是作为标记的一部分找到的那些实例。我想使用正则表达式保持客户端。

谢谢！

Answer 1

You shouldn't be using regex to parse HTML。正确地遍历DOM树并进行搜索并替换纯文本。

顺便说一下，有一个jQuery插件可以满足您的需求;你可以使用它或者看看它来了解如何做到这一点：
http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

Javascript正则表达式

1 个答案: