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