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 相关文章推荐
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
javascript中数组方法汇总
Jul 07 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
Postman参数化实现过程及原理解析
Aug 13 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
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
php动态绑定变量的用法
2015/06/16 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
微信小程序实时聊天WebSocket
2018/07/05 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
python变量的存储原理详解
2019/07/10 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
用Python实现职工信息管理系统
2020/12/30 Python
五十岁生日宴会答谢词
2014/01/15 职场文书
教师产假请假条
2014/04/10 职场文书
初三学习计划书范文
2014/04/30 职场文书
留学经费担保书
2014/05/12 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS