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的灵活性,仍能发挥很大的潜力。

时间: 2024-10-27 02:04:40

JavaScript 上万关键字瞬间匹配实现代码的相关文章

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

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

js实现搜索框关键字智能匹配代码_javascript技巧

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

jQuery实现搜索关键字自动匹配提示方法

在现在的Web设计中,提高用户体验是企业最为注重的内容之一.在搜索表单中,根据输入的部分内容进行关键字匹配提示功能,就是最直观和常用的交互体验,类似功能已经被多数的互联网网站应用.例如Google的搜索框效果如下: 这里介绍一个jQuery实现搜索关键字自动匹配提示方法.jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用:兼容IE 6.0+, FF 2+, Safari 2.0+, Opera

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

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

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

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

jQuery实现搜索关键字自动匹配的例子

例子一, 在项目中,有时候需要用户选择城市,但是城市太多,用户选择起来不太方便,所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写.结果示意图如下:    当输入拼音后结果示意图如下:   实现代码如下: <html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "utf-8" ><script type="text/j

javascript正则表达式之regexp,匹配string,正则指定字符

exec() 检索字符串中的指定值,返回值是被找到的值,如果没有发现匹配,则返回 null: 主要的RegExp模式匹配方法是exec(),其与上一篇介绍的String对象的match方法相似,只不过它是以字符串为参数的RegExp方法,而不是以RegExp对象为参数的字符串方法.呼,这一句有点像绕口令,没办法,书上的原话,抄过来让大家乐一乐,呵.exec()方法在一个字符串中检索匹配,如果没有找到任何匹配返回null,如果它找到了一个匹配,将返回一个数组. 就像方法match()为非全局检索返

javascript的列表切换【实现代码】_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正则表达式各种链接匹配问题总结

匹配源代码中的链接 能够匹配HTML代码中链接的正则. 原帖正则: /<a href=".+?">.+?</a>/g 感觉有点严格,首先要<a href="".+?">有,而且href属性可以是一个或者多个除换行外任意字符(非贪婪).后面是.+?</a>,一个或者多个除换行外任意字符(非贪婪),再加上结束标签. 有个问题,如果a的起始标签最后有空格,或者除了href还有其它属性的话,上面的正则就不能匹配这个链