正規表示式-基礎實戰篇

三省吾身丶丶發表於2015-11-11

正規表示式-基礎實戰篇

在理論基礎篇之後呢,應該就對正規表示式有了一些瞭解.比如說如何去建立一個正規表示式以及其中的匹配規則等等.那麼就開始正規表示式的實戰吧!
建議把所有的例項在console視窗敲一遍.例子中展現的只是一部分,配合《正規表示式-理論基礎篇》SF地址、原址使用效果更佳哦!

一個手機號碼匹配的進化歷程

例項程式碼依託於:RegExpObj.test(String)，其含義是測試正規表示式與指定字串是否匹配。成功匹配返回true

第一階段-字元直接量:匹配自身

先假設一個手機號碼為13762571094.

  • 最初形態

/13762571094/.test("13783281094");//false
/13762571094/.test("13762571094");//true

/13762571094/.test("ui13762571094dd");//true
//正規表示式在匹配時,只要輸出匹配內容就返回true,不考慮前面的ui和後面的dd
//最後這種情況顯然不是我們想要的.那麼就進入下一階段的實踐吧.

第二階段-錨點:指定匹配位置

  • ^匹配起始位置

/^http:/.test("http://www.163.com");//true
/^http:/.test("ahttp://www.163.com");//false
/^http:/.test("https://www.163.com");//false

  • $匹配結尾位置


/.jpg$/.test("1.jpg");//true
/.jpg$/.test("1.jpg png");//false
/.jpg$/.test("1.png");//false
/.jpg$/.test("regexp.png");//false

  • :匹配單詞邊界

/is/.test("this");//false
/is/.test("that is reg");//true

  • 在瞭解錨點之後我們的正則就有了第一次進化

/^13762571094$/.test("13762571094");//true

/^13762571094$/.test("ui13762571094dd");//false
//此時這個程式就能正確識別頭尾的字元了.下面我們看看
/^13762571094$/.test("13712345674");//false
/*在試過了多個號碼後發現,這個正則只能識別這個標準的手機號碼.
這顯然不是我們想要的,而不是識別一個手機號碼的格式.
在下一階段我們將實現一個手機號碼的匹配.*/

第三階段-字元類:匹配一類字元中的一個

  • [abc]:a或b或c。[0-9]:一個數字

  • [^0-9]:非數字的一個字元。[a-z]:一個字母

  • . :任一字元(換行符除外)

[0-9]/.test("123")//true
/[0-9]/.test("asd")//false
/[^0-9]/.test("asd")//true
/[a-z]/.test("asd")//true
/./.test("allen")//true
/./.test("12")//true

  • 瞭解了字元類後,我們就可以進行第二次進化(50%)。此時就能匹配一個手機號碼啦！

/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test("13762571094");//true
/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test("13712345678");//true
//是不是感覺程式碼太長了呢?[0-9]足足5個字元呢,為了省力,當然不會就這樣算了.繼續向下看吧

元字元-具有特殊意義的字元

其實我們已經在前面使用過它啦

  • ^、$、。

  • d:[0-9]。D:[^d]

  • s:空白符。S:[^s]

  • w:[A-Za-z0-9_]。W:[^w]

/d/.test("123");//true
/d/.test("1dsf");//true
/D/.test("1dsf");//true
/D/.test("123");//false
//自己再多去實驗一些例子吧

  • 瞭解了元字元後我們就可以進行第二次進化(100%)了。

/^1dddddddddd$/.test("13762571094");//true
/^1dddddddddd$/.test("13712345678");//true
/^1dddddddddd$/.test("1376257109x");//false
//是不是感覺程式碼比剛剛短了很多了呢?但這還是不夠,什麼事情都阻止不了我想偷懶的心,繼續學習吧.

第四階段-量詞:出現的次數

  • {n,m}:n到m次。?：{0,1}

  • +:{1,}。*:{0,}

/d*/.test("abc");//true
/d+/.test("abc");//false
/d+/.test("1abc");//true
/^https?:/.test("http://www.163.com");//true
/^https?:/.test("https://www.163.com");//true
/^https?:/.test("httpss://www.163.com");//false

  • 此時我們的匹配手機號碼的正規表示式就到了最後階段了

/^1d{10}$/.test("13762571094");//true
/^1d{10}$/.test("13712345678");//true
/^1d{10}$/.test("1376257109x");//false
//到這裡手機號碼就匹配完成了!

需要注意的地方-轉義符:需要匹配的字元是元字元

/^http:///../@163.com$/

/http:///.test("http://www.163.com");//true
/@163.com$/.test("abc@163.com");//true
/@163.com$/.test("abc@163acom");//true
/@163.com$/.test("abc@163.com");//true
/@163.com$/.test("abc@163acom");//false

多選分支:網易郵箱的匹配

/thi(c|n)k/===thi[cn]k
.(png|jpg|jpeg|gif)$:檢測一個檔案是不是圖片檔案.

/(w+)@(163|126|188).com$/.test("guo啊聖誕節了@163acom")//false
/(w+)@(163|126|188).com$/.test("guodong111@163acom")//false
/(w+)@(163|126|188).com$/.test("guodong111@163.com")//true

捕獲

  • 儲存匹配到的字串,日後再用

  • ():捕獲/(w+)@(163|126|188).com$/

  • (?:):不捕獲/(w+)@(?:163|126|188).com$/

  • 使用:

    • $1,$2,…

    • api引數或返回值

獲取匹配的字串:String.match(regexp)

var url = `http://blog.163.com/album?id=1#comment`;
var reg = /^(https?:)//([^/]+)(/[^?]*)?(?[^#]*)?(#.*)?$/;
// var reg = /^(https?:)//([^/]+)([^?]*)([^#]*)(.*)$///與上面的正則效果相同.;

var arr = url.match(reg);

//arr[0]為原字串."http://blog.163.com/album?id=1#comment"
//對應括號所匹配的字元
var protocol= arr[1]//"http:"
var host= arr[2]//"blog.163.com"
var pathname= arr[3]//"/album"
var search= arr[4]//"?id=1"
var hash= arr[5]//"#comment"

替換一個子串:str.replace(regexp/substr,replacement)

  • 第二個引數是字元時

var str = "the price of tomato is 5, the price of apple is 10."
str.replace(/(d+)/,"$1.00")
"the price of tomato is 5.00, the price of apple is 10."
//使用全域性模式
str.replace(/(d+)/g,"$1.00")
"the price of tomato is 5.00, the price of apple is 10.00."

  • 第二個引數是函式時


var html = `<label>網址:</label><input placeholder="以http://起始">`;
html = html.replace(/[<>]/g, function(m0){
    switch(m0){
        case `<`:
            return `&lt;`;
        case `>`:
            return `&gt;`;
    }
});
console.log(html);//&lt;label&gt;網址:&lt;/label&gt;&lt;input placeholder="以http://起始"&gt;

更強大的檢索 – regexpObj.exec(str)

  • 更詳盡的結果:index

  • 過程的狀態:lastIndex

感覺基本用不到..就不說了…喜歡就推薦一下吧^_^

相關文章