带重音的正则表达式搜索结果突出显示

Question

有人可以帮我改进搜索吗？当用户在输入中输入一个或多个内容时，我会尝试突出显示几个单词。我正在使用这个功能：

checkHighlightList(originalStr, queries) {
    const regexp = new RegExp(queries.join('|'), 'gi');
    const matchs = originalStr.match(regexp);
    if (matchs) {
      const result = originalStr.replace(regexp, match => `<span class="highlight">${ match }</span>`);
      return result;
    }
  }

问题是，如果我的查询中有“pokémon”这个词，而我写的是“kemon”。它不起作用，因为每个重音字符都不同 (ô !== o)。我想在我的输入中写“ke”或“ké”并突出显示“pokémon”中的“ké”部分。我使用了一些带有很多口音的法语单词。谢谢

Answer 1

要在搜索词中搜索没有重音的带重音的文本，您可以定义一个重音映射，并从中组成一个正则表达式：

accentMap = {
  ae: '(ae|æ|ǽ|ǣ)',
  a:  '(a|á|ă|ắ|ặ|ằ|ẳ|ẵ|ǎ|â|ấ|ậ|ầ|ẩ|ẫ|ä|ǟ|ȧ|ǡ|ạ|ȁ|à|ả|ȃ|ā|ą|ᶏ|ẚ|å|ǻ|ḁ|ⱥ|ã)',
  c:  '(c|ć|č|ç|ḉ|ĉ|ɕ|ċ|ƈ|ȼ)',
  e:  '(e|é|ĕ|ě|ȩ|ḝ|ê|ế|ệ|ề|ể|ễ|ḙ|ë|ė|ẹ|ȅ|è|ẻ|ȇ|ē|ḗ|ḕ|ⱸ|ę|ᶒ|ɇ|ẽ|ḛ)',
  i:  '(i|í|ĭ|ǐ|î|ï|ḯ|ị|ȉ|ì|ỉ|ȋ|ī|į|ᶖ|ɨ|ĩ|ḭ)',
  n:  '(n|ń|ň|ņ|ṋ|ȵ|ṅ|ṇ|ǹ|ɲ|ṉ|ƞ|ᵰ|ᶇ|ɳ|ñ)',
  o:  '(o|ó|ŏ|ǒ|ô|ố|ộ|ồ|ổ|ỗ|ö|ȫ|ȯ|ȱ|ọ|ő|ȍ|ò|ỏ|ơ|ớ|ợ|ờ|ở|ỡ|ȏ|ō|ṓ|ṑ|ǫ|ǭ|ø|ǿ|õ|ṍ|ṏ|ȭ)',
  u:  '(u|ú|ŭ|ǔ|û|ṷ|ü|ǘ|ǚ|ǜ|ǖ|ṳ|ụ|ű|ȕ|ù|ủ|ư|ứ|ự|ừ|ử|ữ|ȗ|ū|ṻ|ų|ᶙ|ů|ũ|ṹ|ṵ)'
};

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\]/g, '\$&');
}

function checkHighlightList(str, queries) {
  accentRegex = new RegExp(Object.keys(accentMap).join('|'), 'g');
  const queryRegex = new RegExp(queries.map(q => {
    return escapeRegExp(q).toLowerCase().replace(accentRegex, m => {
      return accentMap[m] || m;
    });
  }).join('|'), 'gi');
  return str.replace(queryRegex, m => `<span class="highlight">${ m }</span>`);
}

let source = 'Pokémon & Crème Brulée';
let result = checkHighlightList(source, [ 'kemon', 'creme' ]);
console.log('source:\n  "' + source + '"');
console.log('result:\n  "' + result + '"');

搜索词的输出 [ 'kemon', 'creme' ]：

source:
  "Pokémon & Crème Brulée"
result:
  "Po<span class="highlight">kémon</span> & <span class="highlight">Crème</span> Brulée"

accentRegex的解释：

它是 accentMap 的所有键的 OR 正则表达式：
- 示例：/ae|a|c|e|i|n|o|u/g
- 根据需要调整地图以获得额外的重音字符

queryRegex的解释：

它是所有查询词的 OR 正则表达式，其中 accentMap 中的每个键都映射到该键的所有重音版本的 OR 正则表达式
- 示例：查询词 cafe 导致此（缩短的）正则表达式：/c(a|á|ă|ắ|ặ|ǎ|â|ậ|ä|ȧ|à|)f(e|é|ĕ|ě|ệ|ë|ė|è|ẽ)/gi

注意：由于查询词是用户指定的并在正则表达式中使用，我们需要转义用户输入中的正则表达式符号，因此使用函数escapeRegExp().

带重音的正则表达式搜索结果突出显示

Regexp search result hightlight with accent

javascript

angular

regex

search

highlight