Vue-cli3 ,js根据汉字或拼音模糊搜索功能,汉字支持同音字、多音字,支持首字母

输入汉字模糊查询同音字,多音字,支持首字母,

目标用户为视障人士,需求是:
匹配字段:“行为” 。
可以使用 “兴魏”,“性未”,“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 同理

如果帮到你了,点个赞再走吧~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lazy33

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值