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内部使用回调函数来替换为完整匹配项，您可以使用$&后向引用。

请参见updated 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>');
        }
    }
});

这里：

.trim().split(/\s+/).map(x => x.replace(/[-[\]{}()*+!<=:?.\\^$|#\s,]/g, '\\$&')).join("|")-用trim()修剪输入字符串，然后用.split(/\s+/)分割所有非空白块，然后用.map(x => x.replace(/[-[\]{}()*+!<=:?.\\^$|#\s,]/g, '\\$&'))转义这些块，然后{ {1}}创建带有替代列表的正则表达式模式。
在.join("|")字符串替换模式中，'<span class="teal--text text--darken-1 font-weight-bold">$&</span>'部分代表整个匹配值。

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

1 个答案: