成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

zepto源碼中的正則表達(dá)式

dinfer / 1437人閱讀

摘要：本文主要分析對(duì)象是的源碼中的正則表達(dá)式。表示空白符，包括空格，水平制表符，垂直制表符，換行符，回車(chē)符，換頁(yè)符。

對(duì)于Zepto源碼分析，可以說(shuō)是每個(gè)前端修煉自己js技能的必經(jīng)之路。
當(dāng)然，在讀源碼過(guò)程中，比較難以理解的地方，就是里面出現(xiàn)的各種神奇的正則表達(dá)式。
本文主要分析對(duì)象是[email protected]的源碼中的正則表達(dá)式。

這篇文章，主要總結(jié)了zepto源碼中使用到的一些正則表達(dá)式，分析每個(gè)正則使用場(chǎng)景

關(guān)于正則表達(dá)式學(xué)習(xí)，推薦一本不錯(cuò)的書(shū)，老姚 大神寫(xiě)的 JavaScript 正則表達(dá)式迷你書(shū)，戳里面的鏈接，可以下載pdf版，下面正則解釋都可以從書(shū)中找到對(duì)應(yīng)的位置，如果文中解釋有誤，也以書(shū)為準(zhǔn)。引用書(shū)中強(qiáng)調(diào)的一句話。

正則表達(dá)式是匹配模式，要么匹配字符，要么匹配位置
1，fragmentRE = /^s<(w+|!)[ ^>]>/

看源碼位置

匹配目標(biāo)是否為html節(jié)點(diǎn)，比如" < html >， < script> 樣的單個(gè)未閉合節(jié)點(diǎn)
可視化形式是：

s* ,貪婪匹配空白符 ，[^>] 表示：匹配到的"<" 和">"中間內(nèi)容不能出現(xiàn)">"，中間內(nèi)容出現(xiàn)兩個(gè)分支單詞字符或者！，里面的()進(jìn)行捕獲分組，后面提取第一組的內(nèi)容，下面代碼中，則通過(guò)RegExp.$1 提取。

       fragmentRE.test("") && RegExp.$1;
       // "sccc"
2，singleTagRE = /^<(w+)s*/?>(?:|)$/

看源碼位置

驗(yàn)證是否為單個(gè)閉合的html標(biāo)簽，形如 “< hr /> ,< script >< /script>”
可視化形式為：

(w+) 分組引用，使用了捕獲分組的概念，Group #1（或者圖中的capture 1） ,為第一組數(shù)據(jù)，所以作用在于 后面使用 1提取前面對(duì)應(yīng)的數(shù)據(jù)，后面還可以使用 $1,$2 捕獲每組匹配的內(nèi)容。

s表示空白符，包括空格，水平制表符，垂直制表符，換行符，回車(chē)符，換頁(yè)符。
* 表示任意次數(shù)出現(xiàn)，
/?則表示 / 出現(xiàn)或者不出現(xiàn)

(?:|) 對(duì)應(yīng)的是非捕獲括號(hào)，只想要括號(hào)最原始的功能，但不會(huì)引用它，里面的 1，是第一個(gè)分組（Group #1）的內(nèi)容，主要為了驗(yàn)證這個(gè)標(biāo)簽是成對(duì)的，前后內(nèi)容一致。后面|,則表示如果沒(méi)有匹配到成對(duì)的內(nèi)容也可以什么內(nèi)容都沒(méi)有 ，比如 匹配

這類(lèi)標(biāo)簽。

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


最后面的，//ig: 兩個(gè)修飾符 g:表示全局匹配， i表示忽略大小寫(xiě)。


然后再看 正則主體部分內(nèi)容，"< " 和 "/ >"中間的內(nèi)容大致可以分為兩部分：





(?!area|br|col|embed|hr|img|input|link|meta|param)


上面大致可以簡(jiǎn)化成 (?!p)，也就是要匹配位置。
   要解釋這個(gè)，首先要對(duì)應(yīng)的提出(?=p)，p 是一個(gè)子模式，指代p前面的位置，也說(shuō)明該位置后面的字符要匹配p.列舉書(shū)中實(shí)例


  var result = "hello".replace(/(?=l)/g,"#");
  console.log(result);
  // => "he#l#lo"


相應(yīng)的開(kāi)頭提到的 (?!p)就是反面意思


   var result = "hello".replace(/(?!l)/g,"#");
   console.log(result);
   // => "#h#ell#o#"



(?=p) 和 （?!p) 學(xué)名分別是 positive lookahead  和 negative lookahead.
 中文翻譯分別是正向先行斷言和負(fù)向先行斷言


這里我們可以理解為 #后面的字符串不能匹配l，這里說(shuō)的#,在原字符串"hello"中時(shí)不存在的，只是代表字符之間的各個(gè)位置，輸出#h#ell#o#只是實(shí)例化匹配展示出來(lái)了對(duì)應(yīng)的位置。


<右邊不能是 area,br,col,embed,hr,img,input,link,meta,param,比如像 < img /> ，< br/> 這樣就不需要轉(zhuǎn)化了


  var tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([w:]+)[^>]*)/>/ig;
  "".replace(tagExpanderRE, "<$1>")
  // 輸出 " "







(([w:]+)[^>]*)


這里使用了捕獲分組，分了兩組(([w:]+)[^>]*) 和 ([w:]+)，作用在于，replace的時(shí)候可以通過(guò)$1 和 $2 提取匹配到的數(shù)據(jù)。


([w:]+) 中 + 就是 {1，}的簡(jiǎn)寫(xiě) ，表示w(數(shù)字，字母，下劃線)或者 : 至少出現(xiàn)一次 通常是標(biāo)簽名，div,span 等等
(([w:]+)[^>]*)   多了 [^>]* 表示匹配>以外的任意內(nèi)容，比如 < div class="div-class"> 中的 class="div-class"?？梢赃@么理解，比 .*能夠匹配所有內(nèi)容多加了一個(gè)條件


var tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([w:]+)[^>]*)/>/ig;
"
".replace(tagExpanderRE, "<$1>")
// 輸出 "
"





4，rootNodeRE = /^(?:body|html)$/i

看源碼位置


通過(guò)檢測(cè)節(jié)點(diǎn)的nodeName屬性，判斷是否為body或者h(yuǎn)tml 根節(jié)點(diǎn)


可視化形式：


  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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92284.html

相關(guān)文章

  • 讀 Zepto 源碼之內(nèi)部方法

    摘要：調(diào)用函數(shù)，判斷返回的類(lèi)型字符串，就知道是什么數(shù)據(jù)類(lèi)型了判斷是否為瀏覽器的對(duì)象要為對(duì)象首先要滿足的條件是不能為或者，并且為自身的引用。必須存在中必須存在屬性返回的值調(diào)用函數(shù)，返回的數(shù)據(jù)類(lèi)型。 數(shù)組方法 定義 var emptyArray = [] concat = emptyArray.concat filter = emptyArray.filter slice...

    Freelander 評(píng)論0 收藏0

  • 讀 Zepto 源碼之樣式操作

    摘要：方法也在讀源碼之內(nèi)部方法有過(guò)分析。不太明白為什么要用全局變量來(lái)接收，用局部變量不是更好點(diǎn)嗎保存當(dāng)前類(lèi)的字符串，使用函數(shù)獲得。這是的依然是全局變量，但是接收的是當(dāng)前元素的當(dāng)前樣式類(lèi)字符串為什么不用局部變量呢。 這篇依然是跟 dom 相關(guān)的方法，側(cè)重點(diǎn)是操作樣式的方法。 讀Zepto源碼系列文章已經(jīng)放到了github上，歡迎star: reading-zepto 源碼版本 本文閱讀的源碼為...

    snowell 評(píng)論0 收藏0

  • 讀 Zepto 源碼之神奇的 $

    摘要：返回值為，如果能查找到元素，則將元素以數(shù)組的形式返回，否則返回空數(shù)組排除不合法的。的第一個(gè)字符為，并且為標(biāo)簽。如果存在，則查找下選擇器為的所有子元素。正則表達(dá)式為如果沒(méi)有指定標(biāo)簽名，則獲取標(biāo)簽名。包裹元素的即為所需要獲取的。 經(jīng)過(guò)前面三章的鋪墊，這篇終于寫(xiě)到了戲肉。在用 zepto 時(shí)，肯定離不開(kāi)這個(gè)神奇的 $ 符號(hào)，這篇文章將會(huì)看看 zepto 是如何實(shí)現(xiàn) $ 的。 讀Zepto源碼...

    xi4oh4o 評(píng)論0 收藏0

  • zepto.js 源碼剖析

    摘要：正則首先看一下其中的正則表達(dá)的正則表達(dá)式要包含在中間。后面可以跟來(lái)表示是否進(jìn)行全局匹配或者不區(qū)分大小寫(xiě)匹配。從句首開(kāi)始匹配是一個(gè)，匹配一個(gè)空白字符，包括。 正則 首先看一下其中的正則表達(dá): fragmentRE = /^s*]*>/, singleTagRE = /^(?:|)$/, tagExpanderRE = /]*)/>/ig, rootNodeRE = /^(?:body|h...

    winterdawn 評(píng)論0 收藏0

  • 讀Zepto源碼之Gesture模塊

    摘要：模塊基于上的事件的封裝，利用屬性，封裝出系列事件。這個(gè)判斷需要引入設(shè)備偵測(cè)模塊。然后是監(jiān)測(cè)事件，根據(jù)這三個(gè)事件，可以組合出和事件。其中變量對(duì)象和模塊中的對(duì)象的作用差不多，可以先看看讀源碼之模塊對(duì)模塊的分析。 Gesture 模塊基于 IOS 上的 Gesture 事件的封裝，利用 scale 屬性，封裝出 pinch 系列事件。 讀 Zepto 源碼系列文章已經(jīng)放到了github上，歡...

    coolpail 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<