手摸手从小白到精通正则（略长）

什么是正则表达式

什么是正则表达式？在我刚入行的时候，可能就肤浅地认为它能够经过一堆奇奇怪怪的字符进行校验，每当有“复杂”的校验时就会去搜索对应的正则，ctrl c 和ctrl v一鼓作气。可是正则的应用不只仅局限于简单的校验，如今先来全面地看下正则表达式。

概念

正则表达式是对字符串操做的一种匹配模式，它由字符和元字符组成，而后对目标字符串进行匹配。

核心：匹配

从上面的概念能够看出正则表达式的核心就是匹配。

• 匹配什么？ 匹配目标字符串中对应的字符和位置。这句话灰常重要，必定要有这个意识，这对咱们后面的学习会颇有帮助。

• 匹配了能作什么？

  • 校验：也是咱们最经常使用到的，匹配到则存在。
  • 提取：当匹配到对应的字符时，能够将其提取出来以做他用。
  • 替换：当匹配到对应的字符时，能够将其替换为咱们想要的(例如：使用replace方法)，以此实现增删改功能。

总结

正则表达式是由字符和元字符组成的表达式，它能对目标字符串里的字符和位置进行匹配，并能对其进行校验，提取和替换。

入门正则匹配

大部分程序语言都是支持正则的，但做为一个前端，这里就主要以JS里的正则进行讲解。

Tip：下面咱们将正式进入正则表达式的编写环节。这里建议能够经过这个网站https://jex.im/regulex 来对本身的正则表达式进行分析，可视化地辅助编写。为了巩固你们的学习成果，强烈建议能够搭配经常使用正则表达式，进行学习。

建立正则表达式

在JavaScript中，你可使用如下两种方法来构建正则表达式：

• 1，使用正则表达式字面量，其由包含在斜杠之间的模式组成，栗子：

  const regex = /shotCat/;
  复制代码

• 2，使用RegExp对象的构造函数，栗子：

  const regex = new RegExp('shotCat');
  复制代码

上面两种写法是等价的，都是仅仅只能匹配shotCat。它们的主要区别是，第一种方法是在编译时建立正则表达式，第二种方法则是在运行时建立正则表达式。

注意： 不推荐第二种使用RegExp对象的构造函数，由于用构造函数会多写不少 \，很是不适合阅读，也不适合本身编写。

字符和元字符

从上一章的概念能够知道，正则表达式是由字符和元字符组成的。

• 字符：就是计算机字符编码，例如：咱们常见 数字、英文字母 等。
• 元字符： 这个是咱们要说的重点。元字符也被称为特殊字符。是一些用来表示特殊语义的字符。如\d表示0到9的数字。

正则里的元字符很是多很杂，不利于记忆理解。后面我会按常见使用对其进行分类讲解。若是你想查看全部的元字符能够查看 这里

匹配模式

前面说过正则表达式的核心就是匹配。

在正则里，匹配模式能够简单分为：

• 准确匹配：有时也称为简单匹配。由简单的数字和字母字符组成，没有元字符，纯粹就是一一对应的关系。例如：/shotcat/ 就只能匹配到 shotcat
• 模糊匹配：由元字符组成，能够匹配复杂的多个字符。例如：/^[0-9]*$/ 则能够匹配全部的数字。模糊匹配也分为两种：匹配的字符有多种可能和字符出现的次数有多种可能。
  • 纵向模糊匹配：正则匹配字符时，若是这个字符，不是惟一的，它能够是a，也能够是b，甚至更多其余可能中的一个。这种状况就被称为纵向模糊匹配。即须要匹配的字符不肯定，存在多种可能。为何叫纵向，举个栗子：咱们用手机设置时间时，数字选择时都会有一个纵向的滚轮让你选择，其实都是一个意思，纵向表示有多种可能。
  • 横向模糊匹配：正则匹配字符时，若是这个字符不是只出现一次，它可能出现屡次，甚至最少几回，最多几回。种状况就被称为横向模糊匹配。即须要匹配的字符重复次数不肯定，存在多种可能。为何叫横向，很简单，由于重复次数会有不少，横向长度就会拉长。

其实等你熟练了以后，其实不必记得这么多模式，这里细分出来，为的是你们刚开始学习的时候方便记忆，尤为是对应的元字符的记忆。

正则表达式的方法

在正式学习元字符以前，先熟悉下正则表达式可使用的方法，方便你们后面理解元字符的例子。

正则表达式能够被用于 RegExp 的 exec 和 test 方法以及 String 的 match、replace、search 和 split 方法。

来一张全家福表格：

方法	描述
exec	一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回 null）。
test	一个在字符串中测试是否匹配的RegExp方法，它返回 true 或 false。
match	一个在字符串中执行查找匹配的String方法，它返回一个数组，在未匹配到时会返回 null。
matchAll	一个在字符串中执行查找全部匹配的String方法，它返回一个迭代器（iterator）。
search	一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。
replace	一个在字符串中执行查找匹配的String方法，而且使用替换字符串替换掉匹配到的子字符串。
split	一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的 String 方法。

前面说过，正则能够帮助咱们对字符进行校验，提取，替换。下面就按这三种功能，将对应的方法进行分类：

• 校验：
  • test：RegExp方法，校验成功则返回 true 不然返回 false。也是最经常使用的校验方法。

    var regex = /shotcat/
    var result = re.test('my name is shotcat')
    console.log(result)
    // => true
    复制代码

  • search：RegExp方法，校验成功则返回匹配到的位置索引，失败则返回-1。

    var regex = /shotcat/
    var string = "my name is shotcat";
    var result = string.search(re)
    console.log( result );
    // => 11 若是失败则返回-1
    复制代码

• 提取：
  • exec：RegExp方法，返回一个数组，其中存放匹配的结果。若是未找到匹配，则返回值为 null。

    var regex = /shotcat/;
    var string = "my name is shotcat";
    var result = regex.exec(string); 
    console.log(result)
    // => ["shotcat", index: 11, input: "my name is shotcat", groups: undefined]
    复制代码

  • match：String方法，返回一个数组，其中存放匹配的结果。若是未找到匹配，则返回值为 null。

    var regex = /shotcat/
    var string = "my name is shotcat";
    var result = string.match(regex)
    console.log( result );
    // => ["shotcat", index: 11, input: "my name is shotcat", groups: undefined]
    复制代码

• 替换：
  • replace：String方法，使用提供的字符串替换掉匹配到的字符串。

    var regex = /shotcat/;
    var string = "my name is shotcat";
    var result = string.replace(regex, '彭于晏'); 
    console.log(result)
    // => ["shotcat", index: 11, input: "my name is shotcat", groups: undefined]
    复制代码

注意： 这里只是简单介绍了相关方法的使用，在最后”相关api使用注意“章节中会详细说明这些方法的注意点和坑。

元字符--字符集合 [abc]

栗子：正则/a[bcd]e/能够接受的匹配到结果有abe,ace,ade三种状况。其中[bcd]就被称为字符集合。它用方括号 [ ]表示。

字符集合用来匹配一个字符，该字符多是方括号中的任何一个字符。栗子：正则/a[bcd]e/表示字符a和e之间的这一个字符只能是[]里面的b或c或d。

表示范围 [a-z]

若是在字符集合里有多个字符，且具备必定顺序的状况下，咱们可使用破折号（-）来指定一个字符范围。例如：用/[a-z]/则能够匹配从a到z的全部英文小写字母。再例如：[123456abcdefGHIJKLM]，能够写成[1-6a-fG-M]。用连字符-来省略和简写。

反向字符集 [^abc]

当你在字符集合的第一位加上^（脱字符），表示反向的意思，即它匹配任何没有包含在方括号中的字符。例如[^abc]则匹配任何不是a或b或c的字符。注意：[^abc] 和[^a-c] 意思是同样的。

元字符--匹配单个字符

通常状况下匹配单个字符直接写出来就好了，可是若是须要匹配一些特殊字符，例如：空格，制表符，回车，换行等。这个时候就须要经过转义符来搭配进行使用，详见下表：

特殊字符	正则表达式	记忆方式
换行符	\n	new line
换页符	\f	form feed
回车符	\r	return
空白符	\s	space
制表符	\t	tab
垂直制表符	\v	vertical tab
回退符	[\b]	backspace,之因此使用[]符号是避免和\b重复

元字符--同时匹配多个字符

在正则里若是咱们要匹配多个字符能够用到[]或者[0-9]这种形式，可是这样仍然不够简洁。因此就有了下表中更加简洁高效的写法来匹配多个字符。

匹配区间	正则表达式	记忆方式
除了换行符以外的任何字符	.	句号,除了句子结束符
单个数字, [0-9]	\d	digit
除了[0-9]	\D	not digit
包括下划线在内的单个字符，[A-Za-z0-9_]	\w	word
非单字字符	\W	not word
匹配空白字符,包括空格、制表符、换页符和换行符	\s	space
匹配非空白字符	\S	not space

元字符--量词{m,n}

在匹配时，匹配到的字符常常会出现重复的状况，这时就须要经过量词对次数进行限制。

{m,n}形式

{m,n}是最多见最基础的量词形式，m 和 n 都是整数。匹配前面的字符至少m次，最多n次。

栗子：/a{1, 3}/表示a出现的次数最少一次，最多3次。 因此它并不匹配shotct中的任意字符。但能够匹配shotcat中的a，匹配shotcaat中的前两个a，也匹配shotcaaaaaaaat中的前三个a。注意: 当匹配shotcaaaaaaaat时，匹配的值是“aaa”，即便原始的字符串中有更多的a。

简写形式

一些经常使用的量词为了方便（偷懒），人们又规定了一些简写形式：

匹配规则	元字符	联想方式
具体只能多少次	{x}	{x}内只有一个数字。定死了，是几就只能是几回
至少min次	{min, }	左边min表示至少min次，右边没有则能够无限次
至多max次	{0, max}	左边数字为0表示至少0次，右边max表示至多max次
0次或1次	?	且问,此事有还无
0次或无数次	*	宇宙洪荒,辰宿列张：宇宙伊始，从无到有，最后星宿布满星空
1次或无数次	+	一加, +1
特定次数	{min, max}	能够想象成一个数轴，从一个点，到一个射线再到线段。min和max分别表示了左闭右闭区间的左界和右界

贪婪匹配与惰性匹配

• 贪婪匹配

  默认状况下，量词(包括简写形式)是贪婪的，即它们会尽量的多去匹配符合条件的字符(我全都要=。=)。仍是以前的栗子：/a{1,3}/，当它匹配“shotcaaaat”时，虽然a出现1次，2次，3次都是符合的，但它仍是会贪婪地尽量匹配最多的次数。因此它不会匹配到1个a时就结束，而是匹配获得3个a。

• 惰性匹配(也称非贪婪)

  有时候咱们不但愿量词那么贪婪，只但愿它匹配到恰好符合的次数就行，不要那么多。那怎么办呢，此时只需在后面加上一个问号?就行。举个栗子：/a{2,3}?/，当它匹配“shotcaaaat”时,因为此时是惰性匹配，因此它只会匹配获得2个a，而不会贪婪地要3个。

贪婪量词	惰性量词
{m,n}	{m,n}?
{m,}	{m,}?
?	??
+	+?
*	*?

元字符--多选分支x|y

多选分支能够帮助咱们匹配多种不一样的状况。例如：要匹配字符串 "shot" 和 "cat" 可使用 /shot|cat/其中经过管道符|将不一样备选字符或位置隔开。

注意：多选分具备惰性

多选分支是具备惰性的！即当前面的匹配上了，后面的就再也不尝试了。例如：当咱们用 /shot|shotcat/去匹配"shotcat"时，获得的结果只有shot。改为 /shotcat|cat/去匹配“shotcat”，就只会获得“shotcat”。

元字符--位置匹配

正则表达式是匹配模式，要么匹配字符，要么匹配位置。

上面介绍的元字符都是匹配字符，下面介绍匹配位置的元字符。

既然要匹配位置，那字符串里的位置是指什么，很简单，指的就是字符与字符之间的位置，或者是字符之间的空字符""。例如：字符串"cat"就有4个位置，分别为："1c2a3t4"。注意还包括字符开头和结尾的位置。

单词边界\b和非单词边界\B

• \b 是单词边界

  单词与非单词之间的位置，也就是 \w 与 \W 之间的位置。\b，其中b是boundary边界的首字母。 栗子1：

  var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');
  console.log(result);
  // "[#JS#] #Lesson_01#.#mp4#"
  复制代码

  栗子2：字符串"my name is shotcat."想要匹配到shotcat。可使用\bshotcat\b。这样匹配shotcat时，会确保它的先后两边是否都为单词与非单词之间的位置。

• \B是非单词边界

  很简单，就是单词边界的反面。具体来讲就是单词内部之间的位置，非单词内部之间的位置，非单词与开头和结尾的位置，即 \w 与 \w、 \W 与 \W、^(开头) 与 \W，\W 与 $(结尾) 之间的位置。

  栗子1：

  var result = "[JS] Lesson_01.mp4".replace(/\B/g, '#'); 
  console.log(result);
  // "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"
  复制代码

字符串边界^ $

说完单词的边界，再说更长的字符串边界。

^(脱字符)匹配字符串开头，在有修饰符m的多行匹配中也匹配行开头。 $(美圆符号)匹配字符串结尾，在有修饰符m的多行匹配中也匹配行结尾。

栗子1：

var result = "hello".replace(/^|$/g, '#'); 
console.log(result);
// "#hello#"
复制代码

栗子2：

var result = "I\nlove\njavascript".replace(/^|$/gm, '#'); 
console.log(result);
/* #I# #love# #javascript# */
复制代码

特定字符的先后位置

若是匹配的位置是在某个特定位置呢，某个特定字符的先后位置。这时就能够用到下面的元字符：

• 先行断言与后行断言

  • 先行断言：x(?=y) 当字符为y时，则匹配y前面的x。
  • 栗子：

  var result = "orangecat".replace(/orange(?=cat)/, 'shot'); 
  console.log(result);
  // => "shotcat"
  复制代码

  • 后行断言：(?<=y)x 当字符为y时，则匹配y后面的x。
  • 栗子：

  var result = "shotdog".replace(/(?<=shot)dog/, 'cat'); 
  console.log(result);
  // => "shotcat"
  复制代码

• 正向否认查找与反向否认查找

  • 正向否认查找：就是先行断言的反面，区别就是不等于y。x(?!y) 当字符不为y时，则匹配y前面的x。
  • 栗子：

  var result = "orangecat".replace(/orange(?!dog)/, 'shot'); 
  console.log(result);
  // => "shotcat"
  复制代码

  • 反向否认查找：就是后行断言的反面，区别就是不等于y。(?<!y)x 当字符不为y时，则匹配y后面的x。
  • 栗子：

  var result = "shotdog".replace(/(?<!long)dog/, 'cat'); 
  console.log(result);
  // => "shotcat"
  复制代码

位置匹配总结

最后，总结一下：

边界和标志	正则表达式	记忆方式
单词边界	\b	boundary
非单词边界	\B	not boundary
字符串开头	^	小头尖尖那么大个
字符串结尾	$	美圆符$
先行断言	x(?=y)	相似三元操做符，?=y 则找前面的x
后行断言	(?<=y)x	<寓意前面已经关上了，从后面找 。匹配到y 则找后面的x。
正向否认查找	x(?!y)	!表示否认，若是不是y 则匹配前面的x
反向否认查找	(?<!y)x	<寓意前面已经关上了，从后面找 。若是不是y 则匹配后面的x。

字符标志

字符标志并不属于元字符，它是对整个正则进行一些全局的操做。目前全部的标志仅有如下几个

标志	描述
g	全局搜索。在匹配到一个结果后，不会中止，直到将整个字符匹配完，获得全部结果
i	不区分大小写搜索。
m	多行搜索。会忽略换行符
s	容许 . 匹配换行符。
u	使用unicode码的模式进行匹配。
y	执行“粘性”搜索,匹配从目标字符串的当前位置开始，可使用y标志。

通常状况下用得最多的就是前三个g,i,m。标志不是元字符，使用的位置也不在一块儿：

var re = /\w+\s/g;

var re = new RegExp("\\w+\\s", "g");
复制代码

分组--正则中括号的做用 ( )

括号的做用：就是将正则表达式里的一部分用括号包裹起来，做为一个总体，也称为子表达式。 这样也就为表达式提供了分组功能。

分组和分支结构

• 分组：用括号包裹的正则为分组
  • 栗子：

    // /(ab)+/里ab用括号包裹，提供了分组的功能，表示ab做为一个总体至少出现一次
    var regex = /(ab)+/g;
    var string = "ababa abbb ababab";
    console.log( string.match(regex) ); 
    // => ["abab", "ab", "ababab"]
    复制代码

• 分支结构：前面讲过度支，这里的分支则是在括号内，也是用管道符|表示
  • 栗子：

    // /^I love (JavaScript|Regular Expression)$/ 包含两种状况 I love JavaScript 和 I love Regular Expression 均可以
    var regex = /^I love (JavaScript|Regular Expression)$/;
    console.log( regex.test("I love JavaScript") );
    console.log( regex.test("I love Regular Expression") );
    // => true
    // => true
    复制代码

分组引用

括号造成的分组还具备一个重要的功能 就是分组引用。就是你能够将括号里正则，匹配到的字符进行提取，以及替换的操做。

例如：咱们要用正则来匹配一个日期格式，yyyy-mm-dd，咱们能够写成分组形式的/(\d{4})-(\d{2})-(\d{2})/ 。这里三个括号包裹的就分别对应分组1，分组2，分组3。

提取数据

在介绍正则表达式方法时，介绍过提取数据，会用到两个方法：String 的 match 方法和正则的 exec 方法。

• match：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
console.log( string.match(regex) );
// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]
复制代码

match返回一个数组，第一个元素是总体匹配结果，而后是各个分组（括号里）匹配的内容，而后是匹配下标，最后是输入的文本。

• exec：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
console.log( regex.exec(string) ); 
// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]
复制代码

• 也能够用正则对象构造函数的全局属性 $1 - $9 来获取：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";

regex.test(string); // 正则操做便可，例如
//regex.exec(string);
//string.match(regex);

console.log(RegExp.$1); // "2017"
console.log(RegExp.$2); // "06"
console.log(RegExp.$3); // "12"
复制代码

替换数据

替换数据使用的则是String 的 replace 方法。

栗子：把yyyy-mm-dd格式，替换成mm/dd/yyyy

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, "$2/$3/$1");
console.log(result); 
// => "06/12/2017"

// String 的 replace 方法在第二个参数里面能够用 $1 - $9 来指代相应的分组
复制代码

也等价于：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, function(match, year, month, day) {
	return month + "/" + day + "/" + year;
});
console.log(result); 
// => "06/12/2017"
复制代码

反向引用

前面说到引用分组，它引用的分组是来自于匹配完后获得的结果。而反向引用也能够引用分组，只是它的分组来自于匹配阶段捕获到的分组。为了方便理解下面来看栗子：

要写一个正则支持匹配以下三种格式：

2016-06-12

2016/06/12

2016.06.12

咱们会想到这样写：

// 前面知道集合的写法，改写成 [-/.] ，表示这三种均可以
var regex = /\d{4}[-/.]\d{2}[-/.]\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // true

复制代码

可是"2016-06/12" 也被判断正确，这很显然不是咱们但愿的，咱们但愿第二个链接符，和第一个保持一致。这时候就须要用到反向引用了。咱们但愿第二个链接符和第一个匹配到的保持一致。首先须要把第一个[-/.]加上括号([-/.])，样才能方便引用。第二个链接符须要和第一个保持一致，这就须要引用它。这个时候就用\1，来表示第一个引用，同理\2和\3等表示第二和第三个医用。那么以前的正则就改成了/\d{4}([-/.])\d{2}\1\d{2}/。接着进行验证：

var regex = /\d{4}([-/.])\d{2}\1\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // false
// 结果彻底符合预期！
复制代码

这里提到的都是理想状况，若是状况更加复杂呢?

分组嵌套

若是出现分组嵌套（括号嵌套）的状况怎么办？这时候对分组序号的判断会产生干扰，到如今你确定也能感受出来，正则的匹配顺序是从左到右，一样分组也是这样的从左到右。咱们只需按左括号的顺序，依次判断分组便可。

栗子：

var regex = /^((\d)(\d(\d)))\1\2\3\4$/;
var string = "1231231233";
console.log( regex.test(string) ); // true
console.log( RegExp.$1 ); // 123 第一个分组
console.log( RegExp.$2 ); // 1 第二个分组
console.log( RegExp.$3 ); // 23 第三个分组
console.log( RegExp.$4 ); // 3 第四个分组
复制代码

从左往右分析分组：

第一个分组：((\d)(\d(\d))) 表示须要匹配三个连在一块儿的数字，其中嵌套了三个分组，匹配获得结果\1：123 第二个分组：(\d) 表示须要匹配一个数字，按照顺序匹配获得结果\2：1 第三个分组：(\d(\d)) 表示须要匹配两个数字，其中嵌套了一个分组，按照顺序匹配获得结果\3：23 第四个分组：(\d) 表示须要匹配一个数字，按照顺序匹配获得结果\4：3

\10表示什么

\10是表示第10个分组，仍是\1和0呢？

答案是第10个分组，虽然一个正则里出现\10比较罕见。

var regex = /(1)(2)(3)(4)(5)(6)(7)(8)(9)(#) \10+/;
var string = "123456789# ######"
console.log( regex.test(string) );
// => true
复制代码

引用不存在的分组

在正则里引用了不存在的分组时，此时正则不会报错，只是匹配反向引用的字符自己。例如\2，就匹配"\2"。

注意："\2"表示对"2"进行了转意。极可能转义的2 就不是数字2了，就变成其余字符了！因此咱们再使用时必定要注意不要引用不存在的分组！

非捕获分组

前面说到的分组均可以被引用，若是我不想被引用，则可使用非捕获分组(?:p)。由于引用是会在内存里开辟一个位置，因此非捕获分组还能够避免浪费内存。

var str = 'shotcat'
str.replace(/(shotca)(?:t)/, '$1,$2')
// 返回shotca,$2
// 因为使用了非捕获正则，因此第二个引用没有值，这里直接替换为$2
复制代码

正则匹配步骤与回溯

正则匹配步骤

咱们知道正则匹配的方向是从左到右的，那具体到每一个字符的匹配步骤是怎样的。咱们以一个例子来具体说明：

正则表达式/ab{1,3}bbc/ ,目标字符串为“abbbc”

2~5 ：此时正则已经匹配到b{1,3}，字符串来到了第三个b。这时候b{1,3}也已经获得知足了拿到了最多的3个b。

6：此时正则来到了b{1,3}后面的第一个b。这时候字符串开始对前面的c进行匹配。

7：发现匹配到了错误的c，可是正则并无报错，而是进行了回溯。即它又往回走回头路了。正则又回到了b{1,3}，字符串也从第三个b回退到了第二个b。发现2个b也是符合b{1,3}条件的。

8：此时正则又来到了b{1,3}后面的第一个b。字符串也把第三个b匹配给了它。

9：正则来到了b{1,3}后面的第二个b，字符串缺发现它前面又是c，又没法匹配。

10： 正则又逐步进行回溯，又来到了b{1,3}，字符串也逐步退到了第一个b。

11：此时正则为b{1,3}，字符串发现只有一个b，也是知足要求的，就把第一个b给了正则。

12~13：开始逐个匹配最后的bbc，字符串也逐个完成匹配。至此整个匹配过程结束。

回溯

从前面的例子，已经能感受到什么是回溯。回溯就是正则在匹配过程当中，发现下一个字符不能知足匹配，则回退到上一步正则，再匹配其余可能，而后继续往下匹配的过程。若是回溯一步不行，正则还会继续回溯。直到尝试完全部状况。这种匹配方法也被称为回溯法。

本质上就是深度优先搜索算法。其中退到以前的某一步这一过程，咱们称为“回溯”。当前面的路走不通时，就会发生“回溯”。即，尝试匹配失败时，接下来的一步一般就是回溯。当回溯发生时会致使资源和时间的浪费，因此咱们在编写正则时要尽可能避免回溯的发生。

常见的回溯形式

在编写正则时，须要注意如下几点，来避免回溯：

贪婪量词

从前面的例子也能够看出是量词致使了回溯，缘由就是默认状况下量词是贪婪匹配的。它会尽可能匹配更多的结果，这样就可能致使后面的正则匹配出错，致使回溯。换句话说就是：你太贪了致使后面的吃不到，拿不到匹配的数据。

注意： 若是有多个量词的状况，匹配的结果是怎样的？答：先到先得！

栗子：

var string = "12345";
var regex = /(\d{1,3})(\d{1,3})/;
console.log( string.match(regex) );
// => ["12345", "123", "45", index: 0, input: "12345"]
复制代码

其中，前面的 \d{1,3} 匹配的是 "123"，后面的 \d{1,3} 匹配的是 "45"。

惰性量词

可能你会想到，既然贪婪量词会致使回溯，那就尽可能使用惰性量词。

错！惰性量词也会致使回溯，前面说过贪婪量词是太贪了，吃得太多了，致使后面的吃不到匹配的数据。而惰性量词是太懒了，吃得太少了，致使后面的吃太多了，吃不下了。

怎么理解，看这个例子：

正则/^(\d{1,3}?)(\d{1,3})$/对'12345’ 进行匹配。

第一个 从步骤5，6能够看出第一个(\d{1,3}?)只匹配了一个1，吃得太少了，致使第二个在遇到后5后，实在吃不下了。那没办法，只能回溯，让第一个再多吃一个2进去，这样就能继续匹配完。

分支结构

前面讲到分支时，也提过度支也是具备惰性的，一样也会致使回溯。例如：/shot|shotcat/当匹配到了shot时，则不会再去考虑后面的shotcat。因此当它匹配字符shotcat时，会首先匹配shot分支，可是到c字母时，发现不匹配又回溯，尝试第二个分支shotcat来进行匹配。

那怎么避免回溯？

咱们分析了多种引发回溯的形式，致使回溯的缘由是后面的状况走不通，正则回退到了上一步，这样就须要对正则的状况进行合理搭配限制，当次数过多时，能够经过惰性量词进行合理限定，当正则匹配的数据存在关联时，则能够经过引用限定为具体的数据。这些都能有效减小回溯。

正则表达式的阅读

正则是有一堆字符组合成的语言，在阅读起来没有其余语言轻松。因此当咱们须要阅读他人的正则，理解其含义就显得很重要。

PS：若是正则实在太难懂了，或者不太肯定。其实有不少辅助工具能够帮助分析正则。例如前面提到的https://jex.im/regulex

结构和操做符优先级

前面讲到过正则是有普通字符和元字符组成的。

那结构是什么？就是字符与元字符组成的一个总体。正则会将这个做为一个总体去匹配。例如[abc]，它就是由元字符[]和普通字符abc一块儿组成的一个结构。正则遇到后就会做为一个总体去匹配，匹配的字符多是abc中的任意一个。

JavaScript 正则表达式包含以下几种结构：字符字面量、字符组、量词、锚、分组、选择分支、反向引用。

结构	说明
字面量	匹配一个具体字符，包括不用转义的和须要转义的。好比a匹配字符"a"，又好比\n匹配换行符，又好比\.匹配小数点。
字符组	匹配一个字符，能够是多种可能之一，好比[0-9]，表示匹配一个数字。也有\d的简写形式。另外还有反义字符组，表示能够是除了特定字符以外任何一个字符，好比[^0-9]，表示一个非数字字符，也有\D的简写形式。
量词	表示一个字符连续出现，好比a{1,3}表示“a”字符连续出现3次。另外还有常见的简写形式，好比a+表示“a”字符连续出现至少一次。
锚点	匹配一个位置，而不是字符。好比^匹配字符串的开头，又好比\b匹配单词边界，又好比(?=\d)表示数字前面的位置。
分组	用括号表示一个总体，好比(ab)+，表示"ab"两个字符连续出现屡次，也可使用非捕获分组(?:ab)+。
分支	多个子表达式多选一，好比abc
反向引用	好比\2，表示引用第2个分组。

这些结构里的元字符，也被称为操做符。常常这些操做符会进行组合，嵌套。那到底先执行谁呢，那么操做符也是有优先等级的。以下表：

操做符描述	操做符	优先级
转义符	\	1
括号和方括号	(...)、(?:...)、(?=...)、(?!...)、[...]	2
量词限定符	{m}、{m,n}、{m,}、?、*、+	3
位置和序列	^ 、$、 \元字符、 通常字符	4
管道符（竖杠）	|	5

上面操做符的优先级从上至下，由高到低。

说完这么多咱们来个栗子，逐步进行讲解

栗子：/ab?(c|de*)+|fg/

1：正则匹配普通字符a

2：b? b字符出现0次或1次

3：遇到括号将(c|de*)做为一个总体

4：继续匹配括号里的c

5：遇到管道符，c和de*做为分支

6：匹配d，而后e后面跟着*，表示e能够重复任意次

7：括号匹配完，遇到+表示(c|de*)须要匹配至少1次

8：而后又遇到了一个管道符。此时将ab?(c|de*)+和fg做为两个分支

下面咱们再看辅助软件分析获得的示意图：

总结： 遇到正则，从左向右进行阅读，根据结构对正则进行划分，结构复杂不肯定的就比较优先级，相同结构则依照先到先得的原则。最后实在不行，还有杀手锏，借助辅助进行可视化分析。

正则表达式的构建

说了正则的阅读，如今来说讲正则的构建。

何时须要本身构建正则

学到这，你会发现正则很强大。但你在想要构建正则的时候，但愿你问本身几个问题？

• 是否有现成的api能够作到？

  不少时候，比较简单常见的功能已经有现成的api能够知足。例如：判断字符里是否有'!'，能够直接使用indexOf方法。提取某个字符能够根据下标使用substring 或 substr 方法。而且一些框架也会提供常见api方法，例如vue里的修饰符，表单里使用<input v-model.trim="msg">trim能够去除首尾空白字符。

• 网上是否有现成的正则？

  对于一些很常见的校验，网上都有现成的正则可使用，这些正则是他人使用后获得验证的，可靠性也是有保障的。

若是上面的问题都得不到满意结果的话，那么能够开始考虑构建正则了

构建的准则

在咱们编写正则时，尽可能遵循这几个原则，编写出准确高效可靠的正则。

• 准确的匹配本身想要的字符
• 正则的可靠性
• 可读性与可维护性
• 效率

准确的匹配与构建步骤

在开始编写正则时，首先必须明确的一点是：你必须弄清楚想要的是什么，是要匹配怎样的字符！ 这点看似很简单，我固然知道我本身想要什么了，但每每拿到数据才发现有些数据是我不须要的，是我没考虑到。

考虑清楚本身到底想要什么的数据，对编写正则起到了相当重要的做用！

通常的构建步骤：

• step1 弄清楚你想要的是什么，是要匹配怎样的字符

• step2 写出一个你认为最具表明性的一个匹配字符

• step3 开始从左到右构建你的正则，首先是否须要匹配位置，若是是的话，要匹配的字符的位置是在哪，单词边界仍是特定字符的先后？仍是正常的从左到右，需不须要用^``$限定开头结尾。

• step4 位置找到后就是字符的限定。关于限定的字符有不少，这里大概分为两类：正向限定和反向限定。在进行限定时要合理使用，既要包含全部咱们想要的字符，还要不匹配咱们不想要的字符。

• 正向限定

  什么是正向限定？当咱们清楚知道本身想要匹配的数据具体是那些，例如某个具体的字符'abc'，或者某个肯定的位置，如某个字符的开头或结尾，再或者某个明确的引用\1，再或者明确的集合[1-10]。这些都是正向限定，即你明确知道本身想要的是那些具体的字符，而后对此进行正则限定。

• 反向限定

  什么是反向限定？当想要匹配的字符范围很大亦或正向限定太多时，咱们能够经过排除法，只要不是这字符的就是咱们想要的字符。目前正则里的元字符更多的是正向限定，反向限定并很少。更没有什么大于小于之类的。总共就这几个：反向字符集 [^abc]，\D,\W,\S,\B，正向否认查找x(?!y)和反向否认查找(?<!y)x。

• step5 字符限定完后，就是它的次数进行限定。注意：次数通常仅对它前面的单个字符起做用，多个字符须要括号做为总体。格外注意次数可能引发的回溯。以后还有其余字符匹配，重复步骤345.

• step6 最后，就是字符标志，对整个正则进行限定，是全局匹配仍是多行等等。

• step7 校验！本身写的正则必定要回头进行校验检查，是否是包含了全部的状况，边际问题，特殊状况都须要考虑到。用一些特殊字符进行检查校验，并能够经过辅助进行可视化分析，方便修改。

正则的可靠性

这里的可靠性是指正则在运行时是稳定的，不会发生灾难性回溯：不会回溯过多，形成 CPU 100%，正常服务被阻塞。若是你写的正则回溯太多，效率低下，遇到一个很长很长的字符串时，就可能引起灾难性回溯。

这里就有一篇文章一个正则表达式引起的血案，让线上CPU100%异常！

因此在编写完正则后，必定要进行检查优化，确保正则的可靠性，不会出现灾难性回溯。

可读性与可维护性

正则虽然写完是给机器用的，可是仍是要给人看的，因此写正则尽可能简洁，不要复杂，例如提取分支里公共部分。

效率

有时虽然咱们写的正则能够知足要求，可是遇到复杂长一点的字符，或者密集的使用，就会变得缓慢。这时就须要对正则进行修改优化，提高效率。

通常从三方面考虑：减少限定范围，减少内存占用，减少回溯。

• 缩减限定范围：若是明确是哪些具体字符组，就不要使用通配符了。
• 减少内存占用：前面讲过，引用是须要占用内存保存的，若是咱们只想用来做为一个总体，不会引用，则可使用非捕获分组(?:)
• 减少回溯：提取分支公共部分，减小分支。合理使用量词或者当正则匹配的数据存在关联时，能够经过引用限定为具体的数据。最重要的仍是对本身正则的匹配过程要熟悉，知晓在哪步会出现匹配不到而走回头路。

注意事项

正则相关方法注意事项

在文章开始部分介绍了正则表达式的方法，鉴于那时还没正式讲解正则，因此只提了基本用法。这里开始对它们使用的注意事项进行说明：

search 和 match 的参数转换问题

search和match方法会默认将字符转化为正则，什么意思，举个栗子：

var string = "2017.06.27"; 
console.log( string.search(".") ); // => 0
// 这里匹配的小标为何是0呢？咱们本来是打算匹配字符串'.' 可是search将它转化为正则了，在正则里'.'表明的是匹配除换行符以外的任何单个字符。因此取到的是2，下标天然就是0

//须要修改为下列形式之一
console.log( string.search("\\.") );  //经过转义
console.log( string.search(/\./) ); // 建议使用search时仍是直接使用正则最安全
// => 4
// => 4


console.log( string.match(".") );  // 也是由于将'.'转化为正则了,因此取到的是2，下标也就是0
// => ["2", index: 0, input: "2017.06.27"]
//须要修改为下列形式之一
console.log( string.match("\\.") );
console.log( string.match(/\./) );
// => [".", index: 4, input: "2017.06.27"]
// => [".", index: 4, input: "2017.06.27"]
复制代码

鉴于这样的坑，建议仍是统一直接用正则，不要用字符串，免得转义。

match 返回结果的格式问题

注意： match 返回结果的格式，与正则对象是否有修饰符 g 有关。仍是看个例子：

var string = "2017.06.27";
var regex1 = /\b(\d+)\b/;  //咱们知道这段正则能匹配单词边界中间的数字
var regex2 = /\b(\d+)\b/g;  // 加上g标志后，表示全局搜索。即在匹配到一个结果后，不会中止，直到将整个字符匹配完，获得全部结果
console.log( string.match(regex1) );
console.log( string.match(regex2) );
// => ["2017", "2017", index: 0, input: "2017.06.27"] 因为第一个没有g，它在匹配到第一个2017，就没有继续了，可是此时是有括号做为分组的，因此它又接着匹配分组获得的2017，因此会出现两个2017，而且获得的数组还包含index和input

// => ["2017", "06", "27"] //因为含有标志g，此时正则不会在2017处结束，而是一直匹配到字符串末尾。返回获得的结果也是没有input和index
复制代码

我建议仍然是在使用match时尽可能加上g，尤为是有分组引用时。

exec 比 match 更强大

上面说过在有g的时候，match返回的数组格式会有变化，么有index和input信息。但exec则能够，那它怎么作到了，答案就是分批返回。

var string = "2017.06.27";
var regex2 = /\b(\d+)\b/g;
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
// => ["2017", "2017", index: 0, input: "2017.06.27"]
// => 4
// => ["06", "06", index: 5, input: "2017.06.27"]
// => 7
// => ["27", "27", index: 8, input: "2017.06.27"]
// => 10
// => null
// => 0
复制代码

例子能够看出：exec接着上一次匹配后继续匹配，其中lastIndex为上一次匹配的索引。

当你须要清楚掌握每次匹配到的信息时，可使用强大的exec。

更增强大的replace

replace 有两种使用形式，这是它的第二个参数，既能够是字符串，也能够是函数。

• 第二个参数为字符串时，能够插入如下特殊变量名

属性	描述
$1,$2,...,$99	匹配第1~99个分组里捕获的文本
$&	匹配到的子串文本
$`	匹配到的子串的左边文本
$'	匹配到的子串的右边文本
$$	美圆符号

栗子：把"2,3,5"，变成"5=2+3"：

var result = "2,3,5".replace(/(\d+),(\d+),(\d+)/, "$3=$1+$2");
console.log(result);
// => "5=2+3"
复制代码

• 第二个参数为函数时，函数各参数的意义

变量名	表明的值
match	匹配的子串。（对应于上述的$&。）
$1,$2, ...	假如replace()方法的第一个参数是一个RegExp 对象，则表明第n个括号匹配的字符串。例如，若是是用 /(\a+)(\b+)/ 这个来匹配，$1 就是匹配的 \a+，$2 就是匹配的 \b+。
index	匹配到的子字符串在原字符串中的索引。（好比，若是原字符串是 'abcd'，匹配到的子字符串是 'bc'，那么这个参数将会是 1）
input	被匹配的原字符串。

"1234 2345 3456".replace(/(\d)\d{2}(\d)/g, function(match, $1, $2, index, input) {
	console.log([match, $1, $2, index, input]);
});
// => ["1234", "1", "4", 0, "1234 2345 3456"]
// => ["2345", "2", "5", 5, "1234 2345 3456"]
// => ["3456", "3", "6", 10, "1234 2345 3456"]
复制代码

编写正则的注意事项

匹配字符串总体问题

匹配整个字符串，咱们常常会在正则先后中加上锚 ^ 和 $。但有时须要注意优先级问题。

例如：咱们想匹配abc或者bcd，若是正则写成这样/^abc|bcd$/，因为位置的优先级更高，因此字符串就要求必须以a开头，d结尾。这显然不是咱们指望的，因此此时则须要加上括号保护起来，做为一个真的个体。所以须要改成/^(abc|bcd)$/。

量词连缀问题

有时咱们有多个量词想"连着"使用，例如表示3的倍数，例如：

/^[abc]{3}+$/,咱们但愿匹配abc当中的任意一个，且次数是3的倍数，注意这里咱们将{3}和+两个量词连在一块儿使用，这样会报错，说 + 前面没什么可重复的。由于+前面也是量词而不是字符，此时也须要经过括号来解决。将其改成/^([abc]{3})+$/。

元字符转义问题

咱们知道元字符是一些字符在正则里表示特殊的含义。可是若是咱们先匹配的字符串里包含这些字符，这时候就须要考虑元字符转义的问题。

这种状况下，基本上大部分元字符都须要逐个转义。但若是是些成对出现的元字符，只须要转义第一个，注意： 括号是必须两个都须要转义的。

var string = "[abc]";
var regex = /\[abc]/g;  //只需转义第一个[
console.log( string.match(regex)[0] ); 
// => "[abc]"

var string = "(123)";
var regex =/\(123\)/g;  //括号则须要两个都转义
console.log( string.match(regex)[0] ); 
// => "(123)"
复制代码

不须要转义的符号：例如 = ! : - ,等符号，它们在正则里没有单独的含义，都是相互组合或者其余元字符搭配使用的。因此它们是不须要转义的。

参考资料

第一个老姚的正则 真的是你目前能找到的关于正则的最好最详细的，我有不少章节都是参考它的。

• JS正则表达式完整教程（略长） （强烈建议）
• 正则表达式不要背