一个有趣的搜索神器：pinyin-match

今天介绍一个拼音神器 pinyin-match：让搜索支持拼音模糊匹配

平时微信用得比较多的小伙伴，你是否发现微信里使用拼音是可以搜索到对应的中文昵称的。

大家好，我是芝士，欢迎点此扫码加我微信 Hunyi32 交流

中文搜索一直是个小麻烦 ------ 用户习惯输入拼音，而我们往往只能用中文才能搜到结果。今天给你介绍的 pinyin-match，就完全可以解决这个麻烦！

它是一个轻量级的 JavaScript 库，帮你轻松实现中文 + 拼音的模糊搜索，支持全拼、缩写、混合输入，还能定位匹配位置，方便做高亮显示。

它能做什么？

pinyin-match 支持以下几种模式：

✅ 全拼匹配：beijing → 北京

✅ 首字母匹配：bj → 北京

✅ 模糊匹配：beij → 北京

✅ 混合匹配：bei京 → 北京

✅ 高亮定位：返回匹配区间 [start, end]，方便 UI 标记

举个例子：

js 复制代码

import PinyinMatch from 'pinyin-match'

let text = '123曾经沧海难为水'

console.log(PinyinMatch.match(text, 'cjc')) 
// [3, 5]  => 命中"曾经"

console.log(PinyinMatch.match(text, 'engjingcanghai')) 
// false  => 输入少了个"c"

使用场景

搜索框优化

拼音、首字母都能搜到目标中文

电商搜索平台

想买"华为手机"，却懒得切中文输入？直接打 hw，结果照样一键命中。

通讯录 / 联系人搜索

不记得名字怎么写？随便敲个拼音，就能在通讯录里立刻找到对方。再也不用担心输不出生僻字。

就如上面举例的微信通讯录一样

全局搜索 / Ctrl+F

在长文档、知识库、甚至整个应用里，Ctrl + F 的搜索功能也能支持拼音。输入 zgn 就能秒定位到"中华人民共和国"，查资料效率直线上升。

还有很多涉及到采用拼音匹配中文的场景都可以使用pinyin-match快速实现，提升产品体验。

实现原理

pinyin-match 可不是"简单字符串替换"那么粗暴。

pinyin-match 的底层实现其实类似 word-break 算法（对字符串进行分词匹配），流程大概是：

输入分词：把用户输入的拼音拆分成可能的音节组合
- jinan → ji nan | jin an | ji na n(...)
中文转拼音：把候选中文转换成拼音（考虑多音字，例如"曾"可以是 ceng 也可以是 zeng）
匹配校验：比较分词结果和中文拼音，支持不完整输入（最后一个音可以只打到一半）。

比如：

输入 cengd
文本我曾大 → 拼音 [wo, ceng/zeng, da]
匹配结果命中 ceng da

这样一来，哪怕用户输入的拼音不完整、夹杂缩写，也能很聪明地匹配成功。

优势亮点

✅ 轻量级：不到 10KB，无额外依赖

🔄 多模式匹配：全拼、首字母、模糊、混合输入都能搞定

✨ 高亮支持：返回匹配区间，方便 UI 渲染搜索结果

🌏 简体 / 繁体：一行代码即可切换

⚡ 通用性强：Node.js / 浏览器 / 前端框架都能无缝使用

快速尝鲜

安装

bash 复制代码

npm install pinyin-match --save

项目引入

js 复制代码

// 引入简体版：
import PinyinMatch from 'pinyin-match';  // es  

const PinyinMatch = require('pinyin-match'); // commonjs

如果你的项目涉及繁体字，还需要另外引入繁体版本：

js 复制代码

import PinyinMatch from 'pinyin-match/es/traditional.js'; // es  

const PinyinMatch = require('pinyin-match/lib/traditional.js'); // commonjs

简单使用

js 复制代码

import PinyinMatch from 'pinyin-match'

let text = '白日依山尽，黄河入海流'

// 直接中文匹配
console.log(PinyinMatch.match(text, '黄河')) 
// [6, 7]

// 拼音全拼匹配
console.log(PinyinMatch.match(text, 'bairiyishanjin')) 
// [0, 4]

// 拼音缩写匹配
console.log(PinyinMatch.match(text, 'hhrhl')) 
// [6, 9]

// 模糊输入（最后一个字母没打完）
console.log(PinyinMatch.match(text, 'huan')) 
// [6, 6]

// 拼音 + 汉字混合
console.log(PinyinMatch.match(text, 'bai日')) 
// [0, 1]

// 无法命中
console.log(PinyinMatch.match(text, 'abcdef')) 
// false

如果你正在做搜索框、通讯录、知识库，强烈建议试试 pinyin-match。

只要几行代码，你的搜索功能就能秒升级 ------ 从"只能搜中文"，变成"中拼混合全能搜"。

大家好，我是芝士，欢迎点此扫码加我微信 Hunyi32 交流，最近创建了一个低代码/前端工程化交流群，欢迎加我微信 Hunyi32 进群一起交流学习，也可关注我的公众号[ 前端界 ] 持续更新优质技术文章

如果你对这个库感兴趣，可以研究一下,🔗 项目地址：github.com/xmflswood/p...