一、 什么是正則表達式
1、 概述
<body>
<img src="1.png" alt="">
</body>
<script>
var img = document.querySelector('img');
img.onclick = function(){
if(this.src.indexOf("1.png") > 0){
this.src = "2.jpg";
}else{
this.src = "1.png";
}
}
</script>
以上代碼中，在判斷時，用到了 標準庫中 string 對象的indexOf()方法；
用于確定一個字符串在另一個字符串中的位置，返回一個整數，表示匹配開始的位置。如果返回-1，就表示未匹配；
由此可以看出，indexOf的作用就是查找字符串；
而在真實的項目開發(fā)中，字符串的查找操作，是非常普遍的；
比如，判斷密碼中是否有數字及字母、手機號是否為11為數字等等……
要完成這些復雜的查找操作，我們需要借助另外的工具，這就是我們要學習的 正則表達式；
正則表達式(regular expression)描述了一種字符串匹配的模式，可以用來檢查一個串是否含有某種子串、
將匹配的子串做替換或者從某個串中取出符合某個條件的子串等。
每一門計算機編程語言，都支持正則表達式
正則表達式都能幫我們做什么？
數據隱藏（188****520 李先生）
數據采集（數據爬蟲）
數據過濾（論壇敏感詞過濾）
數據驗證（表單驗證、手機號碼、郵箱地址...）
2、 入門
驗證一個字符串中是否有數字 8 ；
var t = 'sda43645dfgkl';
//定義一個正則
var reg = /8/;
//判斷字符串是否符合表達式的定義
alert(reg.test(t)); //false
以上代碼中，字符串中沒有數字 8 ,因此檢測結果為 flase ;
var t = 'sda43645dfgkl';
//定義一個正則
var reg = /\d/;
//判斷字符串是否符合表達式的定義
alert(reg.test(t)); //true
\d 是 字符簇 ，表示0-9的數字； 后面講解什么是 字符簇
二、 在JavaScript中使用正則
1、 創(chuàng)建正則對象
1：字面量寫法-以斜杠表示開始和結束； var regex = /xyz/;
2：內置構造函數生成-通過實例化得到對象；var regex = new RegExp('xyz');
上面兩種寫法是等價的，都新建了一個內容為 xyz 的正則表達式對象。
var t = 'sda43645dfgkl';
var reg = /\d/; //字面量
var reg = new RegExp(/\d/); //構造函數
console.log(reg.test(t));
考慮到書寫的便利和直觀，實際應用中，基本上都采用字面量的寫法。
2、 正則對象的方法
test(str) ：判斷字符串中是否具有指定模式的子串，返回結果是一個布爾類型的值;
**exec(str) **：返回字符串中指定模式的子串，一次只能獲取一個與之匹配的結果;
<body>
<input type="text" id="inp">
<input type="button" id="btu" value="匹配">
</body>
<script>
var btu = document.querySelector('#btu');
btu.onclick = function(){
var t = document.querySelector('#inp').value;
var reg = /\d\d\d/;
console.log(reg.test(t));//返回是否匹配成功的布爾值
console.log(reg.exec(t));//返回匹配后的結果，匹配失敗返回null
}
</script>
3、 String對象的方法
search(reg) ：與indexOf非常類似，返回指定模式的子串在字符串首次出現的位置
match(reg) ：以數組的形式返回指定模式的字符串，可以返回所有匹配的結果
replace(reg,’替換后的字符’) ：把指定模式的子串進行替換操作
split(reg) ：以指定模式分割字符串，返回結果為數組
<body>
<input type="text" id="inp">
<input type="button" id="btu" value="匹配">
</body>
<script>
var btu = document.querySelector('#btu');
btu.onclick = function(){
var t = document.querySelector('#inp').value;
var reg = /\d\d\d/;
//返回第一次出現符合的字符串的位置
console.log(t.search(reg));
//數組形式返回符合規(guī)則的字符串,使用g則返回全部匹配結果
console.log(t.match(reg));
//替換符合規(guī)則的字符串，使用g則全部替換
console.log(t.replace(reg,'***'));
//以規(guī)則為分割標志，分割整個字符串，以數組形式返回分割結果
console.log(t.split(reg));
}
</script>
三、幾個重要的概念
子表達式
在正則表達式中，通過一對圓括號括起來的內容，我們就稱之為“子表達式”。如：
var reg = /\d(\d)\d/gi;
捕獲
在正則表達式中，子表達式匹配到相應的內容時，系統(tǒng)會自動捕獲這個行為，
然后將子表達式匹配到的內容放入系統(tǒng)的緩存區(qū)中。我們把這個過程就稱之為“捕獲”。
反向引用
在正則表達式中，我們可以使用\n（n>0，正整數，代表系統(tǒng)中的緩沖區(qū)編號）
來獲取緩沖區(qū)中的內容，我們把這個過程就稱之為“反向引用”。
這些比較重要的概念，在什么情況下可能被用到？
例：查找連續(xù)的相同的四個數字，如:1111、6666
var str = 'gh2396666j98889';
// 1:子表達式匹配數組
// 2:發(fā)生捕獲行為，把子表達式匹配的結果放入緩存區(qū)
// 3:使用反向引用獲取緩存中的結果進行匹配
var reg = /(\d)\1\1\1/;
console.log(str.match(reg));
練習
例1：查找連續(xù)的四個數字，如：3569
答：var reg = /\d\d\d\d/gi;
例2：查找數字，如：1221,3443
答：var reg = /(\d)(\d)\2\1/gi;
例3：查找字符，如：AABB,TTMM
（提示：在正則表達式中，通過[A-Z]匹配A-Z中的任一字符）
答：var reg = /([A-Z])\1( [A-Z])\2/g;
例4：查找連續(xù)相同的四個數字或四個字符
（提示：在正則表達式中，通過[0-9a-z]）
答：var reg = /([0-9a-z])\1\1\1/gi;
四、 編寫正則表達式
1、 正則表達式組成
正則表達式是由普通字符（例如字符 a 到 z）以及特殊字符（稱為元字符）組成的文字模式。
正則表達式作為一個模板，將某個字符模式與所搜索的字符串進行匹配。
正則表達式三步走
① 匹配符（查什么）
② 限定符（查多少）
③ 定位符（從哪查）
2、 匹配符（查什么）
匹配符：字符匹配符用于匹配某個或某些字符；
前面用到的 \d 就是匹配一個 0-9 的數字
在正則表達式中，通過一對中括號括起來的內容，我們就稱之為“字符簇”。
字符簇代表的是一個范圍，但是匹配時，只能匹配某個范圍中固定的結果。
| 字符簇 | 含義 |
|---|---|
| [a-z] | 匹配字符a到字符z之間的任一字符 |
| [A-Z] | 匹配字符A到字符Z之間的任一字符 |
| [0-9] | 匹配數字0到9之間的任一數字 |
| [0-9a-z] | 匹配數字0到9或字符a到字符z之間的任一字符 |
| [0-9a-zA-Z] | 匹配數字0到9或字符a到字符z或字符A到字符Z之間的任一字符 |
| [abcd] | 匹配字符a或字符b或字符c或字符d |
| [1234] | 匹配數字1或數字2或數字3或數字4 |
在字符簇中，通過一個^(脫字符)來表示取反的含義。
| 字符簇 | 含義 |
|---|---|
| [^a-z] | 匹配除字符a到字符z以外的任一字符 |
| [^0-9] | 匹配除數字0到9以外的任一字符 |
| [^abcd] | 匹配除a、b、c、d以外的任一字符 |
元字符 (常用)
| 字符簇 | 含義 |
|---|---|
| \d | 匹配一個數字字符，與使用[0-9]等價 |
| \D | 匹配一個非數字字符，還可以使 [^0-9] |
| \w | 匹配包括下劃線的任何字母數字下劃線字符，還可以使用 [0-9a-zA-Z_] |
| \W | 匹配任何非字母數字下劃線字符，還可以使用[^\w] |
| \s | 匹配任何空白字符 |
| \S | 匹配任何非空白字符，還可以使用[^\s] |
| . | 匹配除 "\n" (換行符) 之外的任何單個字符 |
| [\u4e00-\u9fa5] | 匹配中文 字符 |
var str = 'gh23.9h西688嶺8老4濕9';
var reg = /\w/;//匹配數字字母下劃線
console.log(str.match(reg));
var reg = /[4-8]/;//匹配4-8的數字
console.log(str.match(reg));
var reg = /./;//匹配除 "\n" 之外的任何單個字符
console.log(str.match(reg));
var reg = /./;//匹配除 "\n" 之外的任何單個字符
console.log(str.match(reg));
var reg = /[\u4e00-\u9fa5]/; //匹配中文字符中的任一字符
console.log(str.match(reg));
3、 限定符（查多少）
什么是限定符？
限定符可以指定正則表達式的一個給定字符必須要出現多少次才能滿足匹配。
* ：匹配前面的子表達式零次或多次，0到多
+ ：匹配前面的子表達式一次或多次，1到多
? ：匹配前面的子表達式零次或一次，0或1
{n} ：匹配確定的 n 次
{n,} ：至少匹配 n 次
{n,m} ：最少匹配 n 次且最多匹配 m 次
對QQ號碼進行校驗要求5~11位,不能以0開頭,只能是數字
var str = '我的QQ20869921366666666666，nsd你的是6726832618嗎？';
var reg = /[1-9]\d{4,10}/g;
console.log(str.match(reg));
我們會發(fā)現以上代碼運行結果中，默認優(yōu)先配到 13 位，在對后面的進行匹配；
為什么不是優(yōu)先匹配 5 位后，在對后面的進行匹配呢？
因為在正則表達式中，默認情況下，能匹配多的就不匹配少的，
我們把這種匹配模式就稱之為 貪婪匹配,也叫做 貪婪模式
所有的正則表達式，默認情況下采用的都是貪婪匹配原則。
如果在限定符的后面添加一個問號？，
那我們的貪婪匹配原則就會轉化為非貪婪匹配原則，優(yōu)先匹配少的，也叫惰性匹配；
var str = '我的QQ20869921366666666666，nsd你的是6726832618嗎？';
//非貪婪模式匹配，
var reg = /[1-9]\d{4,12}?/g;
console.log(str.match(reg));
4、 定位符（從哪查）
編寫正則表達式，匹配手機號碼？（注冊功能）
純數字
第一位必須是1開頭
第二位必須是3、4、5、7、8
第三位~第十一只要是數字即可
var str = 'lsd15309873475';
var reg = /1[34578]\d{9}/;
console.log(reg.test(str));//結果true
檢測結果為真，但是，字符串并不是一個手機號；
正則表達式只會到字符串去尋找是否有與之匹配的結果，如果有，
就認為是正確的，而不考慮其字符串本身是否合法。
如何解決以上問題呢？
定位符可以將一個正則表達式固定在一行的開始或結束。
也可以創(chuàng)建只在單詞內或只在單詞的開始或結尾處出現的正則表達式。
^ (脫字符)：匹配輸入字符串的開始位置
$ ：匹配輸入字符串的結束位置
\b ：匹配一個單詞邊界
\B ：匹配非單詞邊界
注意: ^ 放在字符簇中是取反的意思，放在整個表達式中是開始位置；
var str = 'lsd15309873475';
var reg = /^1[34578]\d{9}$/;
console.log(reg.test(str));//false
var str = 'i am zhangsan';
//an必須是一個完整的單詞
var reg = /\ban\b/;
console.log(str.match(reg));
//an不能是單詞的開始，只能是單詞的結束
var reg = /\Ban\b/;
console.log(str.match(reg));
5、 匹配模式 & 修飾符
匹配模式也就修飾符：
表示正則匹配的附加規(guī)則，放在正則模式的最尾部。
修飾符可以單個使用，也可以多個一起使用。
在正則表達式中，匹配模式常用的有兩種形式：
g ：global縮寫，代表全局匹配，匹配出所有滿足條件的結果，不加g第一次匹配成功后，正則對象就停止向下匹配;
i ：ignore縮寫，代表忽略大小寫，匹配時，會自動忽略字符串的大小寫
語法：
var reg = /正則表達式/匹配模式;
var t = 'sda43645dfgkl';
var reg = /Da/; //匹配結果為false
var reg = /Da/i; //匹配結果為ture
console.log(reg.test(t));
6、 轉義字符
因為在正則表達式中 .(點) + \ 等是屬于表達式的一部分，但是我們在匹配時，字符串中也需要匹配
這些特殊字符，所以，我們必須使用 *反斜杠* 對某些特殊字符進行轉義；
需要轉義的字符：
點號.
小括號()
中括號[]
左斜杠/
右斜杠\
選擇匹配符|
*
?
{}
+
$
^
匹配一個合法的網址URL：
var str = 'http://xiling.me';
// 對于 . / 都必須轉義匹配
var reg = /\w+:\/\/\w+\.\w+/;
console.log(str.match(reg));
使用正則表達式驗證郵箱是否合法
var str = 'qq@qq.com';
var reg = /\w+@[0-9a-z]+(\.[0-9a-z]{2,6})+/;
console.log(str.match(reg));
7、 或者的用法
查找所有屬于蘋果旗下的產品
var str = 'ipad,iphone,imac,ipod,iamsorry';
var reg = /\bi(pad|phone|mac|pod)\b/g;
console.log(str.match(reg));
