一个简单的汉字搜索匹配示例(支持拼音、首字母简写)

简介: 在社交应用中,很多场景下需要用到搜索,以微信的搜索通讯录为例。好友自己有昵称,我们可能给他/她备注一个昵称,在输入:拼间、首字母、原文时都应该能匹配到(匹配优先是备注然后才是原来的昵称)。这里以‘芈月传’为例,‘芈’不是常见字,所以输入:myz或者miyuezhuan或者芈月传,都应该能匹配到‘芈月传’这个结果。

在社交应用中,很多场景下需要用到搜索,以微信的搜索通讯录为例。好友自己有昵称,我们可能给他/她备注一个昵称,在输入:拼间、首字母、原文时都应该能匹配到(匹配优先是备注然后才是原来的昵称)。这里以‘芈月传’为例,‘芈’不是常见字,所以输入:myz或者miyuezhuan或者芈月传,都应该能匹配到‘芈月传’这个结果。当然不一定需要全部写完,比如输入:my的时候就应该能匹配到‘芈月传’了。针对多音字的话,可能会麻烦一些,不过也可以解决(在下面的例子之上再进行扩展即可),一般场景下单音已经解决90%以上的问题了,不建议搞的特别复杂。

 

下面例子的思路是input:原文,output:[全拼,首字母,原文],使用indexOf或者正则忽略大小写对searchKey进行匹配,只要命中一个则认为匹配到了。比如[‘ruyichuan’,’ryc’,’如懿传’],要搜索‘如懿传’,因为中间那个字比较难写,所以我可能会打:ry或者ruyi,此时就应该能匹配到’如懿传’了,做的更好一些就是匹配的字进行标红,那么第一项‘ruyichuan’就应该是数组而不是字符串了。下面这个例子比较取巧,有需要的童鞋可以做为一个参考 :)

 

See the Pen simple_pinyin by Meteoric (@zhangyi) on CodePen.

目录
相关文章
|
Android开发
Android中实现获取相册中的图片扫描二维码的功能
Android中实现获取相册中的图片扫描二维码的功能
643 0
|
搜索推荐 数据可视化 数据挖掘
基于Python flask框架的招聘数据分析推荐系统,有数据推荐和可视化功能
本文介绍了一个基于Python Flask框架的招聘数据分析推荐系统,该系统具备用户登录注册、数据库连接查询、首页推荐、职位与城市分析、公司性质分析、职位需求分析、用户信息管理以及数据可视化等功能,旨在提高求职者的就业效率和满意度,同时为企业提供人才匹配和招聘效果评估手段。
839 0
基于Python flask框架的招聘数据分析推荐系统,有数据推荐和可视化功能
|
移动开发 前端开发 UED
React 音频预览组件 Audio Preview
在现代Web开发中,React框架下的音频播放功能日益重要。本文介绍如何使用React创建交互式音频预览组件,涵盖基础构建、常见问题及解决方案。通过HTML5音频标签实现基本播放控制,使用状态管理增强功能。解决跨域资源共享(CORS)、格式兼容性、自动播放限制等问题,并探讨性能优化、样式定制、事件处理、移动端适配、错误处理、国际化支持及组件集成等关键点,帮助开发者提升组件稳定性和用户体验。
333 10
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
371 6
|
前端开发 Java 数据库连接
【Java笔记+踩坑】SpringBoot——基础
springboot三种配置文件及其优先级、多环境配置、springboot整合junit,mybatis、ssmp综合图书案例
【Java笔记+踩坑】SpringBoot——基础
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
627 0
|
SQL 消息中间件 分布式计算
Hadoop生态圈组件及其作用
Hadoop生态圈组件及其作用
|
前端开发 JavaScript 测试技术
构建高效前端项目:模块化与组件化策略
【2月更文挑战第25天】 在现代网页开发中,随着用户对于网页性能和交互体验的期待不断提升,前端项目的复杂性也随之增加。为了应对这种复杂性并提高开发效率,本文将探讨模块化与组件化在前端项目中的应用策略。通过分析这两种方法的优势与适用场景,我们将揭示如何利用它们来优化项目结构,提升代码复用率,以及加快开发流程。
391 4
|
JavaScript 前端开发
vue实现循环发起多个异步请求——Promise.all()与Promise.race()
vue实现循环发起多个异步请求——Promise.all()与Promise.race()
738 1