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


Posted in Javascript onJuly 07, 2013

提到关键字搜索,首先联想到的无非就是使用一些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的灵活性,仍能发挥很大的潜力。

Javascript 相关文章推荐
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 #Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 #Javascript
JQuery表格内容过滤的实现方法
Jul 05 #Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 #Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 #Javascript
javascript实现跳转菜单的具体方法
Jul 05 #Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 #Javascript
You might like
php判断表是否存在的方法
2015/06/18 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
wxpython学习笔记(推荐查看)
2014/06/09 Python
Python contextlib模块使用示例
2015/02/18 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
Python os模块学习笔记
2015/06/21 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
Django开发中复选框用法示例
2018/03/20 Python
python实现日志按天分割
2019/07/22 Python
Python实现快速排序的方法详解
2019/10/25 Python
python中time库的实例使用方法
2019/10/31 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
12岁生日感言
2014/01/21 职场文书
护士自我评价
2014/02/01 职场文书
个人党性剖析材料
2014/02/03 职场文书
房产遗嘱范本
2015/08/06 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android