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 相关文章推荐
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
Seajs源码详解分析
Apr 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
PHP入门速成(2)
2006/10/09 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
玩转方法:call和apply
2014/05/08 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
python网络编程学习笔记(四):域名系统
2014/06/09 Python
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
python学生信息管理系统实现代码
2019/12/17 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
几道PHP面试题
2013/04/14 面试题
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
综合测评个人总结
2015/03/03 职场文书
公司地址变更通知
2015/04/25 职场文书
九年级数学教学反思
2016/02/17 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
基于python实现银行管理系统
2021/04/20 Python
Python字典和列表性能之间的比较
2021/06/07 Python
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android