摘要：項目需求是通過搜索關鍵字顯示符合搜索條件的用戶，搜索條件是用戶昵稱和用戶唯一號碼是一串數字，其中昵稱支持中文匹配和首字母拼音匹配。

項目需求是通過搜索關鍵字顯示符合搜索條件的用戶，搜索條件是用戶昵稱和用戶唯一號碼（是一串數字），其中昵稱支持中文匹配和首字母拼音匹配。
首先說說自己的想法：
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 網上找吧！