前端本地模糊搜索並高亮

項目需求是經過搜索關鍵字顯示符合搜索條件的用戶，搜索條件是用戶暱稱和用戶惟一號碼（是一串數字），其中暱稱支持中文匹配和首字母拼音匹配。
首先說說本身的想法：
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,`<span style="color:red">${rex.exec(keyWord)}</span>`)
             }else if((item.spelling+"").match(reg)){//簡拼匹配成功時
                 var index = getStartIndex(val.trim(),item.spelling)-1
                 for(let j = 0;j<val.trim().length;j++){
                    index += 1
                    showContent += item.name[index]
                 } 
                 item.name = keyWord.replace(showContent,`<span style="color:red">${showContent}</span>`)
                     
             }else if(item.id +"").match(reg)){
                 item.id = keyId.replace(rex, `<span style="color:red">${content}</span>`)
             }
             arr1.push(item)             
         }
    })
 至於爲何要先判斷匹配上用戶名在判斷匹配id 是由於產品的需求問題，以後拿到arr1就能夠渲染頁面；
  
6.總結
    個人代碼是封裝了一個方法的由於個人項目還有其餘需求比較麻煩好比按產品規則排序什麼還有其餘比較多又雜，就不貼出個人代碼了，我寫這些主要是提供一個思路，我主要是想記錄兩個方法，一個是深拷貝數組和獲取匹配開始的index的方法。還有全拼+簡拼匹配什麼的 之後有時間來實現吧 單純想了一下感受很麻煩，另外轉拼音的js 網上找吧！