JavaScript正则匹配全字符问题：输入括号触发正则语法错误

你已经搞定了实时模糊匹配的核心逻辑，但漏掉了正则特殊字符的处理——当用户输入(、)这类在正则语法里有特殊含义的字符时，直接用它们构造RegExp实例会触发语法错误，因为正则引擎会把这些字符当作语法指令解析，而非普通的待匹配字符。

核心解决方案：转义正则特殊字符 #

我们需要先对用户输入的查询字符串进行转义，把所有正则语法中的特殊字符（比如.*+?^${}()|[\]\\）转换成普通字面量字符，再用来构造正则表达式。

先写一个通用的转义函数：

function escapeRegExp(string) {
  // 匹配所有正则特殊字符，给它们添加反斜杠完成转义
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

然后修改你的过滤逻辑，先转义用户输入再构造正则：

// 假设filterQuery是用户输入的内容
const escapedFilterQuery = escapeRegExp(filterQuery);
const matchRegex = new RegExp(escapedFilterQuery, 'i');
const matchedMessages = messages.filter(message => matchRegex.test(message));

为什么这样有效？ #

举几个实际场景的例子：

• 当用户输入(时，转义函数会把它变成\(，构造的正则就是/\(/i，此时正则引擎会把(当作普通字符去匹配，而非尝试解析它作为分组的开始，自然就不会出现unmatched parentheses的错误了。
• 对于普通字母、数字输入，转义函数不会做任何修改，完全不影响原本的匹配逻辑。

另外，用regex.test()代替e.match()会更高效，因为test()只需要返回布尔值判断是否匹配，不需要生成匹配结果数组。

内容的提问来源于stack exchange，提问作者Sam Leurs