在线js代码编写网址：https://jsbin.com/yalasugire/edit?js,console
1、REGEXP对象
1.1 JavaScript通过内置对象RegExp支持正则表达式
1.2 有两种方法实例化RegExp对象
- 字面量
var reg = /\bis\b/g;
- 构造函数
// 在js中 \ 是特殊字符，要使用的话必须使用转义字符进行转义
var reg = new RegExp('\\bis\\b', 'g');
2、修饰符
-
g:global全文搜索，不添加，搜索到第一个匹配停止 -
i:ignore case 忽略大小写，默认大小写敏感
// 全局搜索
'He is a boy. Is he?It is a dog.'.replace(/\bis\b/g, '0'); // "He 0 a boy. Is he?It 0 a dog."
// 全局搜索并忽略大小写
'He is a boy. Is he?It is a dog.'.replace(/\bis\b/gi, '0'); // "He 0 a boy. 0 he?It 0 a dog."
-
m:multiple lines 多行搜索
3、元字符
3.1 原义文本字符
代表它本来含义的字符，例如字母a,b,c...,1,2,3...
3.2 元字符
元字符是在正则表达式中有特殊含义的非字母字符，元字符的含义并不是唯一的，在不同的场景下有不同的含义。
3.3 有特殊含义的一些字符
-
*、+、?、$、^、.、|、\、()、{}、[] -
\t:水平制表符（键盘tab键） -
\v:垂直制表符 -
\n:换行符 -
\r:回车符 -
\0:空字符 -
\f:换页符 -
\cX:与X对应的控制字符（Ctrl + X），例如：\cZ就相当于Ctrl + Z
4、字符类
4.1 一般情况下正则表达式一个字符对应字符串的一个字符，例如表达式ab\t
4.2 当我们需要匹配某一类字符的时候，我们可以使用元字符[]来构建一个简单的类
- 所谓类是指符合某些特性的对象，一个泛指，而不是某个字符
- 表达式
[abc]把字符a或b或c归为一类，表达式可以匹配这类的字符
'a1b2c3d4'.replace(/[abc]/g, 'X'); // "X1X2X3d4"
4.3 字符类取反
- 使用元字符
^创建 反向类/负向类 - 反向类的意思是不属于某类的内容
- 表达式
[^abc]表示 不是字符a或b或c的内容
'a1b2c3d4'.replace(/[^abc]/g, 'X'); // "aXbXcXXX"
5、范围类
- 我们可以使用
[a-z]来连接两个字符表示 从a到z的任意字符 - 这是个闭区间，也就是包含
a和z本身
'a1b2d3x4g7'.replace(/[a-z]/g, 'Q'); // "Q1Q2Q3Q4Q7"
- 在
[]组成的类内部是可以连写的[a-zA-Z]
'a1b2d3x4g7DFGHFHGF'.replace(/[a-zA-Z]/g, 'Q'); // "Q1Q2Q3Q4Q7QQQQQQQQ"
注意，在范围类里面匹配-，只用在范围类内部加一个-就可以了。
'2020-11-20'.replace(/[0-9-]/g, 'A'); // "AAAAAAAAAA"
6、预定义类与边界
6.1 预定义类 —— 用来匹配常见的字符类，使其书写更方便
-
.：等价类[^\r\n]，除了回车符和换行符之外的所有字符 -
\d：等价类[0-9]，数字字符 -
\D：等价类[^0-9]，非数字字符 -
\s：等价类[\t\n\x0B\f\r]，空白符 -
\S：等价类[^\t\n\x0B\f\r]，非空白符 -
\w：等价类[a-zA-Z_0-9]，单词字符（字母、数字、下划线） -
\W：等价类[^a-zA-Z_0-9]，非单词字符
例子：匹配一个 ab+数字+任意字符 的字符串
ab\d.
6.2 边界
-
^：以xxx开始（注意：写在开头）
// 在不使用 ^ 时
'@123@abc@'.replace(/@./g, 'Q'); // "Q23Qbc@"
// 只想替换开头的 @ 字符时
'@123@abc@'.replace(/^@./g, 'Q'); // "Q23@abc@"
-
$：以xxx结束（注意：写在结尾）
// 在不使用 $ 时
'@123@abc@'.replace(/.@/g, 'Q'); // "@12QabQ"
// 只想替换结尾的 @ 字符时
'@123@abc@'.replace(/.@$/g, 'Q'); // "@123@abQ"
-
\b：单词边界 -
\B：非单词边界
// 在不使用 \b \B 的情况下
'This is a boy'.replace(/is/g, '0'); // "Th0 0 a boy"
// 只想替换单词时
'This is a boy'.replace(/\bis\b/g, '0'); // "This 0 a boy"
// 替换非单词时
'This is a boy'.replace(/\Bis\b/g, '0'); // "Th0 is a boy"
7、量词
-
?：出现零次或一次（最多出现一次） -
+：出现一次或多次（至少出现一次） -
*：出现零次或多次（任意次） -
{n}：出现n次 -
{n,m}：出现n到m次 -
{n,}：至少出现n次
// 匹配数字连续出现20次的场景
\d{20}
// 一个复杂点的例子
\d{20}\w\d?\w+\d*\d{3}\w{3,5}\d{3,}
8、JS正则贪婪模式与非贪婪模式
8.1 贪婪模式（JS正则默认匹配模式）
正则表达式在处理的时候，会尽可能多的匹配，直到匹配失败
// 匹配6次
'12345678'.replace(/\d{3,6}/g, 'X'); // "X78"
// 匹配8次
'12345678'.replace(/\d{3,9}/g, 'X'); // "X"
8.2 非贪婪模式
- 让正则表达式尽可能少的匹配，也就是说一旦匹配成功就不再继续尝试，就是非贪婪模式
- 做法很简单，在量词后加上
?就可以了
'12345678'.replace(/\d{3,6}?/g, 'X'); // "XX78"
9、分组
9.1 分组
假如我们想要匹配字符串Byron连续出现3次的场景，我们可能会这样写Byron{3}，但实际情况却是匹配了字符Byro以及3个n的组合
'ByronByronByron'.replace(/Byron{3}/g, 'X'); // "ByronByronByron"
因此上述的正则并不会匹配成功，从而还是返回原字符。所以量词是作用于紧挨着它的这个字符的，而不是整个单词。
使用()可以达到分组的功能，使量词作用于分组。
因此上述的需求可以这样写(Byron){3}
'ByronByronByron'.replace(/(Byron){3}/g, 'X'); // "X"
9.2 或
- 使用
|达到或的效果 - 注意：使用或过后，是把正则表达式前后分成了两部分
'ByronCasper'.replace(/Byron|Casper/g, 'X'); // "XX"
如果我们不想作用于整个单词，只想匹配on或者Ca，可以使用分组实现Byr(on|Ca)sper，这时匹配的就是Byronsper或者ByrCasper。
'ByronsperByrCasper'.replace(/Byr(on|Ca)sper/g, 'X'); // "XX"
9.3 反向引用
需求：
2015-12-25 => 12/25/2015
'2015-12-25'.replace(/(\d{4})-(\d{2})-(\d{2})/g, '$2/$3/$1'); // "12/25/2015"
上面的$1，$2，$3就是捕获的分组里面的内容
9.4 忽略分组
不希望捕获某些分组，只需要在分组内加上?:就可以了
'2015-12-25'.replace(/(?:\d{4})-(\d{2})-(\d{2})/g, '$1/$2/$3'); // "12/25/$3"
10、前瞻 —— 只是作为断言，并不会包含在匹配规则里面
- 正则表达式从文本头部向尾部开始解析，文本尾部方向，称为“前”
-
前瞻就是在正则表达式匹配到规则的时候，向前检查是否符合断言，后顾/后瞻方向相反 - JavaScript不支持后顾
- 符合特定断言称为
肯定/正向匹配，不符合特定断言称为否定/负向匹配 - 语法：
a. 正向前瞻：exp(?=assert)
'a2*344v'.replace(/\w(?=\d)/g, 'X'); // "X2*XX4v"
b. 负向前瞻：exp(?!assert)
'a2*344v'.replace(/\w(?!\d)/g, 'X'); // "aX*34XX"
c. 正向后顾：exp(?<=assert) —— js不支持
d. 负向后顾：exp(?<!assert) —— js不支持
11、JS对象属性
-
global：是否支持全文搜索，默认false -
ignore case：是否大小写敏感，默认是false -
multiline：多行搜索，默认值是false -
lastIndex：是当前表达式匹配内容的最后一个字符的下一个位置，即下一次开始匹配的位置 -
source：正则表达式的文本字符串
var reg1 = /\w/;
reg1.global; // false
reg1.ignoreCase; // false
reg1.multiline; // false
reg1.source; // "\w"
var reg2 = /\w/gim;
reg2.global; // true
reg2.ignoreCase; // true
reg2.multiline; // true
reg2.source; // "\w"
注意：上述的属性都是只读的
12、正则表达式原生的 test 和 exec方法
12.1 test方法
RegExp.prototype.test(str)
- 用于测试字符串参数中是否存在匹配正则表达式模式的字符串
- 如果存在则返回
true，否则返回false
var reg1 = /\w/;
reg1.test('a'); // true
reg1.test('$'); // false
设置了g属性后，注意：
var reg2 = /\w/g;
reg2.test('ab'); // true lastIndex为1
reg2.test('ab'); // true lastIndex为2
reg2.test('ab'); // false lastIndex被重置为0
// 往复循环
reg2.test('ab'); // true
reg2.test('ab'); // true
reg2.test('ab'); // false
这是因为lastIndex属性的影响：
while(reg2.test('ab')) {
console.log(reg2.lastIndex); // 分别打印 1 2
}
12.2 exec方法
RegExp.prototype.exec(str)
使用正则表达式模式对字符串执行搜索，并将更新全局RegExp对象的属性(这里就指
lastIndex属性)以反映匹配结果（注意：只有在全局调用下才会更新lastIndex属性）如果没有匹配的文本则返回
null，否则返回一个结果数组，其中数组有两个额外的属性：
a.index属性声明匹配文本的第一个字符的位置
b.input属性存放被检索的字符串string返回的数组第一个元素是与正则表达式相匹配的文本
返回的数组第二个元素是与RegExp对象的第一个子表达式(第一个分组)相匹配的文本（如果有的话）
返回的数组第三个元素是与RegExp对象的第二个子表达式(第二个分组)相匹配的文本（如果有的话），以此类推
1）、非全局调用
var reg3 = /\d(\w)(\w)\d/;
var ts = '$1az2b3cy4d5e';
var ret = reg3.exec(ts);
// "0 1 $1az2b3cy4d5e 1az2,a,z"
console.log(reg3.lastIndex + '\t' + ret.index + '\t' + ret.input + '\t' + ret.toString());
// "0 1 $1az2b3cy4d5e 1az2,a,z"
console.log(reg3.lastIndex + '\t' + ret.index + '\t' + ret.input + '\t' + ret.toString());
可以看到，多次执行时，lastIndex始终为0。因此在非全局调用下，lastIndex是不起作用的。
2）、全局调用
var reg4 = /\d(\w)(\w)\d/g;
var ts = '$1az2b3cy4d5e';
var ret = null;
while(ret = reg4.exec(ts)) {
// 第一次打印："5 1 $1az2b3cy4d5e 1az2,a,z"
// 第二次打印："10 6 $1az2b3cy4d5e 3cy4,c,y"
console.log(reg4.lastIndex + '\t' + ret.index +
'\t' + ret.input + '\t' + ret.toString());
}
可以看到，多次执行，lastIndex会跟着变化。因此在全局调用下，lastIndex会随着正则表达式的匹配结果进行更新。
13、字符串对象方法
13.1 search方法
String.prototype.search(reg)
-
search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串 - 方法返回第一个匹配结果的
index，查找不到返回-1 -
search()方法不执行全局匹配，它将忽略g标志，并且总是从字符串的开始进行检索
'a1b2c3d1'.search('1'); // 1
'a1b2c3d1'.search('10'); // -1
/*
* 问：为什么传入数字 1 也能匹配，明明应该是字符串格式的 '1'
* 答：因为当我们传入的第一个参数不是正则的时候，方法就会尝试帮我们把它转成正则
*/
'a1b2c3d1'.search(1); // 1
// 上面的语句，实际上等同于下面这句
'a1b2c3d1'.search(/1/); // 1
// 传入g标志，执行多次，返回结果还是1，即g标志不起作用
'a1b2c3d1'.search(/1/g); // 1
'a1b2c3d1'.search(/1/g); // 1
13.2 match方法
String.prototype.match(reg)
-
match()方法将检索字符串，以找到一个或多个与正则表达式相匹配的文本 -
regexp是否具有g标志，对结果影响很大
1）、非全局调用 —— 跟exec方法在非全局调用下的返回值是一样的
- 如果
regexp没有g标志，那么match()方法就只能在字符串中执行一次匹配 - 如果没有找到任何匹配的文本，将返回
null - 否则它将返回一个数组，其中存放了与它找到的匹配文本有关的信息
- 返回的数组的第一个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的子表达式相匹配的文本
- 除了常规的数组元素之外，返回的数组还包含有2个对象属性
a.index属性声明匹配文本的第一个字符的位置
b.input属性存放被检索的字符串string
var reg3 = /\d(\w)\d/;
var ts = '$1a2b3c4d5e';
var ret = ts.match(reg3);
console.log(ret); // ["1a2", "a"]
console.log(ret.index + '\t' + reg3.lastIndex); // "1 0"
2）、全局调用
- 如果
regexp具有g标志，则match()方法将执行全局检索，并找到字符串中所有相匹配的子字符串 - 没有找到任何匹配的子串，则返回
null - 如果找到了一个或多个相匹配的子字符串，则返回一个数组
- 数组元素中存放的是字符串中所有相匹配的子字符串(注意：没有存放分组信息了)，而且也没有
index属性或input属性
var reg4 = /\d(\w)\d/g;
var ts = '$1a2b3c4d5e';
var ret = ts.match(reg4);
console.log(ret); // ["1a2", "3c4"]
// lastIndex信息也没有了
console.log(ret.index + '\t' + ret.input + '\t' + reg4.lastIndex); // "undefined undefined 0"
13.3 split方法
String.prototype.split(reg)
- 我们经常使用
split()方法把字符串分割为字符数组 —— 其实当我们传入的参数不是正则时，会默认给我们转换为正则表达式进行匹配
'a,b,c,d'.split(','); // ["a", "b", "c", "d"]
// 等价于
'a,b,c,d'.split(/,/); // ["a", "b", "c", "d"]
- 在一些复杂的分割情况下，我们可以使用正则表达式解决
'a1b2c3d'.split(/\d/); // ["a", "b", "c", "d"]
13.4 replace方法
String.prototype.replace
1）、 String.prototype.replace(str, replaceStr)
'a1b1c1'.replace(1, 2); // "a2b1c1"
// 上述被隐式的转为了正则表达式
'a1b1c1'.replace(/1/, 2); // "a2b1c1"
2）、String.prototype.replace(reg, replaceStr)
'a1b1c1'.replace(/1/g, 2); // "a2b2c2"
3）、String.prototype.replace(reg, function) —— 替换的内容是函数的返回值
function会在每次有匹配结果的时候调用，有四个参数(其实参数个数是不固定的，会根据正则表达式有无分组而发生变化)：
- 匹配字符串
- 正则表达式分组内容，没有分组则没有该参数，即第三个参数就变成第二个了(因此，需要我们根据不同的正则表达式写不同的参数个数)
- 匹配项在字符串中的
index - 原字符串
没有分组时：
var result = 'a1b2c3d4e5'.replace(/\d/g, function(match, index, origin) {
console.log(index); // 分别打印 1 3 5 7 9
return parseInt(match) + 1;
});
console.log(result); // "a2b3c4d5e6"
有分组时：
var result = 'a1b2c3d4e5'.replace(/(\d)(\w)(\d)/g, function(match, group1, group2, group3, index, origin) {
console.log(match); // 分别打印 "1b2" "3d4"
return group1 + group3;
});
console.log(result); // "a12c34e5"
