jQuery原始碼閱讀(四) 正規表示式

2021-08-03 11:07:19 字數 3261 閱讀 1385

在jquery原始碼中,運用了大量的正規表示式,一開始在看的時候真的是一頭霧水,儘管已經看過了js高程裡面的正規表示式。

今天,看了一篇深入理解正規表示式的文章,對正規表示式有了更深的認識,下面做乙個回顧和總結。

js正規表示式用來匹配字串,即利用正規表示式來定乙個規則,如果字串符合這個規則,那麼就可以匹配到。正規表示式的定義有兩種方式:

var reg = /[0-9]/;       //匹配乙個數字

var res = /[a-z]/ig; //匹配乙個字母;後面的i表示忽略大小寫;g表示全域性匹配,即匹配到乙個之後,就從下乙個位置開始匹配

var reg = /\d/; //匹配乙個數字

//正則中使用的轉義字元很多,在記憶體中是\\d這樣儲存的

第二種:

//所以new 正規表示式時,是\\d的形式

var reg = new

regexp('\\d', 'g');

var reg = new

regexp('\\d', 'i');

正規表示式的方法常用的有以下幾個:

reg.exec(str);           //返回匹配到的字串

reg.test(str); //判斷字串是否符合該正則規則,返回true或者false

str.replace(reg, 'a');      //用'a'來替換匹配到的字串

str.match(reg); //返回匹配到的字串,如果正則中有g標識,那麼會匹配到所有的項

//有乙個問題:

var reg = /\d\w\d/g;

var str = '4a8h7a7k3w8';

console.log(str.match(reg));

結果如下:

像8h7, 7k3等都沒有匹配到,這是因為在正規表示式物件中有乙個lastindex屬性,該屬性表示當前匹配到哪乙個位置了,如果正規表示式中有g標識,會沿著lastindex的下乙個位置開始繼續進行匹配,這也只限於exec方法和test方法。那如果想要得到我們想的結果的話,可以這樣做:

var reg = /\d\w\d/g;

var str = '4a8h7a7k3w8';

var arr = ;

var a;

while(a = reg.exec(str))

最終匹配到5個分組

在正規表示式中,用括號括起來的就表示乙個分組,即最後得到的匹配中會有這個分組匹配得到的結果。

舉個例子:

可以看到,得到的結果是乙個長度為2的陣列,第乙個表示總的匹配結果,第二個則是分組匹配結果。

那麼如何在加了括號的情況下,匹配了但是不會返回到結果裡面呢?

這就用到正則中(?:)

之前在jquery原始碼中看到了很多(?:)的情況,當時都覺得很複雜,不過現在再看,會覺得清晰很多。

(?:)的作用就是非捕獲分組,即匹配時可以要匹配,但返回結果時,不會返回。

再比如上面那個例子:

這時結果中就只有乙個匹配結果了。

而在jquery原始碼中,這種用的很多。比如說:

快速匹配正則:

quickexpr = /^(?:[^#

\w\w

]+>)[^>]*$|#([

\w\-

]*)$)/

打眼一看,很麻煩,但分開看的話就好理解一些了。

先這樣看(把括號都去掉)

/^[^#

\w\w

]+>[^>]*$|#[\w

\-]*$/

這個正規表示式分成兩大部分,並且是或的關係。再開啟

/^[^#

\w\w

]+>[^>]*$/ /#[

\w\-

]*$/

可以看到,第乙個是匹配html標籤的,而且不能以#<開頭,這個貌似與瀏覽器href 的hash有關,根據注釋是說防止修改網頁hash值而被xss攻擊;

第二個很明顯,是匹配id選擇器,即』#id』這種格式。

2.再把括號加上來看:

quickexpr = /^(?:[^#

\w\w

]+>)[^>]*$|#([

\w\-

]*)$)/

var str = '#dshk';

var res = quickexpr.exec(str); //res為['dshk', undefined, 'dshk']

var str1 = 'dhjehu'

var res1 = quickexpr.exec(str1); //res1為 ['dhjehu', '', undefined]

到此,正規表示式這部分就整理到這裡,當然,也不僅僅侷限於今天說的幾個操作符,或者說正規表示式的定義符。後期在jquery原始碼中遇到還會再加, 希望共同進步!

jQuery原始碼閱讀筆記

一 閉包結構 作用 消除全域性汙染 採用閉包 匿名函式立即執行 的方式,傳入了window物件 只在後面暴露 和 jquery 這 2 個變數給外界 方式1 function window,undefined window 方式2 function window window,undefined 方...

jQuery原始碼閱讀 swap()

swap css 交換 note this method belongs to the css module but it s needed here for the support module.if support gets modularized,this method should be m...

underscore 原始碼閱讀 四

keys one two three 檢索object擁有的所有可列舉屬性的名稱。我們知道,在js中本就提供了幾個方法如for.in.object.keys來遍歷物件的屬性,為什麼underscore還是要封裝乙個api呢?這其實是為相容ie9版本下的乙個bug做的封裝 在ie9以下的版本中,以下 ...