Javascript：使用 <b> 标签突出显示字符串的一部分答案

【问题标题】：Javascript: Highlighting part of a string with <b> tagsJavascript：使用 <b> 标签突出显示字符串的一部分
【发布时间】：2011-04-07 00:00:00
【问题描述】：

我试图通过在匹配的子字符串周围插入<b> 标记来突出显示字符串中的匹配项。例如，如果查询是“猫”，那么：

"I have a cat."

应该变成：

"I have a <b>cat</b>."

同样，如果查询是“堆栈溢出”，那么：

"Stack Overflow is great."

应该变成：

"<b>Stack Overflow</b> is great."

也就是说，我要保留原字符串的大小写，但匹配时不区分大小写。

到目前为止，我正在尝试的一件事是：

var regex = new RegExp('(' + query + ')', 'i');
return strResult.replace(regex, '<b>$1</b>');

但是，如果查询中有任何括号，这会导致运行时异常，并且我认为尝试转义所有可能的正则表达式字符太麻烦了。

【问题讨论】：

【解决方案1】：

不要使用正则表达式来操作 HTML。

例如，如果查询是“猫”，那么：

I have a <em class="category">dog</em>

会变成一团乱七八糟的标记。在查询和文本可能是用户生成的情况下，由此产生的 HTML 注入攻击可能会给您带来跨站点脚本安全漏洞。

有关如何在 DOM 中使用正则表达式查找和标记文本的示例，请参阅 this question。

(为了完整起见，这里有一个转义正则表达式特殊字符的函数，因为snipplr链接的版本不足。它无法转义^和$，加上字符组中特殊的-。 )

RegExp.escape= function(s) {
    return s.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
};

【讨论】：

【解决方案2】：

有关如何转义特殊正则表达式字符（例如 ()）的信息，请参阅“Escape Regular Expression Characters in String - JavaScript”

编辑：另请查看this 较早的 SO 问题，该问题提出了一个非常相似 - 几乎相同 - 问题。

【讨论】：

【解决方案3】：

使用高亮插件怎么样？

【讨论】：