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);

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

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

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

我们可以分为两个部分：

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

我们可以在 JavaScript 中使用 normalize[2] 功能，并传递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，它包含了字符串中可能包含的所有变音字节

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

参考资料

[1]

issue: https://github.com/docsifyjs/docsify/issues/1405

[2]

normalize: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize