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

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é”，并突出显示“神奇宝贝”中的“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 正则表达式，其中的每个键被映射到该键的所有重音版本的 OR 正则表达式
  • 示例：查询术语cafe 会产生这个（缩短的）正则表达式：/c(a|á|ă|ắ|ặ|ǎ|â|ậ|ä|ȧ|à|)f(e|é|ĕ|ě|ệ|ë|ė|è|ẽ)/gi

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