系统认识JavaScript正则表达式

摘要：正则表达式有两种基本字符类型组成。元字符是在正则表达式中有特殊含义的非字母字符。返回数组是有以下元素组成的第一个元素是与正则表达式相匹配的文本。子表达式就是分组。使用指定的分隔符字符串将一个对象分割成字符串数组。

转载请告知并注明来源作者  
作者：唐金健  
网络昵称：御焱  
掘金知乎思否专栏：优雅的前端

正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。

简单的说，就是按照某种规则去匹配符合条件的字符串。

Regexper：https://regexper.com/

实例化RegExp的两种方式。

两种方式定义RegExp对象。

let reg = /[a-z]{3}/gmi;
let reg = /[a-z]{3}/g;
let reg = /[a-z]{3}/m;
let reg = /[a-z]{3}/i;

g global 代表全局搜索。如果不添加，搜索到第一个匹配停止。

m Multi-Line 代表多行搜索。

i ignore case 代表大小写不敏感，默认大小写敏感。

let reg = new RegExp("is", "g");

因为JavaScript字符串中属于特殊字符，需要转义。

把元字符当作转义字符。

正则表达式有两种基本字符类型组成。

原义文本字符

元字符

表示原本意义上是什么字符，就是什么字符。

是在正则表达式中有特殊含义的非字母字符。
* + ? $ ^ . | ( ) { } [ ]

类似于转义字符。

表示符合某种特性的字符类别。

使用元字符[]可以构建一个简单的类。
所谓类是指符合某些特性的对象，一个泛指，而不是某个字符。

表达式[abc]把字符a或b或c归为一类，表达式可以匹配这一类中的任意一个字符。

// replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
"a1b2c3d4e5".replace(/[abc]/g, "0");  //010203d4e5

我们想要替换不是abc中任意一个字符的字符。

// 元字符 ^ 创建一个 反向类/负向类
"abcdefg".replace(/[^abc]/g, "0");  //abc0000

匹配这一个范围内的字符。

如果我们想要匹配数字0-9，那么我们可能会这样写[0123456789]。
如果我们想要匹配26个字母，那么我们可能会这样写[abcdefghijklmnopqrstuvwxyz]。
这样略显麻烦，所以才会有范围类。

// 替换所有数字
"a1c2d3e4f5".replace(/[0-9]/g, "x");  //axcxdxexfx
// 替换所有小写字母
"a1c2d3e4f5".replace(/[a-z]/g, "x");  //x1x2x3x4x5
// []组成的类内部是可以连写的。替换所有大小写字母
"a1C2d3E4f5G6".replace(/[a-zA-Z]/g, "*");  //*1*2*3*4*5*6

如果我想替换数字，并且连带-符号也一起替换呢？

// 替换所有数字和横杠
"2018-5-21".replace(/[0-9-]/g, "*");  //*********

一些已经定义的类，可以直接使用。

替换一个 ab + 数字 + 任意字符 的字符串

// 写法1
"ab0c".replace(/ab[0-9][^
]/g, "TangJinJian");  //TangJianJian
// 写法2
"ab0c".replace(/abd./g, "TangJinJian");  //TangJianJian

我想替换的字符串，属于那种只在开头出现的。

"YuYan is a boy, YuYan".replace(/^YuYan/g, "TangJinJian");  //TangJinJian is a boy, YuYan

我想替换的字符串，属于那种只在结尾出现的。

"YuYan is a boy, YuYan".replace(/YuYan$/g, "TangJinJian");  //YuYan is a boy, TangJinJian

单词边界例子。

// 替换所有is为0
"This is a man".replace(/is/g, "0");  //Th0 0 a man
// 替换所有is前面带有单词边界的字符串
"This is a man".replace(/is/g, "0");  //This 0 a man
// 替换所有is前面没有单词边界的字符串
"This is a man".replace(/Bis/g, "0");  //Th0 is a man

用来处理连续出现的字符串。

我想替换字符串中连续出现10次的数字为*。

"1234567890abcd".replace(/d{10}/, "*");  //*abcd

我想替换字符串中的QQ号码。

"我的QQ是：10000".replace(/[1-9][0-9]{4,}/, "19216811");  //我的QQ是：19216811

尽可能多的匹配。

有这样的一种场景下的正则表达式，/d{3,6}/该替换3个数字还是6个数字呢，4、5个数字？

// 贪婪模式会尽可能的往多的方面去匹配
"123456789".replace(/d{3,6}/, "x");  //x789
"123456789".replace(/d+/, "x");  //x
"123456789".replace(/d{3,}/, "x");  //x

尽可能少的匹配。

如果我们想要最低限度的替换呢？

// 非贪婪模式使用 ? 尽可能的往少的方面去匹配
"12345678".replace(/d{3,6}?/g, "x");  //xx78
"123456789".replace(/d{3,6}?/g, "x");  //xxx

因为有g标志，会匹配这段字符串里所有符合规则的字符串。
第一个规则/d{3,6}?/g，12345678中有两个符合条件的字符串，是123和456。所以替换结果是xx78。
第二个规则/d{3,6}?/g，123456789中有三个符合条件的字符串，是123、456和789。所以替换结果是xxx。

括号里的一些规则，分为一组。

我想替换连续出现3次的字母和数字。

//没有分组的情况下，后面的量词，只是表示匹配3次数字。
"a1b2d3c4".replace(/[a-z]d{3}/g, "*");  //a1b2d3c4
//有分组的情况下，分组后面的量词，表示符合这个分组里规则的字符串，匹配3次。
"a1b2d3c4".replace(/([a-z]d){3}/g, "*");  //*c4

分组里有两种规则，只要满足其中一种即可匹配。

//我想把ijaxxy和ijcdxy都替换成*
"ijabxyijcdxy".replace(/ij(ab|cd)xy/g, "*");  //**

可以把分组视为变量，来引用。

//我想把改变年月日之间的分隔符
"2018-5-22".replace(/(d{4})-(d{1,2})-(d{1,2})/g, "$1/$2/$3");  //2018/5/22
//我想替换日期，并且更改顺序
"2018-5-22".replace(/(d{4})-(d{1,2})-(d{1,2})/g, "$2/$3/$1");  //5/22/2018

忽略掉分组，不捕获分组，只需要在分组内加上?:

// 忽略掉匹配年的分组后，匹配月的分组变成了$1，日的分组变成了$2
"2018-5-22".replace(/(?:d{4})-(d{1,2})-(d{1,2})/g, "$1/$2/$3");  //5/22/$3

正则表达式从文本头部向尾部开始解析，文本尾部方向，称为“前”。  
前瞻就是在正在表达式匹配到规则的时候，向前检查是否符合断言，后顾/后瞻方向相反。  
JavaScript不支持后顾。
符合和不符合特定断言称为肯定/正向匹配和否定/负向匹配。

有这样一个单词字符+数字格式的字符串，只要满足这种格式，就把其中的单词字符替换掉。

"a1b2ccdde3".replace(/w(?=d)/g, "*");  //*1*2ccdd*3

有这样一个单词字符+非数字格式的字符串，只要满足这种格式，就把前面的单词字符替换掉。

"a1b2ccdde3".replace(/w(?!d)/g, "*");  //a*b*****e*

global是否全文搜索，默认false。
ignore case是否大小写敏感，默认是false。
multiline多行搜索，默认值是false。
lastIndex是当前表达式匹配内容的最后一个字符的下一个位置。
source正则表达式的文本字符串。

let reg1 = /w/;
let reg2 = /w/gim;

reg1.global;  //false
reg1.ignoreCase;  //false
reg1.multiline;  //false

reg2.global;  //true
reg2.ignoreCase;  //true
reg2.multiline;  //true

用来查看正则表达式与指定的字符串是否匹配。返回true或false。

let reg1 = /w/;
reg1.test("a");  //true
reg1.test("*");  //false

加上g标志之后，会有些区别。

let reg1 = /w/g;
// 第一遍
reg1.test("ab");  //true
// 第二遍
reg1.test("ab");  //true
// 第三遍
reg1.test("ab");  //false
// 第四遍
reg1.test("ab");  //true
// 第五遍
reg1.test("ab");  //true
// 第六遍
reg1.test("ab");  //false

实际上这是因为RegExp.lastIndex。每次匹配到之后，lasgIndex会改变。
lastIndex是正则表达式的一个可读可写的整型属性，用来指定下一次匹配的起始索引。

let reg = /w/g;
// 每次匹配到，就会把lastIndex指向匹配到的字符串后一个字符的索引。
while(reg.test("ab")) {
    console.log(reg.lastIndex);
}
// 1
// 2

reg.lastIndex初始时为0，第一个次匹配到a的时候，reg.lastIndex为1。第二次匹配到b的时候，reg.lastIndex为2。

let reg = /ww/g;
while(reg.test("ab12cd")) {
  console.log(reg.lastIndex);
}
// 2
// 4
// 6

reg.lastIndex初始时为0，第一个次匹配到ab的时候，reg.lastIndex为2。第二次匹配到12的时候，reg.lastIndex为4。第三次匹配到cd的时候，reg.lastIndex为6。

let reg = /w/g;
// 匹配不到符合正则的字符串之后，lastIndex会变为0。
while(reg.test("ab")) {
    console.log(reg.lastIndex);
}
console.log(reg.lastIndex);
reg.test("ab");
console.log(reg.lastIndex);
// 1
// 2
// 0
// 1

所以，这就是为什么reg.test("ab")再多次执行之后，返回值为false的原因了。

let reg = /w/g;
reg.lastIndex = 2;
reg.test("ab");  //false

每次匹配的起始位置，是以lastIndex为起始位置的。上述例子，一开始从位置2开始匹配，位置2后面没有符合正则的字符串，所以为false。

在一个指定字符串中执行一个搜索匹配。返回一个搜索的结果数组或null。

let reg = /d(w)d/;
let ts = "*1a2b3c";
let ret = reg.exec(ts);  //ret是结果数组
// reg.lastIndex肯定是0，因为没有g标志。 没有g标志的情况下，lastIndex被忽略。
console.log(reg.lastIndex + "	" + ret.index + "	" + ret.toString());
console.log(ret);
// 0  1 1a2,a
// ["1a2", "a"]

返回数组是有以下元素组成的：

第一个元素是与正则表达式相匹配的文本。

第二个元素是reg对象的第一个子表达式相匹配的文本（如果有的话）。

第二个元素是reg对象的第二个子表达式相匹配的文本（如果有的话），以此类推。

// 子表达式就是分组。
let reg = /d(w)(w)(w)d/;
let ts = "*1a2b3c";
let ret = reg.exec(ts);
console.log(reg.lastIndex + "	" + ret.index + "	" + ret.toString());
console.log(ret);  //输出结果数组
// 0  1 1a2b3,a,2,b
// ["1a2b3", "a", "2", "b"]

let reg = /d(w)(w)(w)d/g;
let ts = "*1abc25def3g";
while(ret = reg.exec(ts)) {
    console.log(reg.lastIndex + "	" + ret.index + "	" + ret.toString());
}
// 6  1 1abc2,a,b,c
// 11 6 5def3,d,e,f

第一次匹配的是1abc2，1abc2的后一个字符的起始位置是6，所以reg.lastIndex是6。
1abc2的第一个字符的起始位置是1，所以ret.index是1。

第二次匹配的是5def3，5def3的后一个字符的起始位置是11，所以reg.lastIndex是11。
5def3的第一个字符的起始位置是6，所以ret.index是6。

执行正则表达式和String对象之间的一个搜索匹配。  
方法返回第一个匹配项的index，搜索不到返回-1。  
不执行全局匹配，忽略g标志，并且总是从字符串的开始进行检索。

我想知道Jin字符串的起始位置在哪里。

"TangJinJian".search("Jin");  //4
"TangJinJian".search(/Jin/);  //4

search方法，既可以通过字符串，也可以通过正则描述字符串来搜索匹配。

当一个字符串与一个正则表达式匹配时， match()方法检索匹配项。  
提供RegExp对象参数是否具有g标志，对结果影响很大。

如果RegExp没有g标志，那么match只能在字符串中，执行一次匹配。
如果没有找到任何匹配文本，将返回null。
否则将返回一个数组，其中存放了与它找到的匹配文本有关的信息。

let reg = /d(w)d/;
let ts = "*1a2b3c";
let ret = ts.match(reg);
console.log(ret.index + "	" + reg.lastIndex);
console.log(ret);
// 1  0
// ["1a2", "a"]

非全局情况下和RegExp.prototype.exec()方法的效果是一样的。

我想找到所有数字+单词+数字格式的字符串。

let reg = /d(w)d/g;
let ts = "*1a2b3c4e";
let ret = ts.match(reg);
console.log(ret.index + "	" + reg.lastIndex);
console.log(ret);
// undefined  0
// ["1a2", "3c4"]

全局情况下和RegExp.prototype.exec()方法的区别。在于，没有了分组信息。
如果我们不使用到分组信息，那么使用String.prototype.match()方法，效率要高一些。而且不需要写循环来逐个所有的匹配项获取。

使用指定的分隔符字符串将一个String对象分割成字符串数组。

"a,b,c,d".split(/,/);  //["a", "b", "c", "d"]
"a1b2c3d".split(/d/);  //["a", "b", "c", "d"]
"a1b-c|d".split(/[d-|]/);  //["a", "b", "c", "d"]

返回一个由替换值替换一些或所有匹配的模式后的新字符串。模式可以是一个字符串或者一个正则表达式， 替换值可以是一个字符串或者一个每次匹配都要调用的函数。

"TangJinJian".replace("Tang", "");  //JinJian
"TangJinJian".replace(/Ji/g, "*");  //Tang*n*an

以上两种用法，是最常用的，但是还不能精细化控制。

我想要把a1b2c3d4中的数字都加一，变成a2b3c4d5。

"a1b2c3d4".replace(/d/g, function(match, index, orgin) {
    console.log(index);
    return parseInt(match) + 1;
});
// 1
// 3
// 5
// 7
// a2b3c4d5

回调函数有以下参数：

match第一个参数。匹配到的字符串。

group第二个参数。分组，如果有n个分组，则以此类推n个group参数，下面两个参数将变为第2+n和3+n个参数。没有分组，则没有该参数。

index第三个参数。匹配到的字符串第一个字符索引位置。

orgin第四个参数。源字符串。

我想把两个数字之间的字母去掉。

"a1b2c3d4e5f6".replace(/(d)(w)(d)/g, function(match, group1, group2, group3, index, orgin) {
  console.log(match);
  return group1 + group3;
});
// 1b2
// 3d4
// 5f6
// a12c34e56