速學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.正則表示式沒有技巧，多練習就好。