【愣锤笔记】一支穿云箭、正则来相见

摘要：表示进行多行匹配。如果正则表达式中含有子表达式，那么该数组后续的项依次为匹配到的第一个子表达式的匹配结果，第二个第个。关于正则方法有一点必须要提，很容易导致错误的情况。这时候直接使用该正则表达式对进行方法调用，却返回了。匹配前一项至少次。

有人说，一行正则抵得上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拼接