Javascript 正则表达式答案

【问题标题】：Javascript regular expressionsJavascript 正则表达式
【发布时间】：2010-09-03 02:35:14
【问题描述】：

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

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”，那么它将替换标签内的文本！

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

谢谢！

【问题讨论】：

我相信这是相关的：stackoverflow.com/questions/1732348/… :)
我做了类似jQuery plugin的东西。随时从source 获取想法。

标签： javascript regex

【解决方案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

【讨论】：