JS实现拼音(字母)匹配汉字(姓名)的示例代码

JS实现拼音匹配汉字 JS拼音匹配汉字 JS 拼音汉字 2023-05-18 05:05:15 364人浏览泡泡鱼

摘要

目录1. 首先说下功能2. 安装3. 引入4. api5. 简单使用测试示例6. 具体案例这就是个模糊查询，我们平常做的都是直接输入汉字去把对应的值过滤出来，但我还真是第

这就是个模糊查询，我们平常做的都是直接输入汉字去把对应的值过滤出来，但我还真是第一次通过拼音去查询（当然不只是拼音，汉字也是可以的），以前还真没注意这个。唉，这可咋搞，我怎么知道某个汉字（字符串）的拼音的首字母是什么呢？正当我愁眉苦脸的时候，哎，一个库被我发现了，hhhhh~。就是pinyin-match。下面介绍该包的使用，这个包也不大，四百多kb。蛮高效的。下面介绍一下该库的使用

npm官方：https://www.npmjs.com/package/pinyin-match

1. 首先说下功能

它能够使用拼音快速检索目标。当然也可以使用汉字

简体版27KB (gzip ≈ 19KB)，繁体版86KB (gzip ≈ 60KB)
支持多音字、繁体字、拼音首字母匹配,具备分词功能
返回位置信息，可用于高亮匹配字符
在长多音字串下依然有高性能

在线演示：Http://laosep.top/pinyin-match/

2. 安装

npm install pinyin-match --save

3. 引入

简体版：

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

繁体版：

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

当然也可以script引入

// 简体：
<script src="pinyin-match/dist/main.js"></script>
// 繁体：
<script src="pinyin-match/dist/traditional.js"></script>

4. API

.match(input, keyWord) //查询匹配拼音的数据。

只向外提供暴露了这么一个方法，这一个方法足够我们使用了，也很方便

参数：

input {string} 目标字符串
keyword {string} 输入的拼音或其他关键词

Array | Boolen

5. 简单使用测试示例

let test = '123曾经沧海难为水除却巫山不是云'
 
PinyinMatch.match(test, '23曾'); // [1, 3]
 
PinyinMatch.match(test, 'cjc') // [3, 5]
 
PinyinMatch.match(test, 'cengjinGCanghai') // [3, 6]
 
PinyinMatch.match(test, 'cengjingcangha') // [3, 6]
 
PinyinMatch.match(test, 'engjingcanghai') // false
 
PinyinMatch.match(test, 'zengjingcang') // [3, 5]
 
PinyinMatch.match(test, 'sdjkelwqf') // false
 
PinyinMatch.match(test, 'zengji ng cang') // [3, 5]
 
PinyinMatch.match(test, 'zengji ng cangsdjfkl') // false
 
PinyinMatch.match('   我 爱你 中   国   ', 'nzg') // [6, 12]
 
PinyinMatch.match('   我 爱你 中   国   ', '爱你中') // [5, 8]
 
PinyinMatch.match('發', 'fa') // [0, 0]

6. 具体案例

就是平常的列表展示加模糊搜索。所用的人员列表测试数据都是下面这种格式，章末会把完整测试数据附上。

// 模拟后端返回的数据
export default [
  {
    name: '管理员',
    no: 'FT00000'
  },
  //...
]

其实很简单的了，主要是实现拼音的搜索过滤的功能，所以我案例里面样式也没调，主要是功能

闲话不说了，直接上完整代码，大家看下里面的逻辑都明白了，就这么一个组件：

<template>
  <div class="main">
    <input type="text" v-model="serchValue" placeholder="输入搜索">
    <div class="user" v-for="(user, index) in users" :key="user.no">{{ index }}# : {{ user.name }}</div>
  </div>
</template>
<script>
import userList from './data/user'
import PinyinMatch from 'pinyin-match'
let timer = null
export default {
  data() {
    return {
      serchValue: '',
      userListAll: [], // 所有数据
      users: [] // 展示的数据
    }
  },
  watch: {
    serchValue() {
      this.debounce(this.selectUser, 200)
    }
  },
  mounted(){
    this.getUserList()
  },
  methods:{
    // 模拟请求
    getUserList() {
      setTimeout(() => {
        this.userListAll = userList
        this.selectUser()
      }, 100)
    },
 
    // 防抖
    debounce(fn, wait) {
      if(timer) clearTimeout(timer)
      timer = setTimeout(() => {
        fn.call(this)
        timer = null
      }, wait)
    },
    
    // 模糊查询条件
    selectUser() {
      this.users = []
      // 如果搜索框有值的话再去过滤，因为PinyinMatch.match第二个参数是空字符串的话会匹配不到，返回false，这不符合我们的预期
      // 搜索框没有值，我们要展示所有数据
      if(this.serchValue) {
        this.userListAll.forEach(user => {
          let matchIndexs = PinyinMatch.match(user.name, this.serchValue) // 如果匹配到返回 首尾的索引数组，如果匹配不到则返回false
          if(matchIndexs) {
            this.users.push(user)
          }
        })
      } else {
        this.users = this.userListAll
      }
    }
  }
}
</script>
<style scoped>
.main {
  width: 100vw;
  height: 100vh;
  padding: 200px 0 0 200px;
  box-sizing: border-box;
}
.main input {
  margin-bottom: 5px;
}
</style>

接下来看下效果：

接下来！我们可以把上面的示例再提高点儿难度，因为让我想起了通讯录，所以在展示的时候我们就像通讯录那样展示

首先将拿到的人员列表进行分组，根据什么分呢？就是根据字母，a、b、c...这样，难道我们要把26个英文字母全都列出来吗？当然这个也分需求，但如果是通讯录的话，我们只需要百家姓中所有的拼音的首字母就可以了，也就是：abcdefghjklmnopqrstwxyz 这些。

在上面示例的基础上进行修改，在拿到人员数据之后，先处理一下，然后再进行过滤模糊查询

完整代码：

<template>
  <div class="main">
    <input type="text" v-model="serchValue" placeholder="输入搜索">
    <div class="users" v-for="user in users" :key="user.key">
      <div>{{ user.key }}</div>
      <div class="user-name" v-for="o in user.data" :key="o.no">{{ o.name }}</div>
    </div>
  </div>
</template>
<script>
import userList from './data/user'
import PinyinMatch from 'pinyin-match'
let timer = null
export default {
  data() {
    return {
      serchValue: '',
      userListAll: [], // 所有数据
      users: [] // 展示的数据
    }
  },
  watch: {
    serchValue() {
      this.debounce(this.selectUser, 200)
    }
  },
  mounted(){
    this.getUserList()
  },
  methods:{
    // 模拟请求
    getUserList() {
      setTimeout(() => {
        this.userListAll = this.handlerData(userList)
        this.selectUser()
      }, 100)
    },
    // 处理数据
    handlerData(userList) {
      // 这是百家姓中所有的拼音的首字母
      const surnameLetters = 'abcdefghjklmnopqrstwxyz'.split('')
      const userListAll = []
      surnameLetters.forEach(letter => {
        let o = { key: letter, data: [] }
        userList.forEach(user => {
          let matchIndexs = PinyinMatch.match(user.name.slice(0, 1), letter) // 匹配姓氏的拼音的首字母
          if(matchIndexs) {
            o.data.push(user)
          }
        })
        if(o.data.length) {
          userListAll.push(o)
        }
      })
      return userListAll
    },
 
    // 防抖
    debounce(fn, wait) {
      if(timer) clearTimeout(timer)
      timer = setTimeout(() => {
        fn.call(this)
        timer = null
      }, wait)
    },
 
    // 模糊查询条件
    selectUser() {
      this.users = []
      if(this.serchValue) {
        this.userListAll.forEach(user => {
          let o = { key: user.key, data: [] }
          user.data.forEach(item => {
            let matchIndexs = PinyinMatch.match(item.name, this.serchValue)
            if(matchIndexs) {
              o.data.push(item)
            }
          })
          if(o.data.length) {
            this.users.push(o)
          }
        })
      } else {
        this.users = this.userListAll
      }
    }
  }
}
</script>
<style scoped>
.main {
  width: 100%;
  height: 100%;
  padding: 0 0 0 200px;
  box-sizing: border-box;
}
.main input {
  margin-bottom: 5px;
}
.user-name {
  padding-left: 10px;
}
</style>

最后看下修改后的效果：

接下来是上面测试用的数据

export default [
    {
        "name": "管理员",
        "no": "FT00000"
    },
    {
        "name": "朱大锤",
        "no": "FT00001"
    },
    {
        "name": "郝大锤",
        "no": "FT00002"
    },
    {
        "name": "宋大锤",
        "no": "FT00003"
    },
    {
        "name": "杨大锤",
        "no": "FT00004"
    },
    {
        "name": "石大锤",
        "no": "FT00005"
    },
    {
        "name": "郑大锤",
        "no": "FT00006"
    },
    {
        "name": "刘大锤",
        "no": "FT00007"
    },
    {
        "name": "赵大锤",
        "no": "FT00008"
    },
    {
        "name": "李大锤",
        "no": "FT00009"
    },
    {
        "name": "牛二",
        "no": "FT00010"
    },
    {
        "name": "张大锤",
        "no": "FT00011"
    },
    {
        "name": "王大锤",
        "no": "FT00012"
    },
    {
        "name": "冯大锤",
        "no": "FT00013"
    },
    {
        "name": "李大锤",
        "no": "FT00014"
    },
    {
        "name": "邓大锤",
        "no": "FT00015"
    },
    {
        "name": "孙大锤",
        "no": "FT00016"
    },
    {
        "name": "袁大锤",
        "no": "FT00017"
    },
    {
        "name": "康大锤",
        "no": "FT00018"
    },
    {
        "name": "武大锤",
        "no": "FT00019"
    },
    {
        "name": "蔡大锤",
        "no": "FT00020"
    },
    {
        "name": "戴大锤",
        "no": "FT00021"
    },
    {
        "name": "鄂大锤",
        "no": "FT00022"
    },
    {
        "name": "封大锤",
        "no": "FT00023"
    },
    {
        "name": "盖大锤",
        "no": "FT00024"
    },
    {
        "name": "景大锤",
        "no": "FT00025"
    },
    {
        "name": "麻大锤",
        "no": "FT00026"
    },
    {
        "name": "那大锤",
        "no": "FT00027"
    }
]

到此这篇关于JS实现拼音(字母)匹配汉字(姓名)的示例代码的文章就介绍到这了,更多相关JS拼音匹配汉字内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JS实现拼音(字母)匹配汉字(姓名)的示例代码

本文链接: https://www.lsjlt.com/news/211611.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

JS实现拼音(字母)匹配汉字(姓名)的示例代码

目录1. 首先说下功能2. 安装3. 引入4. API5. 简单使用测试示例6. 具体案例这就是个模糊查询，我们平常做的都是直接输入汉字去把对应的值过滤出来，但我还真是第...

99+

2023-05-18

JS实现拼音匹配汉字 JS拼音匹配汉字 JS 拼音汉字
C#实现汉字转汉语拼音的示例代码

目录一、使用PinYinConverterCore获取汉语拼音二、编写工具扩展类实现获取汉字的拼音三、编写测试用例一、使用PinYinConverterCore获取汉语拼音最新在做...

99+

2022-11-13
C# 汉字与拼音互转的实现示例

这个功能，大家也都可以去百度以下，千篇一律都自己写的（抄的）封装好的公共类，此处还是得膜拜下原创的大佬，可以花时间去搞这个，我看着都头皮发麻。对于一个有代码洁癖的码农来说，我并不喜...

99+

2022-11-13
Java实现字符串匹配的示例代码

目录java实现字符串匹配暴力匹配KMP算法java实现字符串匹配暴力匹配 private static int violence(String str1, String str...

99+

2022-11-13
Android实现字母导航控件的示例代码

目录自定义属性Measure测量坐标计算绘制Touch事件处理数据组装显示效果今天分享一个以前实现的通讯录字母导航控件，下面自定义一个类似通讯录的字母导航 View，可以知道需要自定...

99+

2022-11-13
python实现字母闪烁效果的示例代码

目录1. 介绍2. 完整代码效果图 1. 介绍屏幕上随机闪烁的代码块，一定能满足我们对于电影中黑客的一丝丝设想，这次，让我们用简简单单的30行python代码，实现这个效果。前...

99+

2022-11-11
Vue+better-scroll实现通讯录字母索引的示例代码

目录环境准备：实现步骤：数据结构基本HTML使用better-scroll实现内容区列表的滚动给索引添加点击事件和移动事件实现跳转给索引添加高亮全部代码总结参考文献如图，实现一个滚动...

99+

2022-11-13