前言
正則在js中是一類比較特殊的物件,它可以匹配各個場景需要的格式驗證,例如郵箱、手機號、使用者登入名、密碼等等,似乎無處不在,在常見的字串檢索或替換中,我們需要提供一種模式表示檢索或替換的規則,來匹配一系列符合某個句法規則的字串。
以下是正則的較為官方的解釋:
正規表示式是用於匹配字串中字元組合的模式。在
JavaScript
中,正規表示式也是物件。這些模式被用於RegExp
的exec
和test
方法, 以及String
的match
、replace
、search
和split
方法。
言歸正傳,上程式碼!
1. 建立正規表示式(以下有兩種方式來參考):
(1)使用正規表示式的建構函式(new 的方式來建立)
let regex = new RegExp("a")
let regex = new RegExp("^[a-zA-Z]",'g') ; //當使用引號時不必再加反斜槓’/’
let regex = new RegExp(/^[a-zA-Z]/,'gi'); //當有斜槓時就 不用再加引號
複製程式碼
(2)建立字面量(由兩個斜槓’//'包裹需要匹配的內容)
let regex = /ab/ ;
let regex=/^[a-zA-Z]/ ;
複製程式碼
這兩種方式都可以來建立一個正規表示式,但是相對來說第二種方式更加常用一些。
2.正規表示式的引數,寫在//後面,可混合使用
g
全域性匹配;找到所有匹配,而不是在第一個匹配後停止i
匹配全部大小寫m
多行; 將開始和結束字元(^
和$
)視為在多行上工作(也就是,分別匹配每一行的開始和結束(由\n
或\r
分割),而不只是只匹配整個輸入字串的最開始和最末尾處。s
與m
相反,單行匹配
let regex=/^[a-zA-Z]/gim ;
複製程式碼
3. 正則中常用方法以及字串中與正則相關的方法
(1)test
()方法檢索字串中的值是否匹配給出的正則規則,返回布林值 true
或false
。
檢索"ab"
是否匹配前面的正規表示式 /../,正確返回true
,不匹配返回false
/../.test("ab"); // true。
複製程式碼
(2)exec
()方法檢索字串中的指定值,如果找到匹配的文字,則返回一個結果的陣列,反之返回null
。
檢索正規表示式/abc/
是否有在字串中defaabc
有匹配到,返回匹配到內容,索引值,以及檢索的字串
/abc/.exec("defaabc") // ["abc", index: 4, input: "defaabc"]
複製程式碼
檢索/qqq/
是否在abcdefaabc
中匹配到,返回 null
/qqq/.exec("abcdefaabc") // null
複製程式碼
(3)compile()
方法用於改變正則匹配內容
將/abc/
的匹配內容改成後面的字串的內容
/abc/.compile('def’) // /def/
複製程式碼
(4)split()
將字串分割成字串陣列
將字串abcd
以/b/
中的b
分割成字串陣列
"abcd".split(/b/); // ["a", "cd"]
複製程式碼
(5)replace()
方法用於在字串中用一些字元替換另一些字元或者替換一個與正規表示式匹配的字串
用正則內容/\d\d\d/
去匹配字串12345abcde
,將匹配的內容替換成*
,並返回替換完成的字串
'12345abcde'.replace(/\d\d\d/g,'*'); // "*45abcde"
複製程式碼
去掉字串的引號,全域性檢索'
,替換成''
空
'12345abcde'.replace(/'/g,''); //12345abcde
複製程式碼
去掉左側空格:
' 12666'.replace( /^\s*/, ''); //12666
複製程式碼
去掉右側空格:
'12666 '.replace(/(\s*$)/g, "") //12666
複製程式碼
去掉兩頭空格:
' 12666 '.replace(/^\s+|\s+$/g,"") // 12666
複製程式碼
同樣除了正則,js也有去除兩頭空格的方法:
' 22 33 '.trim() //22 33
複製程式碼
去掉字串中所有的空格,tab
,換頁符,換行符
' 12 345ab cd e '.replace(/\s/g,''); // "12345abcde"
複製程式碼
(6) search()
用於檢索字串中指定的字串或與正規表示式相匹配的字串,返回匹配的字串的起始位置的索引,反之返回-1
'abcdedfasdfs'.search(/d/); // 3
複製程式碼
即使是全域性匹配,也只會匹配到第一個的位置
'abcdedfasdfs'.search(/d/g); // 3
複製程式碼
如果沒有匹配到,返回-1
'abcdedfasdfs'.search(/o/g); // -1
複製程式碼
(7)match()
方法可在字串內檢索指定的值,或找到一個或多個正規表示式的匹配
檢索指定的值,並返回,b+
指多個
"aabbbbccbbaab".match(/b+/g); // ["bbbb", "bb", "b"]
複製程式碼
4.正則規則(常用)
參考: developer.mozilla.org/zh-CN/docs/…
(1)字元類規則
如果親感覺示例程式碼並沒有解除你的疑惑,那麼接下來就來分條解釋上面的每個字元的用法:
(1) . 任意字元
關於這個(.)
可能是匹配最多內容的字元了,它的匹配規則是除去換行(\n)
和回車(/r)
之外的任意字元,下面我們就來用幾個示例來演示。
測試字母:
/.../.test("abc"); // true
複製程式碼
測試數字:
/.../.test(123); // true
複製程式碼
特殊符號:
/………../.test("!@#$%^&*()_+") // true
複製程式碼
(2)\d 匹配數字0~9
測試字母:
/\d/.test("a"); // false
複製程式碼
測試數字:
/\d/.test(5) //true
複製程式碼
特殊符號:
/\d\d\d\d\d\d\d\d\d\d\d\d\d/.test("!@#$%^&*()_+") // false
複製程式碼
(3)\D 匹配除數字0~9
的所有字元(非\d)
測試字母:
/\D/.test("a"); // true
複製程式碼
測試數字:
/\D/.test(5) // false
複製程式碼
特殊符號:
/\D\D/.test("!@") // true
複製程式碼
(4)\w 匹配數字0~9
,字母a~z
,A~Z
,下劃線
測試字母:
/\w/.test("a"); // true
複製程式碼
測試數字:
/\w/.test(5) // true
複製程式碼
特殊符號:
/\w\w/.test("!@") // false
複製程式碼
(5)\W
匹配非\w
,的特殊符號
測試字母:
/\W/.test("a"); // false
複製程式碼
測試數字:
/\W/.test(5) // false
複製程式碼
特殊符號:
/\W\W/.test("!@") // true
複製程式碼
(6)\s
匹配空格Tab
換頁 換行符
測試字母:
/\s/.test("a"); // false
複製程式碼
測試數字:
/\s/.test(5) // false
複製程式碼
特殊符號:
/\s/.test("@") // false
複製程式碼
空格Tab
:
/\s\s/.test(" ") //true
複製程式碼
(7)\S
匹配非\s
的內容
測試字母:
/\S/.test("a"); // true
複製程式碼
測試數字:
/\S/.test(5) // true
複製程式碼
特殊符號:
/\S/.test("@") // true
複製程式碼
空格Tab:
/\S\S/.test(" ") // false
複製程式碼
(2)範圍符號匹配規則
(1)[...]: 匹配字元範圍之內的
/[a-z]/.test("asdfge") // true
複製程式碼
(2)[^...]: 匹配字元範圍以外的
/[^a-z]/.test("15432") // true
複製程式碼
(3)^ :匹配以此開頭的
/^abcd/.test("abcd") // true
複製程式碼
(4)$:匹配以此結尾的
/abd$/.test("abd") // true
複製程式碼
(5)\b:匹配單次邊界
檢測is
兩側是否有空格的,有空格的即可匹配,並且單次匹配
/is\b/.test("this is an apple") // true
"th is is an apple".replace(/\bis\b/,"*") // "th * is an apple"
"th isis an apple".replace(/\bis\b/,"*")
複製程式碼
(6)\B:非\b,即非單次邊界
檢測abc
兩側是否都沒有空格,單次匹配
"eabcdef abcde".replace(/abc\B/,"*") //"e*def abcde"
"e abc def abc de".replace(/abc\B/,"*") //"e abc def abc de"
"eabcdefabcde".replace(/abc\B/,"*") // "e*defabcde"
複製程式碼
(3)分組匹配規則
(1)(x):分組並記錄匹配到的字串
"boyboyfrinedboy".replace(/(boy){2}frined/,"*") //"* boy"
複製程式碼
(2) \x : \x匹配第x個分組(x)重複1次
/(abc)(def)\2/.test("abcdefdef") // true
複製程式碼
(3) (?:x): 僅分組,此時的\x並不會指向此
/(?:abc)(?:def)(eee)\1/.test("abcdefeeeeee") // ture
複製程式碼
(4)重複匹配規則
(1) x* :匹配x並匹配重複次數>=0的x(貪婪演算法)
abc*匹配ab,abc,abcc,abccc
複製程式碼
(2) x+ :匹配x並匹配重複次數>0的x(貪婪演算法)
abc*匹配abc,abcc,abccc,不匹配ab
複製程式碼
(3) x*? :只匹配x(不包含最後字元)(非貪婪演算法)
abc*?只匹配ab,其他不匹配
複製程式碼
(3) x+? :只匹配x,其他不匹配(非貪婪演算法)
abc+?只匹配abc,其他不匹配
複製程式碼
(4)x{n} :匹配x重複>=n次的內容(非貪婪演算法)
(abc){2}匹配abcabc,abcabcabcabc
複製程式碼
(5) x{n,m} :匹配x重複次數>=n,<=m(非貪婪算法)
(abc){1,2}匹配abc,abcabc,不匹配abcabcabc
複製程式碼
5.常用的正則匹配
(1)手機號
-
移動號段: 134 135 136 137 138 139 147 148 150 151 152 157 158 159 172 178 182 183 184 187 188 198
-
聯通號段: 130 131 132 145 146 155 156 166 171 175 176 185 186
-
電訊號段: 133 149 153 173 174 177 180 181 189 199
-
虛擬運營商: 170
匹配13*
的手機號:
/^(1)3(\d){9}$/.test(13131121111)
複製程式碼
匹配14*
的手機號:
/^(1)4[5-9](\d){8}$/.test(14531121989)
複製程式碼
匹配15*
的手機號:
/^(1)5[^4]{9}$/.test(15531121989)
複製程式碼
匹配16*
的手機號:
/^(1)66(\d){8}$/.test(16631121989)
複製程式碼
匹配17*
的手機號:
/^(1)7[0-8](\d){8}$/.test(17199121989)
複製程式碼
匹配18*
的手機號:
/^(1)8(\d){9}$/.test(18131121989)
複製程式碼
匹配19*
的手機號:
/^(1)9[8-9](\d){8}$/.test(19831121989)
複製程式碼
匹配所有手機號:
/^((1)3(\d){9}$)|(^(1)4[5-9](\d){8}$)|(^(1)5[^4]{9}$)|(^(1)66(\d){8}$)|(^(1)7[0-8](\d){8}$)|(^(1)8(\d){9}$)|(^(1)9[8-9](\d){8}$)/.test(16961121989)
複製程式碼
(2)郵箱
-
126規則:6~18個字元,可使用字母、數字、下劃線,需以字母開頭
-
163規則:6~18個字元,可使用字母、數字、下劃線,需以字母開頭 允許手機號
-
qq郵箱:數字5-10個數字
-
新浪郵箱規則:4-16個字元,可使用英文小寫,數字,下劃線,下劃線不可在首位
-
搜狐郵箱規則:4-16位,英文、數字、下劃線,小寫字母開頭
匹配126郵箱:
/((^([a-zA-Z]))(\w){5,17})@126.com$/.test("AA3333333333333333@126.com")
複製程式碼
匹配163郵箱:
/((^([a-zA-Z]))(\w){5,17}$)|(^(1)(3(\d){9}$)|(4[5-9](\d){8}$)|(5[^4]{9})|(66(\d){8})|(7[0-8](\d){8})|(8(\d){9}$)|(9[8-9](\d){8}$))@163.com$/.test("15132221989@163.com")
複製程式碼
匹配qq郵箱:
/(^[1-9]){5,10}@qq.com$/.test("115511@qq.com")
複製程式碼
匹配新浪郵箱:
/^[a-z0-9]([a-z0-9_]{3,15})@sina.(com)|(cn)$/.test('223dddddddaddw22@sina.com')
複製程式碼
匹配搜孤郵箱:
/(^[a-z])(\w){3,15}@sohu.com$/.test("dddddddfw@sohu.com")
複製程式碼
(2)中文
/^[\u4e00-\u9fa5]$/g.test("我")
複製程式碼
(3)國內郵政編碼
/^[0-9]{6}$/.test(100000)
複製程式碼
。。。。。未完待續
作者:晴天de雨滴
出處:https://juejin.im/post/5b0cf331f265da0905017b48
版權所有,歡迎保留原文連結進行轉載:希望看到我的最新文章的可以新增下關注哦!)
複製程式碼