正則表達式-基礎實戰篇

正則表達式-基礎實戰篇

---

在理論基礎篇以後呢,應該就對正則表達式有了一些瞭解.好比說如何去建立一個正則表達式以及其中的匹配規則等等.那麼就開始正則表達式的實戰吧!
建議把全部的實例在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

• \b:匹配單詞邊界

/\bis\b/.test("this");//false
/\bis\b/.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個字符呢,爲了省力,固然不會就這樣算了.繼續向下看吧

元字符-具備特殊意義的字符

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

• ^、$、\b。

• \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%)了。

/^1\d\d\d\d\d\d\d\d\d\d$/.test("13762571094");//true
/^1\d\d\d\d\d\d\d\d\d\d$/.test("13712345678");//true
/^1\d\d\d\d\d\d\d\d\d\d$/.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

• 此時咱們的匹配手機號碼的正則表達式就到了最後階段了

/^1\d{10}$/.test("13762571094");//true
/^1\d{10}$/.test("13712345678");//true
/^1\d{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

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