在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以下的版本中,以下 ...