zepto源碼中的正則表達式

dinfer 發布于2019-08-22 11:22 / 1432人閱讀

摘要：本文主要分析對象是的源碼中的正則表達式。表示空白符，包括空格，水平制表符，垂直制表符，換行符，回車符，換頁符。

對于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云服務器云服務器正則正則表達式正則匹配正則表達式 -正則表達式正則表達式?

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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