前端在列表搜索功能中，经常遇到有很多属性的列表，属性的内容可能还有汉字，精准匹配太局限了，搜索条件需要很精准。

通过正则表达式进行模糊匹配

//input为输入的搜索内容
//生成input正则表达式进行模糊匹配
let inputArr = input.split("");
let str = "(.*?)";//正则条件
let regStr = str + inputArr.join(str) + str;
let reg = RegExp(regStr, "i"); // 以12为例生成的正则表达式为/(.*?)1(.*?)2(.*?)/i
//reg为生成的正则表达式

利用 pinyin 进行汉字转字符串

pinyin的下载

npm install pinyin@alpha --save

 引用和使用

import pinyin from 'pinyin'


//将拼音转成字符串数组
let valuePyArr = pinyin("拼音测试",{style:"normal"});
//{style:"normal"}参数将生成的拼音改为不带声调的（默认带声调）
//结果为 [ ["pin"], ["yin"], ["ce"], ["shi"] ]

//将字符串数组转成字符串
let valuePy = valuePyArr.join("");
//结果为 "pinyinceshi"

筛选数组逻辑

this.problems.filter((problem) => {
    //keys方法获取对象可迭代属性，some方法进行存在性匹配
    return Object.keys(problem).some((key) => {
        return 判断条件
    });
});

完整代码 

searchedProblems是vue的计算属性

searchedProblems() {
      var input = this.searchValue;  //searchValue为input中的v-model参数
      if (input) {
        //生成input正则表达式进行模糊匹配
        let inputArr = input.split("");
        let str = "(.*?)";//正则条件
        let regStr = str + inputArr.join(str) + str;
        // 以12为例生成的正则表达式为/(.*?)1(.*?)2(.*?)/i
        let reg = RegExp(regStr, "i"); 
        //过滤数组
        return this.problems.filter((data) => {
          //keys获取数组可迭代属性，some方法遍历所有属性进行存在验证
          return Object.keys(data).some((key) => {
            //将汉字属性转换成字符串数组
            let dataPyArr = pinyin(data[key],{style:"normal"});
            //将字符串数组转成字符串
            let dataPy = dataPyArr.join('')
            //搜索内容和每个value值 匹配
            return reg.test(dataPy)
          });
        });
      }
      return this.problems;
    }