正则系列——JavaScript正则表达式基础语法巩固篇

上一章内容：正则表达式实战篇

知识回顾

前2章分别学习了正则表达式入门技巧，以及遇到正则需求该如何去分析问题，还有正则表达式实战的一些场景解释。

这一章内容偏向理论，推荐你点击开头的链接前往前2章节学习一下入门技巧，然后再看这一章内容，就不会那么迷茫了。我一向相信工程师要先学会做事，才能学懂理论，先学理论，再学做事的通常是纸上谈兵，一遇到实战就懵逼。

基础语法巩固

正则表达式引擎根据正则去匹配字符的时候，是通过检查索引的方式。

RegExp构造函数

JavaScript正则表达式有2种写法：比较常用的是第二种，第一种写法在一些replace替换时涉及到变量的时候，可能会用到，后面例子如果有这个需求，再说。

1、RegExp
下面其实是同一种写法，一个用 "正则"，一个是用 /正则/，注意使用字符串写法的时候，特殊字符要进行转义。

var r = new RegExp("\\d+",'g') //r.test('123') true
//或者是
var r = new RegExp(/\d+/,'g')  //r.test('123') true

如果你没有转义特殊字符，那么正则就是错的，比如：

//我错了
var r = new RegExp("\d+",'g') //r.test('123') false

2、/正则/
你还可以直接使用 /正则/ 的写法。

/\d+/g.test('123') // true

和RegExp有关的几个方法，compile()、exec()、test()，与之相对于的是search()、match()、replace()、split()，为了好记，我把她们叫做 “3妻4妾”。

3妻是RegExp的原配方法，4妾是字符串方法。

1、3妻
原配就是好，可以直接使用正则表达式调用它。

var r = /2/
r.compile(r) //重新编译正则，这个不太常用
r.exec('123') //获取正则匹配的字符所在的位置
r.test('123') //最受欢迎的妻子，判断字符串是否符合某个正则，true 或者 false

2、4妾
4妾不是RegExp的方法，而是字符串的方法。在控制台输入 ''.__proto__ ，就能看到字符串原型中的这4个方法，又因为她们都和正则有关，所以叫做RegExp的4个小妾。

var r = /2/
'123'.search(r) //返回匹配字符的位置，范围是0-n，如果不存在，则返回-1。
'123'.match(r) //返回数组，这个方法常用在提取字符串中的某些字符。
'123'.replace(r,'4') //最基本的用法是替换正则匹配到的字符串，还有一种高级用法，后面再讲。
'123'.split(r) //表示切割字符串，这里把2切割出来，'123'变成了["1","3"].
//通常我们用它来切割字符串里面的空格或者回车符，然后再map渲染。
'1 2\n3'.split(/[\s\n]/g).map(v => v) //["1","2","3"].map()

修饰符

JavaScript中常用的修饰符有3种，i、g、m，g你可能经常看得到。

'Aasb'.match(/a/i) //i表示忽略大小写，匹配出来的是第一个A
'Aasb'.match(/a/ig) //想要匹配所有的a，就需要加上g全局搜索 ["A","a"]
m: 多行匹配，具体用法不了解

元字符

“元”的含义是元始天尊，“元字符”是元始天尊制造的一个个基础符文，用这些基础符文可以组合出各种高级的正则表达式。

.：查找单个字符，除了换行和行结束符。
\w：查找字母和数字。
\d：查找数字。
\D：查找非数字字符。
\s：查找空白字符。
\S：查找非空白字符。
\b：匹配单词边界。
\B：匹配非单词边界。
\n：查找换行符。
\f：查找换页符。
\r：查找回车符。
\t：查找制表符。
\v：查找垂直制表符。

下面解释一下上面这些常用的元字符

查找单个字符，除了换行和行结束符。
换行符你可能知道，但是结束符是什么？在一个字符串最后，你肉眼看不到的地方，有一个结束符号，在101网站使用 /.*/ 测试一下就能看到了

'第一段\n第二段'.match(/./g) //["第","一","段","第","二","段"]

//使用.+之后，匹配出来的效果就和split切割一样了。
'第一段\n第二段'.match(/.+/g) //["第一段","第二段"]

查找字母和数字

'aA1'.match(/\w/g) // ["a","A","1"]
'aA1'.match(/\w+/g) // ["aA1"]

其他字符自己去101网站测试玩一下，很有趣的。

括号内的正则

我们经常看得到 []、()、{}这几种括号穿插在正则表达式中，让人眼花缭乱。但它的本质非常简单，很好理解。你需要注意 [^abc]中的 ^ 和写在/^abc$/的作用是不同的。

[abc]：查找方括号之间的任何字符。
[^abc]：查找任何不在方括号之间的字符。
[0-9]：查找任何从 0 至 9 的数字。
([0-9]|\d)：查找任何指定的选项。
[0-9]{1}：查找一次数字。

看几个实例

实例1：

实例2：

实例3：

实例4：

量词

量词的意思是次数，前面我们已经使用到了一些量词符号，比如 +、 ?、 *、 {n,m}、 ^x$、最后还有零宽断言 ?=n、?!n

n+：匹配任何包含至少一个 n 的字符串。
n*：匹配任何包含零个或多个 n 的字符串。
n?：匹配任何包含零个或一个 n 的字符串。
n{X}：匹配包含 X 个 n 的序列的字符串。
n{X,}：X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。
n{X,Y}：X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。
n{X,}：匹配包含至少 X 个 n 的序列的字符串。
n$：匹配任何结尾为 n 的字符串。
^n：匹配任何开头为 n 的字符串。
?=n：匹配任何其后紧接指定字符串 n 的字符串。
?!n：匹配任何其后没有紧接指定字符串 n 的字符串。

这一段内容没法用文字描述清楚，请自行在 https://regex101.com 测试吧，只有实践才能理解理论。当你练习的次数足够多了，之后，你会发现这些量词都不用刻意记住，凭着感觉就能随手写出来了。

总结

正则表达式理论知识点很多，这一章内容阅读起来像读天书，最重要的还是找到感觉，就像你第一次学习react、vue、angular的时候，完全找不到方向，慢慢的，写多了，突然有感觉了。正则还好，没有太多复杂的概念，就是符号多了点，常用的记住就行了。复杂的符号还是网上搜索吧，比如中文字符的正则，我真的记不住。。。