Question

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

"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>');

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

Answer 1

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

编辑：同时查看this更早的问题，询问非常相似 - 几乎相同 - 问题。

Answer 2

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

例如，如果查询是“cat”，则：

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

将成为破碎标记的混乱。如果查询和文本可能是用户生成的，那么由此产生的HTML注入攻击很可能会给您带来跨站点脚本安全漏洞。

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

（为了完整性，这里有一个逃避正则表达式特殊字符的函数，因为在snipplr链接的版本不够。它无法逃脱^和$，加上-在字符组中很特别。）

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

Answer 3

如何使用高亮插件？