javascript中的转义正则表达式特殊字符，但仍保留匹配关键字的字符串完整性

当用户在搜索框中键入时，我试图突出显示网页上的一些文本。我的搜索算法只是匹配每个空格分隔的关键字。在我开始给搜索词添加括号之前，我一直认为这个函数是完美的。这很好 语法错误：无效的正则表达式：***：未终止的组” 正如正则表达式所解释的那样，我试图避开括号和其他字符，但是高亮显示不起作用

突出显示（str）{
//这一行可以工作，但不能突出显示多个未连接的关键字
//var replacedStr=（this.search | |“”）.replace（/[-[\]{}（）*+）{
返回“”+匹配+“”
})
}

所以我需要转义括号。我在注释行中尝试了括号，但函数未能突出显示文本中的所有关键字：/

---

有什么想法吗？

您需要转义要搜索和突出显示的每个非空白块。此外，不需要在

replace

中使用回调来替换整个匹配项，您可以使用

$&

反向引用

见：

vm=新的Vue({
el:“应用程序”，
数据（）{
返回{
搜索：空，
消息：“搜索此文本以查找匹配项（也请检查括号内的区域）”
};
},
计算：{}，
方法：{
突出显示（str）{
var replacedStr=（this.search | | |“”）.trim（）.split（/\s+/）.map（x=>x.replace（/[-[\]{}（）*+！x.replace（/[-[\]{}（）*+！x.replace（/[-[\]{}（）*+）！这正是我要找的。对它的工作原理的很好的解释。谢谢Wiktor！
highlight (str) {
    // this line works but prevents highlighting multiple keywords that arent connected
    // var replacedStr = (this.search || '').replace(/[-[\]{}()*+!<=:?.\\^$|#\s,]/g, '\\$&')

    // you can comment this line and uncomment above to see a different but not perfect option
    var replacedStr = (this.search || '').replace(/ /g, '|')
    return str.replace(new RegExp(replacedStr, 'gi'), match => {
      return '<span class="font-weight-bold">' + match + '</span>'
    })
}

vm = new Vue({
    el: "#app",
    data() {
        return {
            search: null,
            message: 'Search this text for matches (check the bracketed area too)'
        };
    },
    computed: {},
    methods: {
        highlight (str) {
          var replacedStr = (this.search || '').trim().split(/\s+/).map(x => x.replace(/[-[\]{}()*+!<=:?.\\^$|#\s,]/g, '\\$&')).join("|");
          return str.replace(new RegExp(replacedStr, 'gi'), 
            '<span class="teal--text text--darken-1 font-weight-bold">$&</span>');
        }
    }
});