JavaScript 上万关键字瞬间匹配实现代码

提到关键字搜索,首先联想到的无非就是使用一些indexOf,replace之类的字符函数,最多加上一些正则表达式而已.实现起来虽然很简单,但是这背后的效率问题可曾仔细考虑过?例如论坛中的关键字过滤,一般情况下需过滤的关键字数量及检测的文本长度都不大,所以这一瞬间的过程没有太多值得关注的地方。但若关键字数量不在是屈指可数,而是有成千上万, 并且待检测的文本也是一长篇大论,结果可不再是那么乐观了。大家都知道,每多一个关键字,就要增加一次全文的检索,最终花费的时间将远远超出可接受的范围内。
  
  既然考虑的是那种极端的关键字搜索,通常的逐个遍历搜索显然是行不通的。如今用的是JavaScript,若不使用Hash表实在是太对不起这门语言了。有着对表特天独厚的支持,不妨就拿出少量的空间来换取大量的时间吧。
  
  先看个例子,比如有如下的关键字: foo1,foo2,bar1,bar2,既然要用空间换时间,因此搜索之前先将他们预处理。前面提到了JS灵活又高效的表,显而易见,使用树的结构是最有优势的。即使不明白,也没关系,最终实现结构正如如下的代码,熟悉JSON同样很亲切:


代码如下:

var Root =
{
    f:
    {
        o:
        {
            o:
            {
: true,
: true
            }
        }
    },
    b:
    {
        a:
        {
             r:
            {
: true,
: true
            }
        }
    }
};

这一层层的结构正如一棵树,每个字符便是树的一个分枝,到了最后一个字符便是树叶,不再有新的节点。
  此时你应该明白了,只要对文章的每个字沿着这棵树往下搜就是了。能到达树叶的,就说明当前字符就是关键字的一个;中途寻找不到对应枝干的,当然就不是关键字。

  例如foo1,顺着Root结构向下访问,最终到达Root['f']['o']['o']['1'],即完成了一次匹配。之后跳过foo1的长度,继续往后检索。

  因此,整篇文章只需一次检索,即可找出每个关键字的位置。
  由于JS的hash表性能非常高,所以所谓的寻找枝干也就非常的快了。因为JS的灵活性,实现此效果的代码同样很简短。
  
  事实上可以发现,关键字的数量与搜索的时间并没太多的关系,那仅仅影响了树的宽度而已,只有文章的长度才是决定搜索的时间。
  
  来一次极限测试:
  关键字: 成语全集(19830条)
  内容:诛仙全集.txt (1659219字)
  用时:935ms
  (Chrome26 / i3-2312的CPU)
160万字的文章,匹配2万个关键字,还不到1秒的时间。可见,充分利用JavaScript的灵活性,仍能发挥很大的潜力。

(0)

相关推荐

  • JavaScript 上万关键字瞬间匹配实现代码

    提到关键字搜索,首先联想到的无非就是使用一些indexOf,replace之类的字符函数,最多加上一些正则表达式而已.实现起来虽然很简单,但是这背后的效率问题可曾仔细考虑过?例如论坛中的关键字过滤,一般情况下需过滤的关键字数量及检测的文本长度都不大,所以这一瞬间的过程没有太多值得关注的地方.但若关键字数量不在是屈指可数,而是有成千上万, 并且待检测的文本也是一长篇大论,结果可不再是那么乐观了.大家都知道,每多一个关键字,就要增加一次全文的检索,最终花费的时间将远远超出可接受的范围内. 既然考虑的

  • js实现搜索框关键字智能匹配代码

    只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据. 效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co

  • JavaScript实现邮箱地址自动匹配功能代码

    自动匹配技术:简单的来说就是"根据用户输入的信息来提示一些相似项供用户选择".具有很广泛的应用,比如我们最常用的百度,当输入一些搜索内容后会自动匹配很多相关信息:再比如我们最常用的输入法,都是使用这种技术,当然这些都比较难了.下面这个例子是比较简单的我们常用邮箱的匹配.代码如下: 1.css代码 #match_email { margin-left:48px; overflow:auto; display:none; width:200px; border:1px solid #aaa

  • 基于jQuery实现搜索关键字自动匹配功能

    今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子,希望文章能够对各位有帮助. 例子一 在项目中,有时候需要用户选择城市,但是城市太多,用户选择起来不太方便,所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写.结果示意图如下: 当输入拼音后结果示意图如下: 实现代码如下: <html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "ut

  • Jquery插件仿百度搜索关键字自动匹配功能

    本文实例为大家分享了Jquery搜索关键字自动匹配功能的实现代码,供大家参考,具体内容如下 jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用:兼容IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ 等主流浏览器. 下面是具体的使用方法: 1.使用设置 首页,要把插件的js代码嵌入到你自己的项目中去. 复制代码 代码如下: <scr

  • 扩展 Entity Framework支持复杂的过滤条件(多个关键字模糊匹配)

    之前遇到一个棘手的Linq to EF查询的技术问题,现有产品表Product,需要根据多个关键字模糊匹配产品名称, 现将解决方案分享出来. 问题描述 根据需求,我们需要编写如下的SQL语句来查询产品 复制代码 代码如下: select * from dbo.Product where (ProductName like 'Product1%' or ProductName like 'Product2%') 如何将以上的SQL语句转换成EF的写法呢? 方案一 可以使用Union,将以上SQL语

  • JavaScript 过滤关键字

    效果图: 话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> em { font-size: 16px; color: red; } </style> </head> <body> <p i

  • JavaScript保留关键字汇总

    JavaScript 标准 所有的现代浏览器已经完全支持 ES5(ECMAScript 5). JavaScript 保留关键字(keyword) Javascript 的保留关键字(标识符)不可以用作变量.标签或者函数名.有些保留关键字是作为 Javascript 以后扩展使用. abstract arguments boolean break byte case catch char class* const continue debugger default delete do doubl

  • javascript的列表切换【实现代码】

    IE兼容性没处理,确切的说不太会,还望指点一二 思路: 1.js获取要给定点击事件的按钮组对象,如btns=document.xxx(),遍历过程绑定事件之前先取得当前对象的下标eg:btns[i].index=i; 2.匹配index为将要显示的DOM对象 3.点击过程中要切换class,先判断是否含有指定class,有就删除,没有就添加指定class.注:if(!null)为真. 4.onmouseover同理 HTML <!DOCTYPE html> <html lang=&quo

  • JavaScript 正则表达式备忘单实例代码

    正则表达式或"regex"用于匹配字符串的各个部分 下面是我创建正则表达式的备忘单. 匹配正则 使用 .test() 方法 let testString = "My test string"; let testRegex = /string/; testRegex.test(testString); 匹配多个模式 使用操作符号 | const regex = /yes|no|maybe/;  忽略大小写 使用i标志表示忽略大小写 const caseInsensit

随机推荐