JS實現(xiàn)拼音(字母)匹配漢字(姓名)的示例代碼

更新時間：2023年04月27日 08:23:57 作者：會說法語的豬

這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)拼音(字母)匹配(搜索)漢字(姓名)的效果，文中的示例代碼講解詳細，感興趣的可以了解一下

這就是個模糊查詢，我們平常做的都是直接輸入漢字去把對應(yīng)的值過濾出來，但我還真是第一次通過拼音去查詢（當然不只是拼音，漢字也是可以的），以前還真沒注意這個。唉，這可咋搞，我怎么知道某個漢字（字符串）的拼音的首字母是什么呢？正當我愁眉苦臉的時候，哎，一個庫被我發(fā)現(xiàn)了，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) //查詢匹配拼音的數(shù)據(jù)。

只向外提供暴露了這么一個方法，這一個方法足夠我們使用了，也很方便

參數(shù)：

input {string} 目標字符串
keyword {string} 輸入的拼音或其他關(guān)鍵詞

Array | Boolen

5. 簡單使用測試示例

let test = '123曾經(jīng)滄海難為水除卻巫山不是云'
 
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('發(fā)', 'fa') // [0, 0]

6. 具體案例

就是平常的列表展示加模糊搜索。所用的人員列表測試數(shù)據(jù)都是下面這種格式，章末會把完整測試數(shù)據(jù)附上。

// 模擬后端返回的數(shù)據(jù)
export default [
  {
    name: '管理員',
    no: 'FT00000'
  },
  //...
]

其實很簡單的了，主要是實現(xiàn)拼音的搜索過濾的功能，所以我案例里面樣式也沒調(diào)，主要是功能

閑話不說了，直接上完整代碼，大家看下里面的邏輯都明白了，就這么一個組件：

<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: [], // 所有數(shù)據(jù)
      users: [] // 展示的數(shù)據(jù)
    }
  },
  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第二個參數(shù)是空字符串的話會匹配不到，返回false，這不符合我們的預(yù)期
      // 搜索框沒有值，我們要展示所有數(shù)據(jù)
      if(this.serchValue) {
        this.userListAll.forEach(user => {
          let matchIndexs = PinyinMatch.match(user.name, this.serchValue) // 如果匹配到返回 首尾的索引數(shù)組，如果匹配不到則返回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>

接下來看下效果：

接下來！我們可以把上面的示例再提高點兒難度，因為讓我想起了通訊錄，所以在展示的時候我們就像通訊錄那樣展示

首先將拿到的人員列表進行分組，根據(jù)什么分呢？就是根據(jù)字母，a、b、c...這樣，難道我們要把26個英文字母全都列出來嗎？當然這個也分需求，但如果是通訊錄的話，我們只需要百家姓中所有的拼音的首字母就可以了，也就是：abcdefghjklmnopqrstwxyz 這些。

在上面示例的基礎(chǔ)上進行修改，在拿到人員數(shù)據(jù)之后，先處理一下，然后再進行過濾模糊查詢

完整代碼：

<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: [], // 所有數(shù)據(jù)
      users: [] // 展示的數(shù)據(jù)
    }
  },
  watch: {
    serchValue() {
      this.debounce(this.selectUser, 200)
    }
  },
  mounted(){
    this.getUserList()
  },
  methods:{
    // 模擬請求
    getUserList() {
      setTimeout(() => {
        this.userListAll = this.handlerData(userList)
        this.selectUser()
      }, 100)
    },
    // 處理數(shù)據(jù)
    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>

最后看下修改后的效果：

接下來是上面測試用的數(shù)據(jù)

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"
    }
]

到此這篇關(guān)于JS實現(xiàn)拼音(字母)匹配漢字(姓名)的示例代碼的文章就介紹到這了,更多相關(guān)JS拼音匹配漢字內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: