javascript - 带有重音符号的正则表达式搜索结果突出显示
问题描述
有人可以帮我改进我的搜索吗?当用户在输入中写下一件或多件事情时,我会尝试突出显示几个单词。我正在使用这个功能:
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é”部分。我使用了一些法语单词,其中包含很多重音。谢谢
解决方案
要在搜索词中搜索没有重音的重音文本,您可以定义一个重音映射,并从中组成一个正则表达式:
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
:
- 它是所有键的 OR 正则表达式
accentMap
:- 例子:
/ae|a|c|e|i|n|o|u/g
- 根据需要调整地图以获得额外的重音字符
- 例子:
解释queryRegex
:
- 它是所有查询词的 OR 正则表达式,其中的每个键被映射到该键的所有重音版本的 OR 正则表达式
- 示例:查询术语
cafe
导致此(缩短的)正则表达式:/c(a|á|ă|ắ|ặ|ǎ|â|ậ|ä|ȧ|à|)f(e|é|ĕ|ě|ệ|ë|ė|è|ẽ)/gi
- 示例:查询术语
注意:由于查询词是用户指定的并在正则表达式中使用,我们需要在用户输入中转义正则表达式符号,因此使用 function escapeRegExp()
。
推荐阅读
- powerbi - PowerBI DAX 用于供应商数量和年度支出
- linux - 为什么 vm_area_struct 有 start_code、end_code 字段?
- python - pandas group by with isin 语句返回索引 true/false
- python - KeyError: 20,不确定是什么问题
- python - 如何使用 Boto 将文件上传到 S3 存储桶上的确切位置
- c# - 使用 .net 核心代码越南语字符调用 api 时出错
- python - 大型数组的 numpy 向量化操作
- sql - 如何计算sql中的重复次数
- rust - 什么单一类型可以指超 HttpConnector 和 HttpsConnector?
- android - 无法使用 minifyEnabled 运行 Android 检测 (UI) 测试