Javascript正则表达式

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"传递给了高亮功能.在它的当前状态中,它只发现由于懒惰重复而设置的第一个实例.

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

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

现在这很好用,它突出显示字符串"set"的所有实例.但是,如果我传递搜索词"li",那么它将替换标签内的文字!

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

谢谢!

Answer 1

您不应该使用正则表达式来解析HTML.正确地遍历DOM树并进行搜索并替换纯文本.

顺便说一句,有一个jQuery插件可以满足您的需求; 您可以使用它或查看它以了解如何执行此操作:http:
//johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html