zepto源码中的正则表达式

对于Zepto源码分析,可以说是每个前端修炼自己js技能的必经之路。
当然,在读源码过程中,比较难以理解的地方,就是里面出现的各种神奇的正则表达式。
本文主要分析对象是[email protected]的源码中的正则表达式

这篇文章,主要总结了zepto源码中使用到的一些正则表达式,分析每个正则使用场景

关于正则表达式学习,推荐一本不错的书,老姚 大神写的 JavaScript 正则表达式迷你书,戳里面的链接,可以下载pdf版,下面正则解释都可以从书中找到对应的位置,如果文中解释有误,也以书为准。引用书中强调的一句话。

正则表达式是匹配模式,要么匹配字符,要么匹配位置

1,fragmentRE = /^\s<(\w+|!)[ ^>]>/

看源码位置

匹配目标是否为html节点,比如" < html >, < script> 样的单个未闭合节点
可视化形式是:
zepto源码中的正则表达式_第1张图片

\s* ,贪婪匹配空白符 ,[^>] 表示:匹配到的"<" 和">"中间内容不能出现">",中间内容出现两个分支单词字符或者!,里面的()进行捕获分组,后面提取第一组的内容,下面代码中,则通过RegExp.$1 提取。

       fragmentRE.test("") && RegExp.$1;
       // "sccc"

2,singleTagRE = /^<(\w+)\s*/?>(?:|)$/

看源码位置

验证是否为单个闭合的html标签,形如 “< hr /> ,< script >< /script>”
可视化形式为:

singleTagRE

(\w+) 分组引用,使用了捕获分组的概念,Group #1(或者图中的capture 1) ,为第一组数据,所以作用在于 后面使用 \1提取前面对应的数据,后面还可以使用 $1,$2 捕获每组匹配的内容。

\s表示空白符,包括空格,水平制表符,垂直制表符,换行符,回车符,换页符。
* 表示任意次数出现,
\/?则表示 / 出现或者不出现

(?:<\/\1>|) 对应的是非捕获括号,只想要括号最原始的功能,但不会引用它,里面的 \1,是第一个分组(Group #1)的内容,主要为了验证这个标签是成对的,前后内容一致。后面|,则表示如果没有匹配到成对的内容也可以什么内容都没有 ,比如 匹配


这类标签。

singleTagRE.test("
")&&RegExp.$1 // "hr" singleTagRE.test("")&&RegExp.$1 // "script" singleTagRE.test("

你可能感兴趣的:(regexp,javascript,正则表达式,javascript正则)