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

2020-12-25 11:18:13 浏览数 (1)

变音符号是个啥?

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

下面来看一个例子

代码语言:javascript复制
const name1 = 'u0041u006du00e9u006cu0069u0065';
const name2 = 'u0041u006du0065u0301u006cu0069u0065';
console.log(name1, name2);
console.log(name1 === name2);
console.log(name1.length === name2.length);

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

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

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

我们可以分为两个部分:

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

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

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

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

代码语言:javascript复制
"Amélie".length
> 6
"Amélie".normalize('NFD').length
> 7

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

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

代码语言:javascript复制
"Amélie".normalize('NFD').replace(/[u0300-u036f]/g, '')
> "Amelie"

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

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

参考资料

[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

0 人点赞