javascript - 使用给定的搜索词改进 RegEx 以突出显示页面上的文本

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”应突出显示“(937) 555-1234”
或:“oneil”应突出显示“O'neil”

注意:我将匹配项替换为“word”而不是匹配的内容。解决方案应在原始内容周围放置“”。

提前感谢您的宝贵时间!

Answer 1

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

word = "9375551234"
regex_word = ""
for(var i = 0; i < word.length; i++) {
 regex_word += '[^\\w]*' + word[i];
};

"(937) 555-1234".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;
}