js前端實現模糊查詢

對於模糊查詢，通常都是傳關鍵字給後端，由後端來作。可是有時候一些輕量級的列表前端來作能夠減小ajax請求，在必定程度上提升用戶體驗。廢話很少說，直接上代碼。

//字符串方法indexOf
var len = list.length;
var arr = [];
for(var i=0;i<len;i++){
    //若是字符串中不包含目標字符會返回-1
    if(list[i].indexOf(keyWord)>=0){
        arr.push(list[i]);
    }
}
return arr;

//正則表達式
var len = list.length;
var arr = [];
var reg = new RegExp(keyWord);
for(var i=0;i<len;i++){
    //若是字符串中不包含目標字符會返回-1
    if(list[i].match(reg)){
        arr.push(list[i]);
    }
}
return arr;

首先要明白什麼是模糊查詢（廢話又來了），就是根據關鍵字把列表中符合關鍵字的羅列出來（固然這裏只作了最簡單的），也就是要檢查列表的每一項中是否含有關鍵字，所以抽象一下就是一個字符串中是否含有某個字符或者字符串。

有了思路，接下來就是去實現了，用什麼方法呢，學js的基本數據類型時咱們會發現String有不少方法，其中有個方法string.indexOf('');這個方法是找出字符串中某個字符的位置，而若是沒有目標字符會返回-1。因此咱們能夠用這個方法去檢查列表中每一項是否含有關鍵字。接下來就是很強大的RegExp，正則表達式去匹配字符串的目標字符，這裏用了match方法，匹配不到返回空，固然其餘幾個方法也有實現方式，此處再也不羅列。

最後，demo地址：https://github.com/Stevenzwzhai/plugs,歡迎你們一塊兒來寫插件，純原生js實現，star一下最好了！