改进正则表达式以使用给定的搜索词突出显示页面上的文本

Question

我这里有一些工作代码，突出显示了给定搜索词的完全匹配。

highlight: function(html, search) {
        $.each(search.split(' '), function(idx, word) {
            if (word != '') {
                html = html.replace(new RegExp(word, 'gi'), '<mark>' + word + '</mark>')
            }
        });
        return html;
}

我还想强调"不完全匹配"。

例如："9375551234"应突出显示"[phone]"
或： "oneil"应该突出"O'neil"

注意：我用"单词"替换匹配项，而不是匹配的内容。 解决方案应在原始内容周围放置"。

提前感谢您的时间！

Answer 1

您可以修改搜索词以接受其之后或之前的任何特殊字符

word = "9375551234"
regex_word = ""
for(var i = 0; i < word.length; i++) {
 regex_word += '[^\w]*' + word[i];
};
"[phone]".replace(new RegExp(regex_word, 'gi'), 's'); // 's'

对于这个：

word = "oneil"
regex_word = ""
for(var i = 0; i < word.length; i++) {
  regex_word += '[^\w]*' + word[i];
};
new RegExp(regex_word, 'gi')
s = "O'ne-il".replace(new RegExp(regex_word, 'gi'), 's'); // 's'

所以对你来说将是

highlight: function(html, search) {
    $.each(search.split(' '), function(idx, word) {
        if (word != '') {
          regex_word = ""
          for(var i = 0; i < word.length; i++) {
             regex_word += '[^\w]*' + word[i];
          };
            html = html.replace(new RegExp(regex_word, 'gi'), '<mark>' + word + '</mark>')
        }
    });
    return html;
}