zepto源码中的正则表达式

dinfer 发布于2019-08-22 11:22 / 1394人阅读

摘要：本文主要分析对象是的源码中的正则表达式。表示空白符，包括空格，水平制表符，垂直制表符，换行符，回车符，换页符。

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

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

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

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

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

看源码位置

匹配目标是否为html节点，比如" < html >， < script> 样的单个未闭合节点
可视化形式是：

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

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

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

看源码位置

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

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

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

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

这类标签。

singleTagRE.test("")&&RegExp.$1
// "hr"
singleTagRE.test("")&&RegExp.$1
// "script"
singleTagRE.test("
最后面的，//ig: 两个修饰符 g:表示全局匹配， i表示忽略大小写。
然后再看 正则主体部分内容，"< " 和 "/ >"中间的内容大致可以分为两部分：


(?!area|br|col|embed|hr|img|input|link|meta|param)
上面大致可以简化成 (?!p)，也就是要匹配位置。
   要解释这个，首先要对应的提出(?=p)，p 是一个子模式，指代p前面的位置，也说明该位置后面的字符要匹配p.列举书中实例
  var result = "hello".replace(/(?=l)/g,"#");
  console.log(result);
  // => "he#l#lo"
相应的开头提到的 (?!p)就是反面意思
   var result = "hello".replace(/(?!l)/g,"#");
   console.log(result);
   // => "#h#ell#o#"

(?=p) 和 （?!p) 学名分别是 positive lookahead  和 negative lookahead.
 中文翻译分别是正向先行断言和负向先行断言
这里我们可以理解为 #后面的字符串不能匹配l，这里说的#,在原字符串"hello"中时不存在的，只是代表字符之间的各个位置，输出#h#ell#o#只是实例化匹配展示出来了对应的位置。
<右边不能是 area,br,col,embed,hr,img,input,link,meta,param,比如像 < img /> ，< br/> 这样就不需要转化了
  var tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([w:]+)[^>]*)/>/ig;
  "".replace(tagExpanderRE, "<$1>")
  // 输出 " "



(([w:]+)[^>]*)
这里使用了捕获分组，分了两组(([w:]+)[^>]*) 和 ([w:]+)，作用在于，replace的时候可以通过$1 和 $2 提取匹配到的数据。
([w:]+) 中 + 就是 {1，}的简写 ，表示w(数字，字母，下划线)或者 : 至少出现一次 通常是标签名，div,span 等等
(([w:]+)[^>]*)   多了 [^>]* 表示匹配>以外的任意内容，比如 < div class="div-class"> 中的 class="div-class"。可以这么理解，比 .*能够匹配所有内容多加了一个条件
var tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([w:]+)[^>]*)/>/ig;
"".replace(tagExpanderRE, "<$1>")
// 输出 ""



4，rootNodeRE = /^(?:body|html)$/i
看源码位置
通过检测节点的nodeName属性，判断是否为body或者html 根节点
可视化形式：

  var ootNodeRE = /^(?:body|html)$/i;
  var htmlDom = document.querySelector("html")
  rootNodeRE.test(htmlDom.nodeName);
  // 输出 true;
  var divDom = document.querySelector("div");
  rootNodeRE.test(htmlDom.nodeName);
  // 输出 false

GPU云服务器云服务器正则正则表达式正则匹配正则表达式 -正则表达式正则表达式?

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92284.html

读 Zepto 源码之内部方法

摘要：调用函数，判断返回的类型字符串，就知道是什么数据类型了判断是否为浏览器的对象要为对象首先要满足的条件是不能为或者，并且为自身的引用。必须存在中必须存在属性返回的值调用函数，返回的数据类型。数组方法定义 var emptyArray = [] concat = emptyArray.concat filter = emptyArray.filter slice...

Freelander 2019-08-20 15:42 评论0 收藏0
读 Zepto 源码之样式操作

摘要：方法也在读源码之内部方法有过分析。不太明白为什么要用全局变量来接收，用局部变量不是更好点吗保存当前类的字符串，使用函数获得。这是的依然是全局变量，但是接收的是当前元素的当前样式类字符串为什么不用局部变量呢。这篇依然是跟 dom 相关的方法，侧重点是操作样式的方法。读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto 源码版本本文阅读的源码为...

snowell 2019-08-21 11:43 评论0 收藏0
读 Zepto 源码之神奇的 $

摘要：返回值为，如果能查找到元素，则将元素以数组的形式返回，否则返回空数组排除不合法的。的第一个字符为，并且为标签。如果存在，则查找下选择器为的所有子元素。正则表达式为如果没有指定标签名，则获取标签名。包裹元素的即为所需要获取的。经过前面三章的铺垫，这篇终于写到了戏肉。在用 zepto 时，肯定离不开这个神奇的 $ 符号，这篇文章将会看看 zepto 是如何实现 $ 的。读Zepto源码...

xi4oh4o 2019-08-20 16:32 评论0 收藏0
zepto.js 源码剖析

摘要：正则首先看一下其中的正则表达的正则表达式要包含在中间。后面可以跟来表示是否进行全局匹配或者不区分大小写匹配。从句首开始匹配是一个，匹配一个空白字符，包括。正则首先看一下其中的正则表达: fragmentRE = /^s*]*>/, singleTagRE = /^(?:|)$/, tagExpanderRE = /]*)/>/ig, rootNodeRE = /^(?:body|h...

winterdawn 2019-08-19 17:45 评论0 收藏0
读Zepto源码之Gesture模块

摘要：模块基于上的事件的封装，利用属性，封装出系列事件。这个判断需要引入设备侦测模块。然后是监测事件，根据这三个事件，可以组合出和事件。其中变量对象和模块中的对象的作用差不多，可以先看看读源码之模块对模块的分析。 Gesture 模块基于 IOS 上的 Gesture 事件的封装，利用 scale 属性，封装出 pinch 系列事件。读 Zepto 源码系列文章已经放到了github上，欢...

coolpail 2019-08-21 16:43 评论0 收藏0