侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

Java  /  管理员 发布于 5年前   416

最近受我的朋友委托用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"里含了哪些字,并能列出有哪些。


(唉,写文章头都写昏了。。。)

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



  • 上一条:
    JavaScript常用验证脚本总结
    下一条:
    一站式 Java Web 框架 firefly
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 在java中实现的脱敏工具类代码示例分享(0个评论)
    • zookeeper安装流程步骤(0个评论)
    • 在java中你背的“八股文”可能已经过时了(2个评论)
    • 在php8.0+版本中使用属性来增加值代码示例(3个评论)
    • java 正则表达式基础,实例学习资料收集大全 原创(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-11
    • 2018-03
    • 2020-03
    • 2023-05
    • 2023-11
    • 2024-01
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客