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

Question

当用户在搜索框中键入时，我试图在我的网页上突出显示一些文本。我的搜索算法是简单地匹配每个空格分隔的关键字。在我开始给我的搜索词添加括号之前，我认为这个功能是完美的。这将启动SynTaxError：无效的正则表达式: ****: 未终止组”，因为它会被正则表达式解释。我试图跳过括号和其他字符，但高亮显示不起作用。

https://codepen.io/anon/pen/YOaYEv

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>'
    })
}

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

有什么想法吗？

Answer 1

您需要转义要搜索并突出显示的每个非空白块。此外，不需要在replace中使用回调来替换整个匹配，您可以使用$

请参阅更新的JS：

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

这里：

• 。修剪（）。拆分（/\s/）。地图（x）=