javascript下利用数组缓存正则表达式的实现方法
2009-12-26 00:00
931 查看
如果能用字面量创建正则就最好不过,显然有时我们不得不使用new RegExp()这种大消耗的创建方法,比如语法高亮与排版就大量用到正则表达式,要用到的patten越多,需要的时间就越长,火狐好像是12秒就发出警告,IE就直接假死。这时我们就需要利用组存大法要提高我们程序的性能了。
通常摆在我们眼前的如下两种选择来作为我们的容器,数组或对象。我这里选择前者,前者更轻量一点。下面我们就hasClass函数作性能改进。
原来的写法:
虽然简短,但做了太多假设了,因为元素有时是未必有className,这时直接返回false就行了。而且match是返回一个数组,和我们期望的布尔值多少有点出入(它在我以前的程序运行良好,完全拜javascript的自动转换所赐)。我们用search代替match:
Prototype.js的实现我比较满意,test方法在所有正则方法中是最轻量的(相反,exec是最重量,最慢,最强大):
到现在为止,基于正则方法的挖掘可谓改无可改,我们祭出缓存大法:
如果这个正则以前创建过,就有以前的,没有再创建,因此在大量匹配的算法中非常有优势。放入闭包中是为了防止命名冲突,谁会料到后面会不会杀出一个同名的全局变量c来?!使用和原来的一样,因为我们是通过window来引用它。
(function(){
var c=[];
window.hasClass=function(el, cls){
if(!c[cls]){c[cls]=new RegExp("(^|\\s)"+cls+"($|\\s)");}
return !!el.className && c[cls].test(el.className);
}
})();
window.onload = function(){
var div1 = document.getElementById("test1");
var div2 = document.getElementById("test2");
alert(hasClass(div1,"test1"))
alert(hasClass(div2,"dd"))
}
测试
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
注意如果是代替上面的test2的内容
<img src="http://www.jb51.net/images/logo.gif" alt="mm2" id="test2" class="dd" draggable="true">将会是true。
通常摆在我们眼前的如下两种选择来作为我们的容器,数组或对象。我这里选择前者,前者更轻量一点。下面我们就hasClass函数作性能改进。
原来的写法:
var hasClass = function(ele,cls) { return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); }
虽然简短,但做了太多假设了,因为元素有时是未必有className,这时直接返回false就行了。而且match是返回一个数组,和我们期望的布尔值多少有点出入(它在我以前的程序运行良好,完全拜javascript的自动转换所赐)。我们用search代替match:
var hasClass = function(ele,cls) { return ele.className.search(new RegExp('(\\s|^)'+cls+'(\\s|$)') > -1); }
Prototype.js的实现我比较满意,test方法在所有正则方法中是最轻量的(相反,exec是最重量,最慢,最强大):
var hasClass = function(el, cls) { var classes = el.className; return (classes > 0) ? (classes == cls || new RegExp("(^|\\s)" + cls + "(\\s|$)").test(classes)) : false; }
到现在为止,基于正则方法的挖掘可谓改无可改,我们祭出缓存大法:
(function(){ var c={}; window.hasClass=function(el, cls){ if(!c[cls]){c[cls]=new RegExp("(^|\\s)"+cls+"($|\\s)");} return el.className && c[cls].test(el.className); } })();
如果这个正则以前创建过,就有以前的,没有再创建,因此在大量匹配的算法中非常有优势。放入闭包中是为了防止命名冲突,谁会料到后面会不会杀出一个同名的全局变量c来?!使用和原来的一样,因为我们是通过window来引用它。
(function(){
var c=[];
window.hasClass=function(el, cls){
if(!c[cls]){c[cls]=new RegExp("(^|\\s)"+cls+"($|\\s)");}
return !!el.className && c[cls].test(el.className);
}
})();
window.onload = function(){
var div1 = document.getElementById("test1");
var div2 = document.getElementById("test2");
alert(hasClass(div1,"test1"))
alert(hasClass(div2,"dd"))
}
测试
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
注意如果是代替上面的test2的内容
<img src="http://www.jb51.net/images/logo.gif" alt="mm2" id="test2" class="dd" draggable="true">将会是true。
相关文章推荐
- javascript下利用数组缓存正则表达式的实现方法
- 用JavaScript的正则表达式验证网址格式是否正确,方法很多,这只是一个实现的方法.
- Javascript url地址传参及获取参数方法(利用正则表达式)
- 笔记:JS利用正则表达式实现trim方法
- javascript中利用正则表达式实现表单验证
- Javascript url地址传参及获取参数的简单实用方法(利用正则表达式)
- @V@ java代码笔记2010-06-12:java控制台输入各类型类实现;以及判断输入字符串里面是否有数字的两种方法:方法1:转换成字符数组;方法2:正则表达式。
- 笔记:JS利用正则表达式实现去除Html标签方法
- 利用JavaScript中的正则表达式实现常用输入框的验证
- C#下利用正则表达式实现字符串搜索功能的方法(转)
- 利用数组缓存正则表达式
- 利用正则表达式实现字符串搜索
- C#中利用正则表达式实现字符串搜索
- JavaScript实现数组随机排序的方法
- javascript的replace方法与正则表达式结合应用
- C#中利用正则表达式实现字符串搜索
- JS中正负数的千位分隔符方法,利用正则表达式
- JavaWeb第三周-利用JS中正则表达式实现注册的信息验证。
- Java正则表达式判断邮箱地址数组,冒泡排序,String的方法
- JavaScript的replace方法与正则表达式结合应用讲解