前端本地模糊搜索并高亮

摘要：项目需求是通过搜索关键字显示符合搜索条件的用户，搜索条件是用户昵称和用户唯一号码是一串数字，其中昵称支持中文匹配和首字母拼音匹配。

项目需求是通过搜索关键字显示符合搜索条件的用户，搜索条件是用户昵称和用户唯一号码（是一串数字），其中昵称支持中文匹配和首字母拼音匹配。
首先说说自己的想法：
1.既然要支持拼音搜索那么必须要一个能把中文转化成拼音的东西（我是在网上找的大佬的代码，一般像这种js都是比较大的，。。。没有办法字符太多）
2.搜索内容符合昵称和唯一号需要分开判断
开始：
假如本地数组是arr1 [
    {
        name:"张三",
        id:0001
        ....
    },
    {
        name:"李四",
        id:0002
        ....
    },
    {
        name:"王五",
        id:0003
        ....
    }
    ...
]
1.因为是使用本地搜索（这里是一个数组对象），并且要高亮必然要涉及到修改字段，这里提供一个深克隆数组的方法
    var deepCopy = function(o){
        if (o instanceof Array) {
            var n = [];
            for (var i = 0; i < o.length; ++i) {
                n[i] = deepCopy(o[i]);
            }
            return n;

        } else if (o instanceof Object) {
            var n = {}
            for (var i in o) {
                n[i] = deepCopy(o[i]);
            }
            return n;
        } else {
            return o;
        }
    }
2.需要使用转拼音的js为 arr中每一项添加一个保存对应简拼的字段，我这里叫spelling,我这里全部转为大写，
  此时arr应该是这个样子 [
    {
        name:"张三",
        id:0001,
        spelling:"ZS"
        ....
    },
    {
        name:"李四",
        id:0002,
        spelling:"LS"
        ....
    },
    {
        name:"王五",
        id:0003,
        spelling:"WW"
        ....
    }
    ...
]
3.全局声明一个数组 var arr1 = []用来保存匹配项
4.这里提供一个获取匹配内容开始的位置的方法  只返回第一次匹配上的位置      
    var getStartIndex = function(val,inputStr){
        var result
        var reg1=new RegExp(val,"ig");
        reg1.lastIndex=0;
        if((result = reg1.exec(inputStr)) != null){
            var lIndex=reg1.lastIndex-result[0].length;    
            return lIndex
        }
    }
    例子：在ABCD中匹配 a或者A getStartIndex("a","ABCD")//0；getStartIndex("aB","ABCD")//0;getStartIndex("c","ABCD")//2
5.利用正则匹配输入内容和要比对的字段
    var newArr = deepCopy (arr)//深拷贝本地数组       
    var reg = new RegExp(val.trim().toUpperCase())//val是你输入的内容
    newArr .map(function(item){
         if(item.name.match(reg)||(item.id+"").match(reg)||(item.spelling).match(reg)){
             //这里姓名id简拼任何一项匹配成功就将此项加入到arr1中
             var keyWord = (item.name).replace(/[s]+/g," ")//name字段去掉空格
             var keyId = (item.id+"").replace(/[s]+/g," ");//id字段去掉空格
             var rex = new RegExp(val.trim(),"i");
             if(item.name.match(reg)){//中文匹配成功的情况直接将输入内容替换成一个span标签包住并给个红色
                 item.name = keyWord.replace(rex,`${rex.exec(keyWord)}`)
             }else if((item.spelling+"").match(reg)){//简拼匹配成功时
                 var index = getStartIndex(val.trim(),item.spelling)-1
                 for(let j = 0;j${showContent}`)
                     
             }else if(item.id +"").match(reg)){
                 item.id = keyId.replace(rex, `${content}`)
             }
             arr1.push(item)             
         }
    })
 至于为什么要先判断匹配上用户名在判断匹配id 是因为产品的需求问题，之后拿到arr1就可以渲染页面；
  
6.总结
    我的代码是封装了一个方法的因为我的项目还有其他需求比较麻烦比如按产品规则排序什么还有其他比较多又杂，就不贴出我的代码了，我写这些主要是提供一个思路，我主要是想记录两个方法，一个是深拷贝数组和获取匹配开始的index的方法。还有全拼+简拼匹配什么的 以后有时间来实现吧 单纯想了一下感觉很麻烦，另外转拼音的js 网上找吧！