Javascript模糊查找 | 第一章 循环不能不重视

2019独角兽企业重金招聘Python工程师标准>>>

最近受我的朋友委托用js+HTML做一个像手册一样的程序，里面要有可展开的大纲，模糊查找等功能。我这个人说实在的懒，本来是不愿意的，但想起了父亲以前教我要给朋友搞好关系，再加上这也可以巩固自己的js技术，于是就开始开发这个程序，没想到却出了点小问题，我做的查找只能绝对查找。具体的js代码如下：

function search(){  
    var arr=new Array("my name","my father name","my brother name","my mother name","my friend name","Bula Bula");  
    var searchfont=document.getElementById('search').value;  
  
    isCon(arr, searchfont);  
  
    if(searchfont!="my name" && searchfont!="my father name" && searchfont!="my brother name" && searchfont!="my mother name" && searchfont!="my friend name" && searchfont!="Bula Bula"){  
        alert('Not found.');  
    }  
}  
  
function isCon(arr, val){  
    for(var i=0; i<arr.length; i++){  
        if(arr[i] == val){  
            if(i==0){  
                alert('ture.');  
            }else if(i==1){  
                alert('ture.');  
            }else if(i==2){  
                alert('ture.');  
            }else if(i==3){  
                alert('ture.');  
            }else if(i==4){  
                alert('ture.');  
            }else if(i==5){  
                alert('ture.');  
            }  
        }  
    }  
}  
/*这个是我做了修改的代码。如果你在html里加入这几行代码: 
<input type="text" id="search" value="" /> 
<input type="button" onclick="search()" value="查找" /> 
就可以做绝对查找了。感兴趣的朋友可以试试看。*/

虽然我把查找功能做出来了，但这是绝对查找，可不行呀，不光是连答应下来的任务没有完成，还证明了自己技术不过关，于是我开始研究。终于工夫不负有心人，我耗尽了3天的研究时间，终于把这个环节给弄出来了。

 

 

接下来我便要开始讲解代码了。

首先来看：

var vData= ["name", "sex", "age", "job", "e-mail"];

 这个环节很重要，如果程序运行起来，输入查找时，就是在这里开始查找，改了里面的值也就等于改了搜索出的结果。（说到运行，我不得不感到庆幸，因为js运行是不用编译的，而C/C++就要。但有时不编译也会带来麻烦，比如运行不成功，不知道哪里有错，总之个有长处短处）。

 

再看代码：

function find(sFind, sObj)  
{  
    var nSize = sFind.length;  
    var nLen = sObj.length;  
  
    var sCompare;  
  
    if(nSize <= nLen ){  
        for(var i = 0; i <= nLen - nSize + 1; i++){  
            sCompare = sObj.substring(i, i + nSize);  
            if(sCompare == sFind){  
                return i;  
            }  
        }  
    }  
  
    return -1;  
}

这串代码就是核心所在（这个函数是在另一段代码中调用），最令我感到满意的要属巧妙的运用了循环！！首先我取了两个参数的长度，为后面做循环做好铺垫。接下来就是循环出场的时候。

首先，看看这个循环到底怎么回事。我把取出来的参数的长度相减再加1，那么这个循环怎么理解呢？它有什么决定性的作用呢？我给大家举个列子，大家就明白了：

 

假设将一段文字wertyuik放入前面我提到的数组中的一个元素中，现在要在数组中查ty这几个字，那么前面两组文字的长度相减加1后为7，那要循环7次。如果数组一开始循环，下标是0，变量i也是0，sCompare的就取下标0和下标2（ty长度为2，i的值为0，相加为2）之间的值（xxx.substring用于去两个值之间的值），那么那么示意图可以画为：(^是下标指向的位置，i等于多少下标就取向那里； ^为 i + nSize的位置)

 

w e r t y u i k

^    ^

 

这样一来sObj.substring取值的就是we（不算r那位，但要算w那位），然后把取来的给sCompare这个变量，让if()...语句来判断她是否等于sFind（也就是ty这两个字符），不等于就继续循环，一直到等于sFind为止，就返回变量i。

 

那我给的字符wertyuik中循环4次后就能找出要找的ty两个字符，具体的4次是怎样的过程呢？我们来看下面的示意图：(^是下标指向的位置，i等于多少下标就取向那里；^为 i + nSize的位置)

 

第一次：

w e r t y u i k

^    ^

（^指向w， ^指向we）

 

第二次：

w e r t y u i k

   ^   ^

（^指向e， ^指向t，取e r）

 

第三次：

w e r t y u i k

      ^  ^

（^指向e， ^指向y，取rt）

 

第四次：

w e r t y u i k

        ^   ^

（^指向t， ^指向u，取ty）

找到，返回i。

 

这样一个过程就完成了。

 

接下来的代码我不解释了，下次再写。

后面的调用函数代码如下：

function findEach()  
{  
    var sFind = document.getElementById("input").value;  
    if(sFind==""){  
        alert("Can not be empty.");  
    }  
  
    if(sFind!=""){        
        var nPos;  
        var vResult = [];  
          
        //for(var i = 0; i <= vData.length; i++){  
        for(var i in vData){  
            var sTxt=vData[i]||'';  
            nPos = find(sFind, sTxt);  
            //nPos=sTxt.indexOf(sFind);  
            if(nPos>=0){  
                vResult[vResult.length] = sTxt;  
            }  
        }  
  
        alert(vResult);  
    }  
}

把上面的代码加上，补上html,就行了。html里加上的代码：

<input id="input" type="text" value="" />  
<input id="search" type="button" onclick="findEach()" value="Search" />

 然后你还可以做些查询提示，比如能查哪些词呀，使用说明呀。。。（我最喜欢能一目了然看清规则的程序）

这样一来就能查找"name", "sex", "age", "job", "e-mail"里含了哪些字，并能列出有哪些。

 

（唉，写文章头都写昏了。。。）

上面没解释的代码，就等到下次来给大家解释吧。尽情期待吧！

转载于:https://my.oschina.net/lushengfeng/blog/75193