摘要：說(shuō)到郵箱格式，我們簡(jiǎn)單分析下郵箱的命名方式一般分為三部分郵件地址郵箱域名地址郵件地址部分的規(guī)則如下英文字母數(shù)字下劃線中劃線點(diǎn)舉幾個(gè)栗子根據(jù)以上規(guī)則，我們先寫(xiě)一下郵件地址部分圖示沒(méi)什么問(wèn)題繼續(xù)往下走。

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

假如有這樣一道題目：

請(qǐng)寫(xiě)一個(gè)郵箱驗(yàn)證的正則。

如果你能寫(xiě)出：

    /@/

試一下：

var reg = /@/;
reg.test("[email protected]");//true

圖示：

沒(méi)毛??！
恭喜你,你已經(jīng)會(huì)寫(xiě)正則了~ (滑稽臉)

其實(shí)這是阿里的一道技術(shù)面試題，可以寫(xiě)的很簡(jiǎn)單，也可以寫(xiě)的很復(fù)雜，至于寫(xiě)出來(lái)的是什么樣，就要看個(gè)人功力了。

繼續(xù)往下走。說(shuō)到郵箱格式，我們簡(jiǎn)單分析下：

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

郵件地址

@

郵箱域名地址

郵件地址部分的規(guī)則如下：

英文字母

數(shù)字

下劃線

中劃線

點(diǎn)

舉幾個(gè)栗子：

[email protected]

[email protected]

[email protected]

[email protected]

根據(jù)以上規(guī)則，我們先寫(xiě)一下郵件地址部分：

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

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

圖示：

沒(méi)什么問(wèn)題, 繼續(xù)往下走。

@ 直接用@匹配就可以了

域名地址部分的規(guī)則：

英文字母

數(shù)字

中劃線

點(diǎn)

@后面的第一個(gè)字符不能是中華線和點(diǎn)，簡(jiǎn)單寫(xiě)一下：

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("[email protected]"); //true

圖示：

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

后面就簡(jiǎn)單的總結(jié)下。

首先介紹下最常見(jiàn)的,也是最基本的 －字符類 。

對(duì)照著這個(gè)表格，上面的郵箱正則就很容易看了。

舉幾個(gè)簡(jiǎn)單的例子

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

一般用來(lái)指定數(shù)量，常用的如下所示：

舉幾個(gè)簡(jiǎn)單的例子

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

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

我們來(lái)看看個(gè)具體的例子：

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

這個(gè)表達(dá)式能匹配兩種以連字號(hào)分隔的電話號(hào)碼：

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

或者寫(xiě)一個(gè)簡(jiǎn)單的匹配手機(jī)號(hào)碼的正則：

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

我們已經(jīng)知道了如何重復(fù)單個(gè)字符，但如果想要重復(fù)多個(gè)字符又該怎么辦呢？
這時(shí)候就可以使用分組了。

分組的類型有四種：

舉個(gè)簡(jiǎn)單的例子：

實(shí)現(xiàn)一個(gè)驗(yàn)證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

結(jié)合圖示：

集合圖示就很清晰了。

上面的部分只是正則表達(dá)式很小的一部分，篇幅有限，下一篇再做介紹。
那根據(jù)上面出現(xiàn)的內(nèi)容，我們看一個(gè)更復(fù)雜的例子來(lái)鞏固，摘自精粹，一起來(lái)看下。

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
 

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

看看圖：

我們來(lái)分解下parse_url，看它到底是怎么工作的。

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

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

這個(gè)因子匹配一個(gè)協(xié)議名，當(dāng)且僅當(dāng)后面跟隨一個(gè):的時(shí)候才匹配。

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

第一個(gè)捕獲型分組的編號(hào)是1，所以該匹配的結(jié)果會(huì)出現(xiàn)在result[1]中。

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

下一個(gè)因子是捕獲刑分組2，這里需要對(duì) / 進(jìn)行轉(zhuǎn)義，這樣就不會(huì)被解釋為結(jié)束符。
{0,3}表示 斜杠 / 會(huì)被匹配 0次 或者1～3次。

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

這第三個(gè)捕獲型分組是是主機(jī)名. 由 一個(gè)或多個(gè)數(shù)字,字母, ., - 組成.
這里需要對(duì)-進(jìn)行轉(zhuǎn)義。

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

這第四個(gè)捕獲型分組是端口號(hào)。它是由一個(gè)前置:加上一個(gè)或多個(gè)數(shù)字而組成的序列。

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

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

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

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

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

這是最后一個(gè)可選分組，以一個(gè)#`開(kāi)始, . 會(huì)匹配除換行符以外的所有字符。

最后的$表示字符串的結(jié)束，它保證這個(gè)url的尾部沒(méi)有其他更多內(nèi)容了。

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

這個(gè)正則表達(dá)式還可以寫(xiě)的更復(fù)雜，但通常不推薦這么做。

再舉個(gè)例子：

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

短小精悍的正則表達(dá)式是最好的。

作為基礎(chǔ)入門(mén)的介紹，寫(xiě)到這里就差不多了，后續(xù)內(nèi)容后續(xù)會(huì)繼續(xù)發(fā)布。

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

附文中出現(xiàn)的可視化工具