摘要：表示進行多行匹配。如果正則表達式中含有子表達式，那么該數組后續的項依次為匹配到的第一個子表達式的匹配結果，第二個第個。關于正則方法有一點必須要提，很容易導致錯誤的情況。這時候直接使用該正則表達式對進行方法調用，卻返回了。匹配前一項至少次。

有人說，一行正則抵得上100行代碼……

正則表達式，每門語言都有，在我們的js開發中，最常見的使用場景：一是表單驗證，像是登錄注冊啊，用戶輸入檢測啊，不管在前臺項目還是后臺管理系統，都會經常使用；二是，在開發一些重數據交互的后臺管理系統或者應用的時候，更是會大量的使用，各種字符匹配，表達式檢測等等。

正則本身知識點不是很多，但是由于各種字符意思容易忘記，所以需要經常復習，多使用就記住了。

// 通過RegExp構造函數創建
var regex1 = new RegExp("[a-z]", "g");
// 通過直接字面量創建
var regex2 = /[a-z]/g;

這兩種方式都可以創建正則表達式，以上兩種方式創建了一個等價的正則表達式，均為匹配字母a到z。但是日常開發中，基本都是通過直接字面量創建：兩個反斜杠之間為正則表達式，反斜杠后面跟著修飾符i、g、m。修飾符可寫可不寫，也可以同時寫多個，他們的意思分別是：

var str = "hello world 
 my name is LengChui."

可看到這個字符串中有一個 換行符，正常匹配時，到 就結束了，也就是只會匹配到這一行的結尾。但是如果加了m修飾符，會繼續往后面匹配，一直匹配到字符串的最終結尾。

當然了，修飾符可以同時寫多個，例如：var regex = /[a-z]/ig;表示匹配所有的字母a到z，且不區分大小寫。這樣，對于字符串"a123H"就會匹配到a和Z

所有的正則表達式都有test和exec這兩個方法。

test()方法：測試字符串中是否包含了匹配該正則表達式的子串，如果包含了這樣的子串，那么返回true，否則返回false

// 定義一個匹配hello字符串的正則表達式
var reg = /hello/g;
var str = "hello world";
// 如果字符串str中匹配到了hello字符串，則打印如下信息
if (reg.test(str)) {
    console.log("字符串str中含有hello子串")
}

這個方法相信在驗證用戶輸入內容的時候，會經常使用到。例如，相信很多人寫過類似下面的正則驗證用戶輸入值的合法性代碼：

// 點擊提交按鈕,驗證輸入值,提交ajax請求
document.getElementById("submitButton").addEventListener("click", function (event) {
    // 獲取用戶輸入的手機號
    var phoneNumber = document.getElementById("phone");
    // 驗證手機號格式的正則
    var regPhone = /^1[3|4|5|8]d{9}$/g;
    // 檢測輸入的合法性,進行錯誤提示
    if (!phoneNumber) {
        $tim("請輸入手機號！")
        return;
    }
    if (!regPhone.test(phoneNumber)) {
        $tip("手機號格式不正確，請重新輸入！");
        return;
    }
    // 如果驗證成功,提交ajax請求
    $.ajax(………………)
}, false);

exec方法：接收一個參數，即待檢測的字符串。它返回一個增強的數組對象，數組的第一項為匹配到的字符串。如果正則表達式中含有子表達式，那么該數組后續的項依次為匹配到的第一個子表達式的匹配結果，第二個……第n個。如果沒有匹配到任何內容，則返回null。

通過例子來說明exec的使用方法：

// 定義一個字符串
var str = "hello javascript, hello javaspring"
// 定義一個正則表達式,該表達式匹配任意java后跟任意大小寫字母的字符串
// 注意這里的正則表達式沒有加g，后面會說明exec的正則表達式加g與不加g的區別
var reg = /java([a-zA-Z]+)/;
// 調用exec方法
var execResult = reg.exec(str);
console.log(execResult)

看下最終的打印結果：

可以看到返回一個數組，數組的第一項為匹配到的結果，第二項為第一個子表達式的匹配結果，如果還有其他子表達式，會依次往后排。同時這個數組對象還有以下幾個屬性：

groups: undefined

index// 當前匹配結果的開始下標。這里匹配的javascript字符串的開始下標為6。

input // 待匹配的字符串，其實就是我們的這里的str字符串

注意上述正則表達式/java([a-zA-Z]+)/沒有加修飾符g，這意味著不需要全局匹配。這種情況下，exec()方法只會匹配依次便最終匹配結束了，那么如果繼續調用execResult = reg.exec(str);，則會重新開始匹配，即從字符串0的位置開始重新匹配并返回新的匹配結果。其結果肯定是一樣的。如下面例子：

var str = "hello javascript, hello javaspring"
var reg = /java([a-zA-Z]+)/;
// 第一次匹配調用并打印結果
var execResult = reg.exec(str);
console.log(execResult);
// 重新調用并打印結果
execResult = reg.exec(str);
console.log(execResult);

可以看到兩次調用的匹配結果是一樣的。這里不禁就有人說了，那不是廢話了，調用同一個表達式，結果不就一樣嘛。然而，還真不是。在介紹這個之前，我們先簡單提一下正則表達式的實例屬性，告訴了我們該正則表達式的一些基本信息。這個不需要記，了解一下即可：

var reg2 = /a/igm; // 定義一個不區分大小寫、全局匹配、多行匹配字符串a的正則表達式
console.dir(reg2) // 打印出該對象

下表中列出了所有的正則表達式實例屬性。

了解了這個之后，我們回過頭來繼續說exec()方法。在調用exec()方法的正則表達式沒有加修飾符g，即不是全局匹配的模式下，每次調用exec()之后，本次的正則匹配也就最終結束了，注意是最終結束了。下次該正則表達式再次調用exec()方法時會從字符串開頭開始匹配，可以立即為開始了一次新的正則匹配。

那么如果調用exec()方法的正則表達式是全局匹配的話(加了修飾符g)，該正則表達式每次調用exec()方法結束后，其實例屬性lastIndex都會指向本次匹配結果字符串后面一個字符的位置，直到匹配結果返回null，即沒有匹配到任何結果的時候，才會將其lastIndex屬性重置為0。繼續看這個例子演示：

var str = "hello javascript, hello javaspring"
// 定義匹配任何java后跟任意大小寫字母的字符串，注意這里是全局匹配
var reg = /java([a-zA-Z]+)/g;

// 該正則表達式第一次調用exec()方法并打印匹配結果和其實例屬性lastIndex
var execResult = reg.exec(str);
console.log(execResult, reg.lastIndex);

// 第二次調用
execResult = reg.exec(str);
console.log(execResult, reg.lastIndex);

// 第三次調用
execResult = reg.exec(str);
console.log(execResult, reg.lastIndex);

從打印結果可以看出，第一次匹配到了字符串javascript，其開始下標為6，實例屬性lastIndex為16，即javascript字符串后面的一個字符“逗號”的位置下標。第二次調用的匹配結果為javaspring，lastIndex的值為34。第三次調用沒有匹配到任何結果，所以返回了null，其lastIndex的結果也被重置為了0。

關于正則方法exec()有一點必須要提，很容易導致錯誤的情況。當調用exec()方法的正則表達式是全局匹配的情況下，對一個字符串匹配后，如果沒有匹配到最終結果，即沒有返回null的情況下，使用該正則表達式對新字符串進行exec()方法調用時，切記一定要先將該正則表達式的實例屬性lastIndex重置為0。看例子：

var str = "hello javascript, hello javaspring"
var str2 = "javascript and html"

// 定義匹配任何java后跟任意大小寫字母的正則表達式，全局匹配
var reg = /java([a-zA-Z]+)/g;

// 使用該正則的exec()方法匹配字符串str
var execResult = reg.exec(str);
console.log(execResult, reg.lastIndex);

// 使用該正則的ecev()方法匹配字符串str2
execResult = reg.exec(str2);
console.log(execResult, reg.lastIndex);

從打印結果可以看出，對于str字符串的正則匹配時，正常返回了結果，其lastIndex的值為16，還并沒有最終匹配結束，lastIndex值也沒有重置為0。這時候直接使用該正則表達式對str2進行exec()方法調用，卻返回了null。為什么呢，正常應該也可以匹配到str2字符的javascript字符啊。這是因為，對str調用后，其lastIndex值被賦值為了16，那么下次對str2調用的時候，便從下標16開始調用，str2中從下標16開始匹配自然而然是沒有匹配到任何字符串。注意，正則表達式的實例屬性lastIndex是可讀可寫的屬性，所以為了避免這種情況，在對str2正則匹配前，先將其lastIndex屬性重置為0：

reg.lastIndex = 0;
execResult = reg.exec(str2);
console.log(execResult, reg.lastIndex);

所謂元字符，其實就是在正則表達式的不同上下文中有著特殊意義的標點符號，請看下面：

. * + ( ) $ /  ");

嗯~沒錯，就是這幾個字符，通過不同的組合可以幫我們構建出非常強大的正則表達式。注意，這些字符帶有特殊意義，如果就只是單純的項匹配這些字符，需要加/進行轉義，例如.就只是匹配一個點，沒有其他特殊意義。下面我們一一進行介紹。

. : 匹配除了換行符和回車之外的任何字符，eg： /./ 匹配一個除換行回車之外的任意字符；

[] :? 匹配方括號里面的任意字符。方括號內可以是1個字符也可以是多個字符。eg: [ab] 匹配字符a，也可以匹配字符b；[a- z] 可以匹配字母a到z任意一個，-表示到的意思；[0-9]可以匹配數字0到9；也可以混合使用[a-zA-Z0-9]可以匹配小寫字母a到z，大寫字母A-Z，可以匹配數字0-9；

[^] : 匹配除了方括號內^后面的任意字符，可以理解為[]的取反操作。eg: /[^ab]/ 匹配除了a和b以外的任意字符。?

| : 或，即匹配 | 左邊或者右邊的表達式。eg: /a|b/ 匹配字符a或者字符b

*? : 匹配0個或多個前面的表達式， eg: /a*/ 匹配0或者多個a，a、aa、aaa、aaaa等都是滿足匹配規則的。

+ ： 匹配1個或多個前面的表達式，和*類似，但是至少要滿足匹配一次。eg: /a+/ 可以匹配1個或多個a，隱藏a、aa、aaa等都是合法的，但是bcdf是不符合匹配規則的，因為沒有至少匹配到一個a。

");:? 匹配0和或1個前面的表達式，可以理解為前一項是可選的。和*與+類似，但是要注意三者的區別。

{n, m} : 匹配前一項n到m次，包含n次和m次。eg: /[0-9]{6,8}/ 可以匹配6到8位數字。

{n, } :? 匹配前一項至少n次。 eg： /[0-9]{11, }/ 至少匹配11位數字

{n} : 匹配前一項n次。 eg： /[0-9]{5}/? 匹配5位數字

需要注意的是：*和");可以匹配前一項0次，因此像類似 /a*/.test("bcdf") 是返回true的，因為他匹配到了0個a；而/a*/.exec("bcdf")也是返回了一個第一項是一個空字符串的數組，而不是返回null，也是因為匹配了0個a。

另一個需要注意的是，正則匹配默認都是貪婪匹配。什么意思呢？就是盡可能多的匹配，比如用/a+/來匹配字符串aaabbbb時，會匹配到aaa，即盡可能多匹配。類似的重復匹配時都是貪婪匹配的。然而可以使用這些元字符加上");/a+");再對aaabbbb匹配時，則只會匹配到一個a，其他的*");? {}"); ");同理。

: 和一些字符組合使用會有特殊的意義：

^ ：匹配字符串的開始位置，或多行匹配模式中（即加了修飾符m）每一行的開始位置

$ ： 匹配字符串的結束位置，或多行匹配模式下（即加了修飾符m）每一行的結束位置

^和$這兩個元字符，在日常開發中幾乎是最常見的了，幾乎大部分的正則表達式都是這種形式的：/^表達式$/。都知道是它的意思是匹配字符串的開始和結束為止，猛一看好像理解了，但是細細揣摩貌似又不知道到底是什么意思。下面我就細細說來：

這兩個字符和上面其他元字符不同的是，這個字符匹配的是位置，而不是具體匹配的某個字符。這么說，應該清晰一點了，所以/^表達式$/就是從字符串開頭的位置開始，一直到結束的位置，都必須滿足匹配規則才行。再次強調下，^和$匹配的都只是一個位置，位置，位置。

 : 匹配單詞邊界。這個也是用來匹配位置的，通俗的講，就是匹配區分單詞分割位置的。例如，兩個單詞之間的位置，第一個單詞前面的位置，最后一個單詞后面的位置，都是匹配的單詞位置。eg: /java/可以匹配單詞java，即匹配java字符兩邊都是單詞邊界的結果，對于字符串I love java very much則匹配成功，而字符串I love javascript very much則匹配不成功。因為第一句的java兩邊空格都是單詞邊界，而javascipt雖然包含了java單詞，但是只滿足左邊是單詞邊界，其子串java的右邊是script子串，而不是單詞邊界，所以不滿足兩邊都是單詞邊界的匹配規則。

console.log(/java/.test("java")) // true
console.log(/java/.test("javascript")) // false

B：匹配非單詞邊界，是的反義詞。eg：/Bscript/ 對于字符串javascript是可以匹配成功的，因為其子串script的左側是java字符串，不是單詞邊界。而對于字符串script則是不成功的，因為其左側什么都沒有，即左側就是一個單詞邊界。

console.log(/Bscript/.test("javascript")) // true
console.log(/Bscript/.test("script")) // false

// 沒有子表達式的正則exec()方法
var reg1 = /[a-z][0-9]/;
var str1 = "hello123";
console.log(reg1.exec(str1))

// 添加了子表達式的正則exec()方法		
var reg2 = /([a-z])([0-9])/;
var str2 = "hello123";
console.log(reg2.exec(str2))

// 子表達式嵌套的情況
var reg3 = /(([a-z])([0-9]))/;
var str3 = "hello123";
console.log(reg3.exec(str3))

// 需要匹配第一第二位都是數字，第三位和第一位必須相同，第四位和第二位必須相同的正則表達式
var reg4 = /(d)(d)12/;
// 打印為true，因第一位和第二位都是數字，第三位和第一的值相同，第四位和第二位的值也相同
console.log(reg4.test("1212")) // true
// 打印結果為false，因為第三位的值和第一位的不一樣
console.log(reg4.test("1232"))

// 需要匹配第一第二位都是數字，第三位和第二位必須相同
var reg4 = /(");false，因第一位和第二位都是數字，第三位和第二位的值不一樣
console.log(reg4.test("1212"))
// 打印結果為true，因為第三位的值和第二位的值相同
console.log(reg4.test("1232"))

"aaaa".match("b") // 返回null，因為沒有匹配到任何內容

console.log("abcd");.match(/a/)) 

// 不含有子表達式的全局匹配
console.log("1a2b3c4d5");.match(/[0-9]/g))

// 含有子表達式的全局匹配
console.log("1a2b3c4d5");.match(/[0-9]|(a)/g))

// 正則表達式不帶修飾符g
console.log("abc1234".replace(/[a-z]/, "0"))
// 正則表達式帶修飾符g
console.log("abc1234".replace(/[a-z]/g, "0"))

// 定義一個匹配一個abc字符后面跟著一個數字的正則表達式
// 并將匹配結果替換成該子表達式的結果
console.log("abc1234".replace(/abc(d)/g, "$1")) // 1234

console.log("abc1234".replace(/abc(d)/g, function(){ 
    return "hello"
}))
// 打印結果為hello234

"abc1234".replace(/abc(d)(d)/g, function(a,b,c,d,f){
    console.log(a,b,c,d,f)
})
// 打印結果為 abc12 1 2 0 abc1234

"abc1234abc567".replace(/abc(d)(d)/g, function(a,b,c,d,f){ 
    console.log(a,b,c,d,f)
})
// 下面是打印結果
abc12 1 2 0 abc1234abc567
abc56 5 6 7 abc1234abc567

// 參數為字符串時
console.log("abcd".search("d")) // 3

// 參數為正則表達式
console.log("abcd".search(/d/)) // 3

console.log("abcd".indexOf("d")) // 3

var str = "abcddadd"
// 只返回了第一個d字符的洗標，忽略修飾符g
console.log(str.search(/d/g)) // 依舊輸出了3

// 第二次調用，依舊輸出3，即忽略了lastIndex屬性
console.log(str.search(/d/g))

// 第一個參數為""時, 將按字符分割字符串
// 這在我們需要把字符串作為組數處理時非常有用
"asdfg".split("") // ["a", "s", "d", "f", "g"]
// 可以接收第二參數，作為返回后的數組長度
"asdfg".split("", 3) // ["a", "s", "d"]
// 以字符串s進行跟個
"asdfg".split("s") // ["a", "dfg"]
// 以正則表達式匹配結果進行分割
"asdfg".split(/s/) // ["a", "dfg"]

/*
 * 簡易解析url中鍵值對參數
 * @param url { String } 待解析的url
 * @return { key1: 1, key2: 2} 返回解析后的鍵值對的對象
 */
const parseQueryString = url => {
    if (!url) throw Error("缺少待解析url")
    let result = {}
    const query = url.split("");)[1]
    query && query.split("&").forEach(e => {
        const parts = e.split("=");
        result[parts[0]] = parts[1];
    })
    return result;
}

parseQueryString("www.baidu.com");) // {ke1: 1, key2: 2}

[1,2,3,4,5].join() // "1,2,3,4,5" // 默認逗號拼接
[1,2,3,4,5].join("a") // "1a2a3a4a5" // 自定義用字符a拼接