無論是做h5頁面還是后臺(tái)管理系統(tǒng)，前端總是會(huì)有非常多的輸入校驗(yàn)，這就需要用到JS正則表達(dá)式（Regular Expression）。正則表達(dá)式本質(zhì)上是一個(gè)小巧的、高度專用的編程語言，常用于匹配校驗(yàn)、查找和替換、字符串分割等場(chǎng)景。下面將對(duì)正則的基礎(chǔ)進(jìn)行簡單介紹，并列出常用的正則集合。
注：推薦一個(gè)正則表達(dá)式轉(zhuǎn)圖形化在線工具（https://regexper.com），剛開始學(xué)習(xí)正則時(shí)看冗長的字符串會(huì)比較難懂，這個(gè)在線工具能將其轉(zhuǎn)換為類似于邏輯流程圖的形式，可以幫助理解
一、創(chuàng)建正則表達(dá)式
初始化同時(shí)賦值： var reg = new RegExp('xxx', 'g');? ?// xxx為正則字符串
直接賦值： var reg = /xxx/g;
二、修飾符
（1）g （global）: 全文搜索，不添加則搜索到第一個(gè)匹配字符串時(shí)停止搜索
（2）i （ignore case）: 添加時(shí)忽略大小寫，默認(rèn)大小寫敏感
（3）m （multiple lines）: 多行搜索
三、元字符
正則表達(dá)式由兩種基本字符類型組成：原義文本字符和元字符。元字符是指在正則表達(dá)式中有特殊含義的非字母字符，將元字符轉(zhuǎn)換為原義文本字符需使用轉(zhuǎn)義字符 " \"。
元字符包括：* + ? $ ^ . | \ ( ) { } [ ]?
四、非打印字符
\ : 轉(zhuǎn)義字符? ? ? ? ? ? ? ? ? ?\t : 水平制表符? ? ? ? ? ? ? \v : 垂直制表符? ? ? ? ? ? ? ?\n : 換行符
\r : 回車符? ? ? ? ? ? ? ? ? ? ?\o : 空字符? ? ? ? ? ? ? ? ? ? \f : 換行符? ? ? ? ? ? ? ? ? ? ? ?
\cX : 與X對(duì)應(yīng)的控制字符（如 ctrl + x，ctrl + c 等等）
五、字符類
可使用元字符 [ ] 來構(gòu)建一個(gè)簡單的類，eg: [abc] 把 a、b、c 歸為一類，可使用 元字符 ^ 創(chuàng)建反向類/負(fù)向類， eg [^abc]
六、范圍類
使用元字符[x1-x2]來鏈接兩個(gè)字符表示從x1到x2的任意字符（閉區(qū)間）
eg: [a-z]或[a-zA-Z]，注意內(nèi)部可連寫
七、預(yù)定義類
字符? ? ? ? ? ? ? ? ? ? ? 等價(jià)類? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 含義
.? ? ? ? ? ? ? ? ? ? ? ? ? ?[^\r\n]? ? ? ? ? ? ? ? ? ? ? ? ? ?除了回車符和換行符之外的所有字符
\d? ? ? ? ? ? ? ? ? ? ? ? ?[0-9]? ? ? ? ? ? ? ? ? ? ? ? ? ? ?數(shù)字字符
\D? ? ? ? ? ? ? ? ? ? ? ? [^0-9]? ? ? ? ? ? ? ? ? ? ? ? ? ? 非數(shù)字字符
\s? ? ? ? ? ? ? ? ? ? ? ? [\f\n\r\t\v]???? ? ? ? ? ? ? ? ? ? ?匹配空白符、TAB符、換頁符、換行符
\S? ? ? ? ? ? ? ? ? ? ? ?[^\f\n\r\t\v]? ? ? ? ? ? ? ? ? ? ? ?匹配非空白符
\w? ? ? ? ? ? ? ? ? ? ? ?[a-zA-Z_0-9]? ? ? ? ? ? ? ? ? ?匹配單詞字符（字母、數(shù)字、下劃線）
\W? ? ? ? ? ? ? ? ? ? ? [^a-zA-Z_0-9]? ? ? ? ? ? ? ? ? 匹配非單詞字符
八、邊界匹配字符
? ? ? ^? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?\b? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?\B
開始字符? ? ? ? ? ? ? ? ? ? ? ? 結(jié)束字符? ? ? ? ? ? ? ? ? ? ? ? 單詞邊界? ? ? ? ? ? ? ? ? ? ? ? 非單詞邊界
九、量詞
字符? ? ? ? ? ? ? ? ? ? ? ? ? ? ?含義
？? ? ? ? ? ? ? ? ? ? ? ? ?出現(xiàn)零次或一次（最多出現(xiàn)一次）
+? ? ? ? ? ? ? ? ? ? ? ? ? ?出現(xiàn)一次或多次（至少出現(xiàn)一次）
*? ? ? ? ? ? ? ? ? ? ? ? ? ? 出現(xiàn)零次或多次（任意次）
{n}? ? ? ? ? ? ? ? ? ? ? ? ?出現(xiàn)n次
{n,m}? ? ? ? ? ? ? ? ? ? ?出現(xiàn)n到m次
{n,}? ? ? ? ? ? ? ? ? ? ? ? 至少出現(xiàn)n次
{0,n}? ? ? ? ? ? ? ? ? ? ? 至多出現(xiàn)n次
[...]? ? ? ? ? ? ? ? ? ? ? ? 字符范圍: [a-z]、[0-9]、_、[A-Z]
十、貪婪模式
正則表達(dá)式使用量詞進(jìn)行匹配時(shí)，會(huì)默認(rèn)匹配盡可能多的結(jié)果
eg: ’123456789‘.match(/\d{0,5}/g)，匹配結(jié)果為1,2,3,4,5，選擇匹配5個(gè)而不是0個(gè)
如果想讓正則表達(dá)式盡可能少的匹配，即一旦成功匹配就不再繼續(xù)嘗試，在量詞后加上？即可
十一、分組
使用元字符( )達(dá)到分組功能，使量詞作用于分組，eg: (ABC){3}
十二、或
使用元字符 " | " 達(dá)到或的效果，eg: AB(bc|ef)FE
常用正則合集
1、校驗(yàn)合法url
/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
2、校驗(yàn)手機(jī)號(hào)碼
/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[289])\d{8}$/
3、校驗(yàn)國內(nèi)座機(jī)電話
/\d{3}-\d{8}|\d{4}-\d{7}/
4、校驗(yàn)身份證
/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
5、校驗(yàn)車牌號(hào)
/^(([京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng)][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng)][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9掛學(xué)警港澳使領(lǐng)]))$/
6、校驗(yàn)email地址
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
7、檢驗(yàn)賬號(hào)名稱（只能由字母、數(shù)字、下劃線組成，且以字母開頭，8-20位）
/^[a-zA-Z][a-zA-Z0-9_]*{8,20}$/
8、檢驗(yàn)密碼（8-20位含字母、數(shù)字的密碼）
/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/
9、純字母
/^[a-zA-Z]*$/
10、純中文
/^[\u4E00-\u9FA5]/
11、整數(shù)
/^-?\d+$/
12、整數(shù)且大于0
/^([1-9]\d*(\.\d+)?|0)$/
13、小數(shù)
/^\d+\.\d+$/
14、正整數(shù)、小數(shù)或0
/^\d+(\.?|(\.\d+)?)$/
15、上傳圖片類型
/image\/(png|jpg|jpeg|gif)$/
16、域名
/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?/
17、qq號(hào)
/^[1-9]*[1-9][0-9]*$/
18、微信號(hào)
/^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/
19、ipv4地址
/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
20、日期格式，yyyy-mm-dd
/^\d{4}(-)\d{1,2}\1\d{1,2}$/
