我們知道js是支持正則表達(dá)式的，用正則表達(dá)式來(lái)驗(yàn)證文本非常方便，但是初學(xué)者卻非常難懂，最近碰到幾個(gè)要用正則的地方，實(shí)在是逃不過(guò)了就去學(xué)了學(xué)，發(fā)現(xiàn)邊寫(xiě)邊學(xué)其實(shí)也并不是太難。下面通過(guò)一個(gè)案例來(lái)學(xué)習(xí)
ps:安利兩個(gè)網(wǎng)站正則可視化 正則檢測(cè) 下面講用法
先看需求：匹配美國(guó)電話號(hào)碼
//正確格式
555-555-5555
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555
首先會(huì)想到匹配數(shù)字，發(fā)現(xiàn)正則數(shù)字可以用\d表示，那么\d\d\d-\d\d\d-\d\d\d\d是不是可以匹配第一種類(lèi)型呢，來(lái)用這個(gè)網(wǎng)站檢測(cè)一下，可以看到第一個(gè)確實(shí)被匹配到了，后面/g是全文匹配
但是缺點(diǎn)顯而易見(jiàn)，重復(fù)的怎么簡(jiǎn)寫(xiě)呢？原來(lái){n}可以表示重復(fù)次數(shù)，那么改一下
Bingo!,那么接下來(lái)注意到第一個(gè)，第四個(gè)是不是比較相同呢？空格或者橫線，那么怎么表示或者關(guān)系呢？來(lái)看看這個(gè),框起來(lái)的是更改的地方
沒(méi)錯(cuò)[]表示或者的關(guān)系，\s表示空格。來(lái)用可視化看一下
意思就是3個(gè)數(shù)字，接著匹配空格或則橫線，再3個(gè)數(shù)字，再空格或則橫線，最后4個(gè)數(shù)字，這樣應(yīng)該很好理解了
可能會(huì)注意到222 555 555 5555這樣不符合預(yù)期的也匹配到了，原來(lái)我們是想從頭開(kāi)始驗(yàn)證，那么可以這樣做
用^表示從頭開(kāi)始匹配，注意到后面加了/gm,因?yàn)榧恿藦念^匹配的話，回車(chē)換行下一行并不會(huì)被認(rèn)為新的開(kāi)始，所以/m表示多行匹配
然后看5555555555空格和橫線也可以不要，那么意思就是空格或橫線可以出現(xiàn)或者不出現(xiàn)，那么可以這樣改一下
注意我加了一個(gè)
?，它表示最多出現(xiàn)一次（可以是0次）這樣就可以匹配全是數(shù)字這樣的情況了，舉一反三，那么開(kāi)始的區(qū)號(hào)1 555 555 5555中的1和空格是不是也可以這樣表示呢？
注意我用
()括起來(lái)了，它表示一組接下來(lái)處理括號(hào)，既然也是可有可無(wú)，也用
?表示算了
注意框起來(lái)的地方我寫(xiě)的是
\(和\)這是因?yàn)?strong>要對(duì)特殊字符進(jìn)行轉(zhuǎn)義，學(xué)過(guò)js一定對(duì)轉(zhuǎn)義不陌生，這里就不細(xì)講了到這里就完了嗎？不不不，還是太年輕，來(lái)看看這種情況
我們寫(xiě)的是括號(hào)兩邊都是最多出現(xiàn)一次，并沒(méi)有要求同時(shí)出現(xiàn)或者同時(shí)不出現(xiàn)，這就面臨著只出現(xiàn)一半也會(huì)通過(guò)匹配的情況。。再改一下
這好像改的有點(diǎn)多。。
分步講，先看前面由(1\s)?改成了1?\s?因?yàn)闆](méi)改之前(1\s)是一組至多出現(xiàn)一次，所以1單獨(dú)出現(xiàn)的時(shí)候也會(huì)出現(xiàn)匹配失敗，所以還是分開(kāi)寫(xiě)了
再看第二個(gè)這一坨，放到可視化里面看
兩組之間的或者關(guān)系可以用()|()表示
最后一步，我加了$來(lái)表示結(jié)尾，停止匹配，不然的話555-555-5555555也是會(huì)被匹配成功的
大致就是這么多了，最后來(lái)完整看一遍代碼
/^1?\s?((\(\d{3}\))|(\d{3}))[\s-]?\d{3}[\s-]?\d{4}$/gm
放到可視化里面
常用的正則方法還有
[a-z] //匹配a到z任意字符
. //除回車(chē)換行外任意字符
+//最少出現(xiàn)一次
\d//數(shù)字
\D//非數(shù)字
\s//空格
\S//非空格
\w//單詞字符
\W//非單詞字符
{n}//出現(xiàn)n次
{n,m}//出現(xiàn)n到m次
{n,}//至少出現(xiàn)n次
\b//單詞邊界
\B//非單詞邊界
