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的类型简单说明
Sep 03 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
js函数调用常用方法详解
Dec 03 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
JavaScript中操作字符串小结
May 04 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
JavaScript静态的动态
2006/09/18 Javascript
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
JavaScript错误处理
2015/02/03 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
easyui validatebox验证
2016/04/29 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
微信小程序 五星评分的实现实例
2017/08/04 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
python中@contextmanager实例用法
2021/02/07 Python
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
学校学雷锋活动总结
2014/06/26 职场文书
监考失职检讨书
2015/01/26 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
Kubernetes控制节点的部署
2022/04/01 Servers
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers