变音符号是个啥?
变音符号是指添加在字母上面的符号,以更改字母的发音或者以区分拼写相似词语。例如汉语拼音字母 ü
上面的两个小点,或 á
、à
字母上面的标调符。
下面来看一个例子
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);
name1
和 name2
看着都是 Amélie
,但是实际上判断全等和长度却不一样都返回了 false
然后就引出了这样一个问题,在 docsify 中有一个 issue 需要在搜索中忽略变音符号,例如搜索 Amelie
就能搜索到 Amélie
但是实际上 docsify 并没有支持忽略变音符号,想要实现这个功能我们就需要从字符中删除变音标记,然后再将其与搜索查询进行比较
我们可以分为两个部分:
首先,我们需要分解字符串,一般带有变音符号的字符都由两字节表示。这是 UTF-8 中使用的一种技术,用于将单个字符表示为两个字节。
我们可以在 JavaScript 中使用 normalize 功能,并传递 NFD
参数,normalize
方法返回字符串的 Unicode 规范化形式
normalize
支持四种 Unicode 规范化形式,NFC
,NFD
,NFKC
以及 NFKD
,默认值为 NFC
通过比较分解前后的字符串长度,我们可以看到:
"Amélie".length
> 6
"Amélie".normalize('NFD').length
> 7
这表明 é
字符由两个字节而不是一个字节表示
现在字符和变音标记变成了单独的字节,就可以使用 replace
来删除不需要的字符:
"Amélie".normalize('NFD').replace(/[\u0300-\u036f]/g, '')
> "Amelie"
使用 replace
来替换 u0300
到 u036f
,它包含了字符串中可能包含的所有变音字节
这样我们就可以实现搜索包含变音符号的内容了