摘要：可以使用元字符來(lái)構(gòu)建一個(gè)簡(jiǎn)單的類，所謂類是指符合某些特征的對(duì)象，一個(gè)泛指，而不是特指某個(gè)字符，例如表達(dá)式把字符或或歸為一類，表達(dá)式可以匹配這類的字符，即匹配中的，但是是取反的意思。

正則表達(dá)式不管是前后端開(kāi)發(fā)，都是很容易碰到的痛點(diǎn)，就像前女友一樣時(shí)不時(shí)的讓你這么痛一下，最近抽空重新學(xué)習(xí)了下js里面的正則表達(dá)式，隨記之。
正常水平本文閱讀需要10分鐘即可，10分鐘回顧知識(shí)點(diǎn)鞏固一下基礎(chǔ)。

1. 實(shí)例化兩種方式

 var reg = /is/g;  // 自變量
 var reg = new RegExp("is","g");  // 對(duì)象實(shí)例化方式，好處是可以傳遞變量進(jìn)來(lái)

2. 修飾符 或者叫做 對(duì)象只讀屬性

global：是否全文搜索，默認(rèn)false  reg.global

ignoreCase：是否大小寫(xiě)敏感，默認(rèn)是false  reg.ignoreCase

multiline：多行搜索，默認(rèn)值是false

lastIndex：當(dāng)前表達(dá)式匹配內(nèi)容的最后一個(gè)字符的下一個(gè)位置

source：正則表達(dá)式的文本字符串

這些屬性我們可以在正則對(duì)象的實(shí)例化對(duì)象身上看的到，也是我們正則表達(dá)式的修飾符號(hào)。

3. 常見(jiàn)的表達(dá)式模式

[abc]    查找方括號(hào)之間的任何字符。
[0-9]    查找任何從 0 至 9 的數(shù)字。
(x|y)    查找任何以 | 分隔的選項(xiàng)。

4. 元字符

（1）**原義文本字符**：代表它原來(lái)含義的字符 例如：abc、123
（2）**元字符**：在正則表達(dá)式中有特殊意義的非字母字符 例如：表示匹配單詞邊界，
（3） 在正則表達(dá)式中具體特殊含義的字符：* + ? $ ^ .  () {} []

5. 字符類

一般情況下正則表達(dá)式一個(gè)字符對(duì)應(yīng)字符串一個(gè)字符， 表達(dá)式 ab 的含義是： 一個(gè)字母a一個(gè)字母b加一個(gè)水平制表符 回車 換行。

可以使用元字符[]來(lái)構(gòu)建一個(gè)簡(jiǎn)單的【類】，所謂類是指符合某些特征的對(duì)象，一個(gè)泛指，而不是特指某個(gè)字符，例如表達(dá)式[abc]：把字符 a 或 b 或 c 歸為一類，表達(dá)式可以匹配這類的字符，即匹配abc中的，但是 [^abc] 是取反的意思。

6. 范圍類

正則表達(dá)式提供了范圍類，可以使用[a-z]來(lái)連接兩個(gè)字符類表示從a到z的任意字符，這是一個(gè)閉區(qū)間，也就是包含a和z;
可以進(jìn)行連寫(xiě)：[a-zA-Z]，但是如果同時(shí)范圍內(nèi)包含字符"-"：如[0-9-] ："2012-08-08".replace(/[0-9-]/,"");

7： 預(yù)定義類 匹配常見(jiàn)的字符類

.  等價(jià)于 [^
] 表示除了回車符和換行符之外的所有的字符

d 等價(jià)于 [0-9] 數(shù)字字符 d:digit

D [^0-9] 非數(shù)字字符

s 等價(jià)于 [	
x0Bf
] 空白符 s:space

S 非空白符號(hào)

w 等價(jià)于 [a-zA-Z_0-9] 單詞字符（字母、數(shù)字下劃線） w:word


邊界匹配
  ^ 以XXX開(kāi)始
  $ 以XXX結(jié)束
   單詞邊界
  B 非單詞邊界

8 量詞: 作用于緊挨著的字母，并不是整個(gè)單詞，需要分組才能拿到整個(gè)單詞

？ 出現(xiàn)0或1次（最多1次）

+  出現(xiàn)1或多次（至少1次）

*  出現(xiàn)0或多次（任意次）

{n}  出現(xiàn)n次

{n，m}  出現(xiàn)n到m次

{n，}  至少出現(xiàn)n次

量詞放在元字符后面，如d+

9：兩種模式

**貪婪模式**：盡可能多地匹配，直到匹配失敗 即匹配過(guò)程中有多個(gè)條件符合的話，會(huì)選擇最多的那一種

**非貪婪模式**：讓正則表達(dá)式盡可能少的匹配，一旦成功匹配則不再繼續(xù)嘗試，**在【量詞】后面加上【?】即可**


 eg: "12345678".replace(/d{3,6}/g,"X")  "X78"貪婪模式：盡可能多的匹配

    "12345678".replace(/d{3,6}?/g,"X") "XX78"非貪婪模式：盡可能少的匹配

10 分組

（1） 使用（）可以達(dá)到分組的功能，使量詞作用于分組 （Byron）{3}，如果直接Byron{3}則匹配到的三Byronnn。 默認(rèn)是貪婪的捕獲性質(zhì)的分組。

 例子：小寫(xiě)字母連續(xù)出現(xiàn)3次
"a1b2c3d4".replace(/[a-z]d{3}/g,"Q");  //"a1b2c3d4"
"a1b2c3d4".replace(/([a-z]d){3}/g,"Q"); //"Qd4"


// 通過(guò)$1 _ 取到捕獲到的值。
var str = "hello world";            
var pattern = /([a-z]+)s([a-z]+)/; 
console.log(RegExp.$1) //"hello" 第一個(gè)分組([a-z]+)的值


// 捕獲性的分組
var str1 = "000aaa111";             
var pattern = /([a-z]+)(d+)/; //捕獲性分組匹配
var arr = pattern.exec(str1);  
console.log(arr) // ["aaa111","aaa","111"]   結(jié)果子串也獲取到了，這并不是我們想要的結(jié)果

（2）. 使用 將正則表達(dá)式分成前后兩部分 【或 |】

 "ByrCasperByronsper".replace(/Byr(on|Ca)sper/g,"Q"); // "QQ"

(3).反向引用 反向引用,捕獲必須是在分組的基礎(chǔ)之上進(jìn)行操作的，后續(xù)案例中還要補(bǔ)充這個(gè)點(diǎn)。

例如 2015-12-25 => 12/25/2015 在分組的基礎(chǔ)上，分組取值使用"$1 $2...."代表捕獲分組內(nèi)容。

（4）. 非捕獲性的分組,不希望捕獲某些分組，只需要在分組內(nèi)加上 ?:即可

例如"2015-07-09".replace(/(?:d{4})-(d{2})-(d{2})/g,"$2/$3/$1"); // "09/$3/07"

//非捕獲性分組
var str2 = "000aaa111";
var pattern2 = /(?:[a-z]+)(?:d+)/; //非捕獲性分組匹配
var arr2 = pattern2.exec(str2);  
console.log(arr2) //["aaa111"]  結(jié)果正確  

11 前瞻

js 不支持后顧 eg: 匹配到張三，而且還要看看他爹是不是叫李四

正則表達(dá)式從文本頭部向尾部開(kāi)始解析，文本尾部方向?yàn)椤扒啊保^部方向?yàn)椤昂蟆?/p>

前瞻：正則表達(dá)式匹配到規(guī)則的時(shí)候，向前檢查是否符合斷言，后顧/后瞻方向相反（javascript不支持）

 符合斷言：肯定/正向匹配      正向前瞻：exp(?=assert)
 不符合斷言：否定/負(fù)向匹配    負(fù)向前瞻：exp(?!assert)

很重要的一點(diǎn)是， 前瞻中斷言只作為判斷條件，不參與規(guī)則部分的操作

12 正則相關(guān)的一些方法

  test 不支持全局匹配
   RegExp.prototype = {

        test: 不支持全局匹配  re.test(str)  重點(diǎn)在于檢測(cè) 返回true/false
        : 返回?cái)?shù)組【匹配項(xiàng)目,有子正則的話輸出子匹配項(xiàng)目，具體哪一個(gè)開(kāi)始匹配index】
   }

   String.prototype = {
        search: 找不到返回-1  str.seach(re);
        match: 返回匹配到的數(shù)組  str.match(re)  如果沒(méi)有g(shù)只會(huì)匹配一次
        replace:
        split
   }

**(1) is替換**

const s = "this is a book".replace(/is/,"~");  // "this ~ a book"
const s1 = "this is a book".replace(/Bis/,"~");  // "th~ is a book"

**(2) 把http 并且結(jié)尾是jpg的url 刪除協(xié)議頭，即返回//...jpg** 

https://cdn.baidu.com/images/asdas.jpg

http://cdn.hexun.com/images/asdas.jpg

https://cdn.baidu.com/images/asdas.png

http://cdn.sohu.com/images/asdas.jpg

https://cdn.baidu.com/images/asdas.jpg

http://cdn.baidu.com/images/asdas.png

https://cdn.baidu.com/images/asdas.png

正則：`/^http:(//.+.jpg)$/gi`

(3) 把下面是日期的全部替換為： 月-日-年 

02-03-2006

test/07/sd

05-10-2015

16555/12/45

1253645/2131/34

05-15-1998


正則：str.replace( /^(d{4})[/-](d{2})[/-](d{2})$/ $2-$3-$1)

(4)

// 正向前瞻 
const s4 = "v3asd7*5sd".replace(/w(?=d)/g,"~");  // "~3as~7*5sd"

// 負(fù)向前瞻  注意匹配項(xiàng)  是分組的結(jié)果 注意為什么沒(méi)有使用全局匹配？
const s5 = "v3asd7*5sd".replace(/w(?!d)/,"~");  // "v~asd7*5sd"

（5）

// 非捕獲性的分組是不會(huì)作為匹配項(xiàng)返回的
const str_0 = "window 98 is ok 11";
const re_0 = /window (?=d)/g; // 干脆不會(huì)作為結(jié)果出現(xiàn)
const re_1 = /window (?:d+)/g; // 非捕獲性分組定義子表達(dá)式可以作為整體被修飾但是子表達(dá)式匹配結(jié)果不會(huì)被存儲(chǔ)。
const re_2 = /window (d+)/g;  // 會(huì)作為匹配項(xiàng)目出現(xiàn)在子

console.log( re_0.exec(str_0) );
console.log( re_1.exec(str_0) );
console.log( re_2.exec(str_0) );


結(jié)果是：
[ "window ", index: 0, input: "window 98 is ok 11" ]
[ "window 98", index: 0, input: "window 98 is ok 11" ]
[ "window 98", "98", index: 0, input: "window 98 is ok 11" ]

（6）
var str_img = "img1.jpg,img2.jpg,img3.bmp";
var str_re_1 = /(?:w+)(?=.jpg)/g;
var str_re_2 = /(?:w+)(?:.jpg)/g;


console.log( str_img.match(str_re_1) )  //[ "img1", "img2" ]
console.log( str_img.match(str_re_2) )  // [ "img1.jpg", "img2.jpg" ]

// 上面使用的是match但是看下面代碼執(zhí)行的結(jié)果
console.log( str_re_1.exec(str_img) );  輸出結(jié)果[ "img1", index: 0, input: "img1.jpg,img2.jpg,img3.bmp" ] 為什么不是全部的呢？

再看一下代碼
var result;
while ( (result= str_re_1.exec(str_img)) !=null ){
   console.log(str_re_1.lastIndex)
   console.log(result)
}

>> 執(zhí)行的結(jié)果是：

4
[ "img1", index: 0, input: "img1.jpg,img2.jpg,img3.bmp" ]
13
[ "img2", index: 9, input: "img1.jpg,img2.jpg,img3.bmp" ]


總結(jié)出，exec 不是全局的匹配結(jié)果

（7）手機(jī)號(hào)碼中間4位 ****
console.log(
  "15201095029".replace(/(?:d{4})(?=d{4}$)/g,function($,$1){
      return "****"
  })
);

（8）轉(zhuǎn)換為駝峰的寫(xiě)法
console.log(

  "app-com-up".replace(/-(w)/g,function($,$1){
     return $1.toUpperCase()
  })
);

（9）貪婪匹配
  .+是非貪婪匹配   
  .+?是貪婪匹配