速學JS正則表示式
本文的知識腦圖:
一、正則表示式用來解決的問題
處理物件:字串技術背景:要是沒有正則表示式的話,表單匹配符合形式的字串很麻煩,需要的判斷分支很多,處理起來相當麻煩
技術目的:過濾不符合所定邏輯的字串,返回匹中的字串
案例:驗證電子郵件、電話號碼、身份證號等等
二、正則表示式規範形式
修飾符 | 全稱 | 作用 |
---|---|---|
g | global | 是否執行全域性匹配,一般都會有,沒有的話,會一直從開頭匹配 |
i | ignoreCase | 是否執行區分大小寫匹配,寫上代表不區分 |
m | multiline | 是否以多行匹配模式匹配,寫上代表考慮換行,注意和 g 區分 ^123 |
三、正則表示式的方法
<html> <head> <script> function test(){ var v = content.value; //檢索四個連續的數字 var myReg = /abc/gi; while(res=myReg.exec(v)){ window.alert("找到"+res[0]); } } </script> </head> <body> <form OnSubmit="test()"> <textarea id="content" rows="20" cols="30"> </textarea> <input type="submit" value="匹配"> </form> </body> </html>
執行結果:
<html> <head> <script> function test(){ var v = content.value; //檢索四個連續的數字 var myReg = /abc/gi; while(res=myReg.test(v)){ window.alert("找到"); } } </script> </head> <body> <form OnSubmit="test()"> <textarea id="content" rows="20" cols="30"> </textarea> <input type="submit" value="匹配"> </form> </body> </html>
(彈兩次)
注意:兩者區別在於後者只返回true或者false。前者比後者強大在,我能通過返回的值,確定匹配的次數以及內容是什麼,進而操作內容。
四、正則表示式模式內容
元字元 | 作用 | 形式 |
---|---|---|
限定符 {n} | 用於指定前面的字元和組合項連續出現多少次 | aa{3}:匹配的是aaaa a{3,4}先按照4配實在不夠再按照3配 a{2,}表示配>=2的字元,a出現一次不可以 |
限定符 + | 表示出現一次到任意多次 | /a+/gi 的效果和 /a{1,}/gi 相同 |
限定符 * | 表示出現 0 到任意多次 | /a1*/gi 能找到a,a任意多的1。規則還是按照多的來 /a*/gi的話會一直匹配中空 |
限定符 ? | 表示出現 0 到 1 次 | /a1?/gi 能匹配到a、a1 /a*/gi的話會一直匹配中空 |
字元匹配符[ ] | 匹配[ ]中給出的任意字元 | [abcd] /[a-z]/gi 匹配一個a-z中任意字元 /[^a-z]/gi匹配中不是a-z中任意一個字元 |
字元匹配符 \d \D \w \W \s \S . |
匹配0-9中任意一個數字 匹配中不是0-9中的 匹配中任意英文字母、數字下劃線 匹配的和上一個相反 匹配空格製表符 匹配的和上一個相反 匹配出除了\n之外的所有字元 |
相當於[0-9] 相當於[^0-9] 相當於[a-zA-Z0-9_ ] 相當於[^a-zA-Z0-9_ ] … … … |
選擇匹配符 | 或選擇 | /(joncyιzhangιhello)/gi |
定位符 ^ $ |
匹配目標字串的開始位置 匹配目標字串的結束位置 |
/^a/ /a$/ |
需要轉義的字元 | . * + $ ( ) ? { } [ ] ^ \ / |
var myReg = /abc/gi;
用反向引用:
var myReg = /(a)\1(b)\2/gi;
2. 匹配變長字串
a. 合理使用字元匹配符來指出要匹配的字元模式;
b. 用限定符來匹配字元重複出現的長度;
c. 第一個字元前有開始標誌 ,^ 匹配到的就是那裡;結束字元之後也有結束標誌,$匹配到的就是那裡;它們的使用很重
要。
d. 要注意轉義字元。
五、在字串的方法中使用正則表示式
var s1 = "hello world!"
alert(s1.search(/world/))
結果:
var v = content.value;
var myReg = /joncy/gi;
res=v.match(myReg)
window.alert("陣列:"+res);
var v = "hello java!";
var myReg = /java/gi;
res=v.replace(myReg,"joncy")
window.alert("結果:"+res);
總結一下:
1.注意這三個方法都是String的方法,呼叫時是字串物件打點呼叫;
2.search()方法返回的是一個索引值,是匹配到第一個表示式的位置;
3.match()方法和indexof方法類似,只不過返回的不是索引值,而是值本身,從執行結果可以看出他返回的陣列型別,這也是和exec()返回值不同的地方。
4.replace()的第一個引數是正則表示式,匹配中給定型別的字串之後,用第二個引數的字串替換。
六、正則表示式練習
/^[a-zA-Z].{3,15}/
解釋:開始便是定位符,所以從字串起始位置找。找的是起始位置之後必須是一個任意字母,這個字母在之後就是3-15個任意除\n之外的字元。因此這個表示式匹配的就是一行中必須以字母開頭的4-16個字元。
思考:如果在最後加上$有什麼不同?
/^[a-zA-Z0-9]{8,20}$/
解釋:起始定位,結束定位,中間8-20個字母或者數字。因此匹配的就是文字必須由8-20個字母或者字元長度組成
/^[1-9]\d{5}$/
解釋:郵政編碼的匹配
/^[1-9]\d{4,10}$ /
解釋:QQ號碼的匹配
/^1[3|4|5|8]\d{9}$ /
解釋:手機號碼的匹配
^(\d{6})(18|19|20)?(\d{2})([01]\d)([0123]\d)(\d{3})(\d|X|x)?$
解釋:18位身份證號的匹配
/^[A-Za-z][A-Za-z1-9_-]+$/
解釋:使用者名稱的匹配,字母開頭,由數字/字母/下劃線
^[a-zA-Z][a-zA-Z0-9]{0,}@(([a-zA-z0-9]-*){1,}\.){1,3}[a-zA-z\-]{1,}$
解釋:郵箱驗證
注意:
1.正則表示式並不是某種語言的產物, 把它看做一種技術;
2.反向引用中的子表示式是指正則表示式內容中的(…),反向引用引用的是內容;
3.正則表示式沒有技巧,多練習就好。