JavaScript 如何实现在搜索中忽略变音符号

变音符号是个啥?

变音符号是指添加在字母上面的符号,以更改字母的发音或者以区分拼写相似词语。例如汉语拼音字母ü上面的两个小点,或áà字母上面的标调符。

下面来看一个例子

const name1 = '\u0041\u006d\u00e9\u006c\u0069\u0065';
const name2 = '\u0041\u006d\u0065\u0301\u006c\u0069\u0065';
console.log(name1, name2);
console.log(name1 === name2);
console.log(name1.length === name2.length);

name1name2 看着都是Amélie,但是实际上判断全等和长度却不一样都返回了false

然后就引出了这样一个问题,在 docsify 中有一个 issue 需要在搜索中忽略变音符号,例如搜索Amelie就能搜索到Amélie

但是实际上 docsify 并没有支持忽略变音符号,想要实现这个功能我们就需要从字符中删除变音标记,然后再将其与搜索查询进行比较

我们可以分为两个部分:

首先,我们需要分解字符串,一般带有变音符号的字符都由两字节表示。这是 UTF-8 中使用的一种技术,用于将单个字符表示为两个字节。

我们可以在 JavaScript 中使用 normalize 功能,并传递NFD参数,normalize方法返回字符串的 Unicode 规范化形式

normalize支持四种 Unicode 规范化形式,NFCNFDNFKC以及 NFKD,默认值为NFC

通过比较分解前后的字符串长度,我们可以看到:

"Amélie".length
> 6
"Amélie".normalize('NFD').length
> 7

这表明é字符由两个字节而不是一个字节表示

现在字符和变音标记变成了单独的字节,就可以使用 replace 来删除不需要的字符:

"Amélie".normalize('NFD').replace(/[\u0300-\u036f]/g, '')
> "Amelie"

使用replace来替换u0300u036f,它包含了字符串中可能包含的所有变音字节

这样我们就可以实现搜索包含变音符号的内容了

发表评论

发表评论

*

沙发空缺中,还不快抢~