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 相关文章推荐
js不是基础的基础
Dec 24 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
vue-cli3全面配置详解
Nov 14 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
我的论坛源代码(九)
2006/10/09 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
Python 合并拼接字符串的方法
2020/07/28 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
中间件分为哪几类
2012/03/14 面试题
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python