直播平臺開發，基礎搜尋方式之拼音搜尋

云豹科技-苏凌霄發表於2024-08-10

直播平臺開發，基礎搜尋方式之拼音搜尋

核心思想：

先獲取的漢字的拼音，然後對其進行匹配
獲取漢字的拼音我這裡使用的是pinyin；
簡單介說一下pinyin包的用法

import py from "pinyin";
py("中心"); // [ [ 'zhōng' ], [ 'xīn' ] ]  預設是帶聲調的
py("中心", {
  heteronym: true               // 配置一些設定項，啟用多音字模式
});                            // [ [ 'zhōng', 'zhòng' ], [ 'xīn' ] ]

實現

// 其餘程式碼同上
import py from "pinyin";
mounted() {
    this.allMsg = [
      { name: "薛之謙", id: 1 },
      { name: "霍建華", id: 2 },
      { name: "蔡徐坤", id: 3 },
      { name: "胡歌", id: 4 },
      { name: "胡說", id: 5 }
    ];
    this.filterMsg = this.allMsg;
  },
methods: {
  handleSearch(queryString) {
    let queryStringArr = queryString.split("");
    let str = "(.*?)";
    let regStr = str + queryStringArr.join(str) + str;
    let reg = RegExp(regStr, "i");
    this.filterMsg = [];
    console.log(reg);
    this.allMsg.map(item => {
      // 獲取漢字的拼音，並進行扁平化
      let pyArr = py(item.name, {
        style: py.STYLE_NORMAL // 設定拼音風格設定為普通風格（不帶聲調），
      }).flat();
      let pyStr = pyArr.join("");
      if (reg.test(pyStr)) {
        this.filterMsg.push(item);
      }
    });
  }
}

以上就是直播平臺開發，基礎搜尋方式之拼音搜尋， 更多內容歡迎關注之後的文章

相關文章