摘要：說到郵箱格式，我們簡單分析下郵箱的命名方式一般分為三部分郵件地址郵箱域名地址郵件地址部分的規則如下英文字母數字下劃線中劃線點舉幾個栗子根據以上規則，我們先寫一下郵件地址部分圖示沒什么問題繼續往下走。

平時的工作中有很多地方都要用到正則表達式，不得不說，正則的表達式非常強大，比如，我們常用的jquery選擇器，非常方便，jquery的源碼中，選擇器部分應用了大量的正則表達式。然而很多時候，當我們要用到正則的時候，很多人(也包括我 ＝＝ ) 的做法都是打開百度，復制粘貼，試一下，沒問題，大功告成。然而，當遇到特殊需求的時候，復制粘貼大法就不好用了，所以掌握這正則還是很有必要的。下面我就結合我的一些認識對正則進行簡單的介紹，如有紕漏歡迎指出。

假如有這樣一道題目：

請寫一個郵箱驗證的正則。

如果你能寫出：

    /@/

試一下：

var reg = /@/;
reg.test("xxx001@pingan.com.cn");//true

圖示：

沒毛病！
恭喜你,你已經會寫正則了~ (滑稽臉)

其實這是阿里的一道技術面試題，可以寫的很簡單，也可以寫的很復雜，至于寫出來的是什么樣，就要看個人功力了。

繼續往下走。說到郵箱格式，我們簡單分析下：

郵箱的命名方式一般分為三部分

郵件地址

@

郵箱域名地址

郵件地址部分的規則如下：

英文字母

數字

下劃線

中劃線

點

舉幾個栗子：

123456@xxx.xxx

blue.sky@xxx.xxx

123bird@xxx.xxx

ex-xxx001@xxx.xxx

根據以上規則，我們先寫一下郵件地址部分：

var reg = /^w+([-+_.]w+)*$/;

    reg.test("123456"); //true
    reg.test("blue.sky"); //true
    reg.test("123bird"); //true
    reg.test("ex-xxx001"); //true

圖示：

沒什么問題, 繼續往下走。

@ 直接用@匹配就可以了

域名地址部分的規則：

英文字母

數字

中劃線

點

@后面的第一個字符不能是中華線和點，簡單寫一下：

var reg=  /^@w+([-.]w+)*.w+([-.]w+)*$/
var reg = /^@w+([-.]w+)*.w+([-.]w+)*$/;
reg.test("@123-abc.com.cn"); // true

最終的正則可以是這樣子的：

var reg = /^w+([-+_.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;
reg.test("scau_kk@xxx.com.cn"); //true

圖示：

到這里，一種簡單的郵箱正則就寫好了(zz,羅里吧嗦一大堆)。

后面就簡單的總結下。

首先介紹下最常見的,也是最基本的 －字符類 。

對照著這個表格，上面的郵箱正則就很容易看了。

舉幾個簡單的例子

console.log(/^w+$/.test("abc"));  //true
console.log(/^d+$/.test("12345")); //true
console.log(/^D+$/.test(" "));  //true

一般用來指定數量，常用的如下所示：

舉幾個簡單的例子

console.log(/^w{3}$/.test("abc"));  //true
console.log(/^d{1,5}$/.test("12345")); //true

正則表達式里的分枝條件指的是有幾種規則，如果滿足其中任意一種規則都應該當成匹配。
具體方法是用|把不同的規則分隔開。

我們來看看個具體的例子：

var reg =  /0d{2}-d{8}|0d{3}-d{7}/;

這個表達式能匹配兩種以連字號分隔的電話號碼：

一種是3位區號，8位本地號(如010-12345678)，
一種是4位區號，7位本地號(0755-1234567)。

或者寫一個簡單的匹配手機號碼的正則：

var reg =  /^1(3|4|5|7|8)[0-9]d{8}$/;

我們已經知道了如何重復單個字符，但如果想要重復多個字符又該怎么辦呢？
這時候就可以使用分組了。

分組的類型有四種：

舉個簡單的例子：

實現一個驗證ip地址的正則：

var reg = /^((2[0-4]d|25[0-5]|[01]?dd?).){3}(2[0-4]d|25[0-5]|[01]?dd?)$/;

reg.test("127.0.0.1"); // true
reg.test("255.255.888.888"); // false

結合圖示：

集合圖示就很清晰了。

上面的部分只是正則表達式很小的一部分，篇幅有限，下一篇再做介紹。
那根據上面出現的內容，我們看一個更復雜的例子來鞏固，摘自精粹，一起來看下。

var parse_url = /^(?:([A-Za-z]+):)?(/{0,3})([0-9.-A-Za-z]+)(?::(d+))?(?:/([^?#]*))?(?:?([^#]*))?(?:#(.*))?$/;

var  result = parse_url.exec(url);

names.forEach(function(item, index){ 
    console.log(item + ": " + result[index]);
});

console.log(result);
 // url: http://www.ora.com:80/goodparts?q#fragement
 // scheme: http
 // slash: //
 // host: www.ora.com
 // port: 80
 // path: goodparts
 // query: q
 // hash: fragement
 

是不是感覺萌萌噠(滑稽臉.jpg)

看看圖：

我們來分解下parse_url，看它到底是怎么工作的。

首先是 ^, 表示字符串的開始。它是一個錨，指引exec不要跳過那些不像url的前綴，只匹配那些從開頭就像url一樣的字符串。

var reg = (?:([A-Za-z]+):)

這個因子匹配一個協議名，當且僅當后面跟隨一個:的時候才匹配。

(?...) 表示一個非捕獲型分組。
后綴? 表示這個分組是可選的。

第一個捕獲型分組的編號是1，所以該匹配的結果會出現在result[1]中。

var reg = (/{0,3});

下一個因子是捕獲刑分組2，這里需要對 / 進行轉義，這樣就不會被解釋為結束符。
{0,3}表示 斜杠 / 會被匹配 0次 或者1～3次。

var reg = ([0-9.-A-Za-z]+);

這第三個捕獲型分組是是主機名. 由 一個或多個數字,字母, ., - 組成.
這里需要對-進行轉義。

var reg = (::(d+))?;

這第四個捕獲型分組是端口號。它是由一個前置:加上一個或多個數字而組成的序列。

var reg = (?:/([^?#]*))?;

這個是另一個可選的分組，以一個/`開始。之后的字符類[^?#] 以一個^ 開始，表示這個類包含除? # 之外的所有字符。*表示匹配0次 或多次。

var reg = (?:?([^#]*))?;

這個還是一個可選分組，以一個?`開始,它包含了一個捕獲型分組，這個分組包含 0個 或多個 非 #的字符。

var reg = (?:#(.*))?;

這是最后一個可選分組，以一個#`開始, . 會匹配除換行符以外的所有字符。

最后的$表示字符串的結束，它保證這個url的尾部沒有其他更多內容了。

以上便是parse_url的所有因子了。

這個正則表達式還可以寫的更復雜，但通常不推薦這么做。

再舉個例子：

var url = "http://www.ora.com:80/goodparts?q#fragement";
 var result = url.split(/^(([^:/?#]+):)?((//)?([^/?#]*))?([^?#]*)(?([^#]*))?(#(.*))?/);
 console.log(result);

短小精悍的正則表達式是最好的。

作為基礎入門的介紹，寫到這里就差不多了，后續內容后續會繼續發布。

本大汪差不多也該收拾東西，明天回家～預祝大家?年大吉。

附文中出現的可視化工具