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脚本函数库 方便开发
Oct 13 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
vue制作toast组件npm包示例代码
Oct 29 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 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获取网络文件的实现代码
2010/01/01 PHP
PHP 强制下载文件代码
2010/10/24 PHP
利用PHP实现短域名互转
2013/07/05 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
python3中zip()函数使用详解
2018/06/29 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
PHP经典面试题
2016/09/03 面试题
好的自荐信包括什么内容
2013/11/07 职场文书
诚信考试倡议书
2014/04/15 职场文书
新闻学专业求职信
2014/07/28 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书