jQuery源码中的chunker 正则过滤符分析


Posted in Javascript onJuly 31, 2012
var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,

这是Jq中最长的一个正则了,也研究了很久,一直很懵懂,感觉还是通过调试,然后一步一步的分析值理解起来比较容易,

我尝试做成图形比较直观一点,以不同的颜色区分了一下,如下图:

jQuery源码中的chunker 正则过滤符分析
分组一是通过以下代码逐一拆分成一个数组的:

// 此处循环的作用是拆分每个选择器到 parts 数组,比如div#id>p ul li 拆分成['div#id','>','p','ul','li'] 
while ( (chunker.exec(""), m = chunker.exec(soFar)) !== null ) { 
// soFar存储的是过滤了第一层后的选择符字符串,也就是图片上的分组三 
soFar = m[3]; 
//选择器块第一部分推入数组 
parts.push( m[1] ); 
// 如果拆分到了逗号的地方',',则前一组结束,跳出循环,到另外一组选择器了 
if ( m[2] ) { 
// 记录另外一组选择器 
extra = m[3]; 
break; 
} 
}

其它的比如ID,class之类的就好理解了
match: { 
// \u00c0-\uFFFF 匹配多个国家或名族的字母文字 
ID: /#((?:[\w\u00c0-\uFFFF-]|\\.)+)/, //如:#myId 
CLASS: /\.((?:[\w\u00c0-\uFFFF-]|\\.)+)/, // 如:.myClass 
NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF-]|\\.)+)['"]*\]/, //如:[name="myName"] 
ATTR: /\[\s*((?:[\w\u00c0-\uFFFF-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/, //如:[attribute="value"] 
TAG: /^((?:[\w\u00c0-\uFFFF\*-]|\\.)+)/, //如:div p a 
CHILD: /:(only|nth|last|first)-child(?:\((even|odd|[\dn+-]*)\))?/, //如::first-child or :nth-child(5n+1) 
POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)/, //如::nth(3) span 
PSEUDO: /:((?:[\w\u00c0-\uFFFF-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/ // :jlkj\kjl('kl(kklk)kl') 
}

未完待续……
Javascript 相关文章推荐
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
vue数据初始化initState的实例详解
Apr 11 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 #Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 #Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 #Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 #Javascript
jQuery.each()用法分享
Jul 31 #Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 #Javascript
JavaScript中的私有/静态属性介绍
Jul 26 #Javascript
You might like
3
2006/10/09 PHP
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
opencv 阈值分割的具体使用
2020/07/08 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
经典大学生求职信范文
2014/01/06 职场文书
红领巾心向党广播稿
2014/01/19 职场文书
网吧消防安全制度
2014/01/28 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
决心书范文
2014/03/11 职场文书
联欢晚会主持词
2014/03/25 职场文书
股东合作协议书
2014/09/12 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
养成教育工作总结
2015/08/13 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
windows server2008 开启端口的实现方法
2022/06/25 Servers