输入汉字模糊查询同音字,多音字,支持首字母,
目标用户为视障人士,需求是:
匹配字段:“行为” 。
可以使用 “兴魏”,“性未”,“xw”,“xingwei” ,“航为”,“杭微”,“hangwei”,“hw” 。 都可以搜索到目标词语
缺点:不支持跨字,前后鼻音混淆,不知道支持的搜索范围,不过可以手动添加
网上的大部分文章都是构建拼音的检索树,或者引入一其他数据文件。然后封装方法,导出。
缺点是,出错了不知道如何解决,或者哪儿少参数可能找到比较费劲。我要的就是拿来就能用的当然,有可能我只是想要首字母,却引入了4M的配置依赖,这确实是一个弊端
推荐一个→小茗同学的博客园的【干货】JS版汉字与拼音互转终极方案,附简单的JS拼音输入法
非常优秀,写的很详细,但是当时着急,我觉得我太菜,可能会引入错误,少什么的,就没用。
解决方案
1、汉字转拼音
2、拼音匹配目标汉字
1、汉字转拼音
网上好多,但是我用起来不方便,那么大一串,吓唬谁呢
这里→npm依赖检索,我用的就是第一个 pinyin,网站里面有使用方法
引入使用的是 let pinyin = require("pinyin");
另外,这里的转化结果是数组,需要arr.join("")
,转化下,等下我用,另外最好用trim()
去除前后空格,
注:pinyin-pro 下面叫这个名字的,不好用,引入总报错。You may need an appropriate loader to handle this file type.
我输入的搜索内容转化:let str = pinyin(val.trim(),{style: pinyin.STYLE_NORMAL}).join("")
2、拼音匹配目标汉字
使用的是pinyin-match→https://www.npmjs.com/package/pinyin-match,里面也有说明
我使用的是import PinyinMatch from 'pinyin-match'
引入。
PinyinMatch.match(test, 'str')
//test为目标汉字,str为用户输入汉字,上面转化的拼音
//搜索成功返回数组,数组第一个表示,搜索到的字段开始的位置,第二个表示搜索字段结束的位置
//搜索不到返回false
注:如果有什么生僻字,文章开始我推荐的小茗同学的【干货】JS版汉字与拼音互转终极方案,附简单的JS拼音输入法 ,他的dome里面有不常用文字,然后进入vue\node_modules\pinyin\data\dict-zi-web.js ,把自己想加的加进去就好了,当然pinyin-match 同理
如果帮到你了,点个赞再走吧~