正則入門的那點事兒

有不少前端小夥伴們對正則抱有敬畏之心，有的想着用的地方很少，用的時候再查，因此遲遲沒有對正則表達式下手，今天，博主助各位道友一臂之力，讓各位道友早日渡劫，修得正果。

正則表達式是對字符串操做的一種邏輯公式，就是用事先定義好的一些特定字符、及這些特定字符的組合，組成一個「規則字符串」，這個「規則字符串」用來表達對字符串的一種過濾邏輯。

———出自百度百科

說下正則的兩種書寫風格：

相信瞭解一丟丟正則的應該都知道//這兩個斜槓分別表示正則表達式的開始和結束，中間纔是匹配的規則。 1.JS風格

let re = new RegExp('/\d/g')
複製代碼

2.perl風格

let re = /\d/g
複製代碼

相信你們見到最多的確定是第二種，緣由很簡單，就是簡單嘍。

先來講下轉義字符

轉義字符都有個特色，前面要加一個反斜槓\，好比：

\d 等價於 0~9；

\w 等價於 a~z加上0~9加上A-Z；

\s 等價於 空白字符，好比空格，製表符，換頁符；

\ . 等價於 任何字符

好比上面的：

let re = /\d/g     //表示匹配一個數字，爲何是一個，下面會講
複製代碼

比較經常使用的就是這三個，說多了怕你們記不住，想了解更多轉義字符戳這裏：www.runoob.com/regexp/rege…

稍微提一嘴，他們的大寫就表示他們的取反。

再來講下元字符 []

元字符通常有三種狀況：

/\a[abc]q/      //表示中間能夠是a,b,c中的一個
/\[a-z]/        //表示a到z中的一個
/\[^a-z]/       //表示非小寫字母
複製代碼

值得注意，當你想匹配數字或字母時，應該這樣寫

/\[a-z0-9]/     //中間不須要東西隔開
複製代碼

發現沒有，轉義字符其實就是元字符的一種簡寫，好比

\d === [0-9]
 \w === [a-zA-Z0-9]
 \D === [^0-9]
複製代碼

是否是很簡單？

注意，^放在[]裏面和外面表達的意思徹底不一樣啊，下面會講

上面咱們提到匹配一個數字，下面爲你們揭曉一個新東西，量詞

當咱們不寫量詞的時候，默認是一個。 介紹下量詞的幾種形式：

/\d{11}/        //匹配11個數字
/\d{2,11}/      //匹配2到11個數字
/\d{2,}/        //匹配至少兩個數字
/\d+/           //匹配一個或多個數字
/\d?/           //匹配0個或1個數字
複製代碼

舉個小栗子，你們常常看到webpack的loader裏面會寫到：

/\.jsx?$/        //意思就是指.js或.jsx結尾
複製代碼

藉此引出一個新的東西，修飾符

修飾符就兩種啦，^表示行首，$表示行尾，就這麼簡單！ 好比：

/1\d{4}/    //這個只要字符串有符合1****就ok
/^1\d{4}$/   //表示1開頭，後面跟4個數字
複製代碼

再介紹個更簡單的東西，或 |

沒錯就是或運算符 用法也很簡單，值得注意的是或運算符優先等級很低，通常搭配()來使用。再舉個webpack裏的loader的栗子：

/\.(png|jpg|gif)$/  //用過webpack的必定眼熟，這就是匹配以png或jpg或gif結尾的東西啊
複製代碼

so easy!

別怕別怕，快完了，一個小東西，叫它選項吧

就介紹兩種好吧：

i大小寫

g全局匹配

這兩個字母通常寫在最後一個斜槓的後面！

別怕，最後一個了，就是正則的方法

經常使用的有：

search:返回字符串匹配第一次出現的位置

match：返回符合要求的東西

replace：字面意思，替換

test：測試，返回布爾值

split：根據你給的東西來切割字符串

沒啦？沒了，正則真正經常使用的就這點東西了，關鍵在於活學活用，固然用的多了，天然就懂套路了。在這裏，給各位看官奉獻一波經常使用的正則表達式

騰訊QQ號：/^[1-9]\d{4,12}$/ (騰訊QQ號從10000開始)
0~9999: /[1-9]\d{0,3}/
由26個英文字母組成的字符串：/^[a-z]+$/i
Email地址：/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
域名：/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
國內電話號碼(0511-4405222、021-87888822)：/\d{3}-\d{8}|\d{4}-\d{7}/
身份證號(15位、18位數字)：/^\d{15}|\d{18}$/

日期格式：/^\d{4}-\d{1,2}-\d{1,2}/
13. 一年的12個月(01～09和1～12)：/^(0?[1-9]|1[0-2])$/
14. 一個月的31天(01～09和1～31)：/^((0?[1-9])|((1|2)[0-9])|30|31)$/
複製代碼

好啦，能看到這裏，說明我寫的東西對道友仍是有點幫助的，寫博客不易，順手點個讚唄。