本文是 重温基础 系列文章的第九篇。 今日感受：时间管理-角色管理法。
系列目录：
【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)
【重温基础】1.语法和数据类型
【重温基础】2.流程控制和错误处理
【重温基础】3.循环和迭代
【重温基础】4.函数
【重温基础】5.表达式和运算符
【重温基础】6.数字
【重温基础】7.时间对象
【重温基础】8.字符串
本章节复习的是JS中的正则表达式，JS中用来匹配字符串的强大工具。
前置知识： JS中的正则表达式是用来匹配字符串中指定字符组合的模式。 另外需要记住：正则表达式也是对象。
1.创建正则表达式
使用一个正则表达式字面量：
let reg = /ab+c/;
let reg = /^[a-zA-z]/gi;
使用RegExp对象：
new RegExp(str[, attr])接收2个参数，str是一个字符串，指定正则表达式匹配规则，attr可选，表示匹配模式，值有g(全局匹配),i(区分大小写的匹配)和m(多行匹配)。
let reg = new RegExp(‘ab+c’);
let reg = new RegExp(/^[a-zA-z]/, “gi”);
let reg = new RegExp(“^[a-zA-z]”, “gi”);
正则表达式的返回值，是一个新的RegExp对象，具有指定的模式和标志。 返回信息介绍：
对象
属性
描述
案例中对应的值
reg
lastIndex
下一个匹配的索引（仅在使用g参数时可用）
0
reg
source
模式文本。在正则表达式创建时更新，不执行。
“ab+c”
reg
ignoreCase
是否使用了 “i” 标记使正则匹配忽略大小写。
true
reg
global
是否使用了 “g” 标记来进行全局的匹配。
true
reg
multiline
是否使用了 “m” 标记使正则工作在多行模式。
false
关于正则表达式的一些方法属性，文章后面介绍，这里先复习定义和使用。
2.使用正则表达式
JS的正则表达式可以被用于：
RegExp对象的exec和test方法；
String对象的match、replace、search和split方法。
2.1 RegExp对象方法
方法
介绍
exec
检索字符串中指定的值。返回找到的值，并确定其位置。
test
检索字符串中指定的值。返回 true 或 false。
2.1.1 exec(str)
str: 需要检索的字符串。 若检索成功，返回匹配的数组，否则返回null。
let str = “hello leo!”;
let reg = new RegExp(“leo”, “g”);
let result = reg.exec(str);
// 也可以写成
let result = /leo/g.exec(“hello leo!”);
/*
[
0: “leo”,
groups: undefined,
index: 6,
input: “hello leo!”,
length: 1
]
*/
let result2 = /(leo \S)/g.exec(“hello leo hi leo!”);
/*
0: “leo hi”
1: “leo hi”
2: “hi”
groups: undefined
index: 6
input: “hello leo hi leo!”
length: 3
*/
返回信息介绍：
对象
属性
描述
案例中对应的值
result
[0]
匹配到的所有字符串
“leo”
result
input
初始字符串。
“hello leo!”
result
index
在输入的字符串中匹配到的以0开始的索引值。
6
result2
[1],…,[n]
括号中的分组捕获
[1]=> “leo hi”;[2] => “hi”
2.1.2 test(str)
str:需要检索的字符串。 若匹配成功返回true否则false。 等价于 reg.exec(str) != null。
let str = “hello leo!”;
let res = /^leo/.test(str); // fasle
let res1 = /^leo/.test(str); // true
^str表示匹配以str开头的字符串，这些符号文章后面会介绍。
2.2 String对象方法
方法
介绍
search
检索与正则表达式相匹配的值。
match
找到一个或多个正则表达式的匹配。
replace
替换与正则表达式匹配的子串。
split
把字符串分割为字符串数组。
2.2.1 search
str.search(reg)： str:被检索的源字符串。 reg:可以是需要检索的字符串，也可以是需要检索的RegExp对象，可以添加标志，如i。
若检索成功，返回第一个与RegExp对象匹配的字符串的起始位置，否则返回-1。
let str = “hello leo!”;
let res = str.search(/leo/g); // 6
let str1 = “hello leoleoleoleo!”;
let res1 = str.search(/leo/g); // 6
let res2 = str.search(/pingan/g); // -1
2.2.2 match
str.match(reg)： str:被检索的源字符串。 reg:可以是需要检索的字符串，也可以是需要检索的RegExp对象，可以添加标志，如i。
若检索成功，返回与reg匹配的所有结果的一个数组，数组的第一项是进行匹配完整的字符串，之后的项是用圆括号捕获的结果，否则返回null。
let str = ‘For more information, see Chapter 3.4.5.1’;
let reg = /see (chapter \d+(\.\d)*)/i;
let result = str.match(reg);
/*
logs [ ‘see Chapter 3.4.5.1’,
‘Chapter 3.4.5.1’,
‘.1’,
index: 22,
input: ‘For more information, see Chapter 3.4.5.1’ ]
*/
‘see Chapter 3.4.5.1’ 是整个匹配。 ‘Chapter 3.4.5.1’ 被'(chapter \d+(\.\d)*)’捕获。 ‘.1’ 是被'(\.\d)’捕获的最后一个值。 ‘index’ 属性(22) 是整个匹配从零开始的索引。 ‘input’ 属性是被解析的原始字符串。
2.2.3 replace
将字符串中指定字符替换成其他字符，或替换成一个与正则表达式匹配的字符串。 str.replace(sub/reg,val):
str: 源字符串
sub: 使用字符串来检索被替换的文本
reg: 使用RegExp对象来检索来检索被替换的文本
val: 指定替换文本
返回替换成功之后的字符串，不改变源字符串内容。
let str = “hello leo!”;
let res = str.replace(‘leo’,’pingan’);//”hello pingan!”
val可以使用特殊变量名：
变量名
代表的值
$$
插入一个 “$”。
$&
插入匹配的子串。
$
插入当前匹配的子串左边的内容。
$’
插入当前匹配的子串右边的内容。
$n
假如第一个参数是 RegExp对象，并且 n 是个小于100的非负整数，那么插入第 n 个括号匹配的字符串。提示：索引是从1开始
let str = “hello leo!”;
let res = str.replace(/(\w+)\s* \s*(\w+)/, “$2:$1”);
// “leo:hello!”
2.2.4 split
将一个字符串，按照指定符号分割成一个字符串数组。 str.split(sub[, maxlength]):
str: 源字符串
sub: 指定的分割符号或正则
maxlength: 源字符串
let str = “hello leo!”;
let res = str.split(); //[“hello leo!”]
let res = str.split(“”); //[“h”, “e”, “l”, “l”, “o”, ” “, “l”, “e”, “o”, “!”]
let res = str.split(” “);//[“hello”, “leo!”]
let res = str.split(/\s+/);//[“hello”, “leo!”]
let res = str.split(“”,3);//[“h”, “e”, “l”]
2.3 使用情况
当我们想要查找一个字符串中的一个匹配是否找到，可以用test或search方法。
当我们想要得到匹配的更多信息，我们就需要用到exec或match方法。
3.正则表达式符号介绍
详细的每个符号的用法，可以查阅 W3school JavaScript RegExp 对象
3.1 修饰符
修饰符
描述
i
执行对大小写不敏感的匹配。
g
执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m
执行多行匹配。
let str = “hello leo!”
let res = /Leo/i.test(str); // i 不区分大小写 所以返回true
let res = /Leo/.test(str); // fasle
3.2 方括号
用于查找指定返回之内的字符：
表达式
描述
[abc]
查找方括号之间的任何字符。
[^abc]
查找任何不在方括号之间的字符。
[0-9]
查找任何从 0 至 9 的数字。
[a-z]
查找任何从小写 a 到小写 z 的字符。
[A-Z]
查找任何从大写 A 到大写 Z 的字符。
[A-z]
查找任何从大写 A 到小写 z 的字符。
[adgk]
查找给定集合内的任何字符。
[^adgk]
查找给定集合外的任何字符。
(red)
查找任何指定的选项。
let str = “hello leo!”;
let res = str.match(/[a-m]/g);
//[“h”, “e”, “l”, “l”, “l”, “e”]
let res = str.match(/[^a-m]/g);
//[“o”, ” “, “o”, “!”]
3.3 元字符
元字符是拥有特殊含义的字符：
元字符
描述
.
查找单个字符，除了换行和行结束符。
\w
查找单词字符。
\W
查找非单词字符。
\d
查找数字。
\D
查找非数字字符。
\s
查找空白字符。
\S
查找非空白字符。
\b
匹配单词边界。
\B
匹配非单词边界。
\0
查找 NUL 字符。
\n
查找换行符。
\f
查找换页符。
\r
查找回车符。
\t
查找制表符。
\v
查找垂直制表符。
\xxx
查找以八进制数 xxx 规定的字符。
\xdd
查找以十六进制数 dd 规定的字符。
\uxxxx
查找以十六进制数 xxxx 规定的 Unicode 字符。
let str = “hello leo hi pingan!”;
let res = str.match(/o\s/g);
//[“o “, “o “]
let res = str.match(/\s/g);
//[” “, ” “, ” “]
3.4 量词
量词
描述
n+
匹配任何包含至少一个 n 的字符串。
n*
匹配任何包含零个或多个 n 的字符串。
n?
匹配任何包含零个或一个 n 的字符串。
n{X}
匹配包含 X 个 n 的序列的字符串。
n{X,Y}
匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}
匹配包含至少 X 个 n 的序列的字符串。
n$
匹配任何结尾为 n 的字符串。
^n
匹配任何开头为 n 的字符串。
?=n
匹配任何其后紧接指定字符串 n 的字符串。
?!n
匹配任何其后没有紧接指定字符串 n 的字符串。
let str = “hello leo!”;
let res = str.match(/^hello/g);
// [“hello”]
let res = str.match(/^pingan/g);
//null
4. 正则表达式拓展（ES6）
4.1 介绍
在ES5中有两种情况。
参数是字符串，则第二个参数为正则表达式的修饰符。
let a = new RegExp(‘abc’, ‘i’);
// 等价于
let a = /abx/i;
参数是正则表达式，返回一个原表达式的拷贝，且不能有第二个参数，否则报错。
let a = new RegExp(/abc/i);
//等价于
let a = /abx/i;
let a = new RegExp(/abc/, ‘i’);
// Uncaught TypeError
ES6中使用： 第一个参数是正则对象，第二个是指定修饰符，如果第一个参数已经有修饰符，则会被第二个参数覆盖。
new RegExp(/abc/ig, ‘i’);
4.2 字符串的正则方法
常用的四种方法：match()、replace()、search()和split()。
4.3 u修饰符
添加u修饰符，是为了处理大于uFFFF的Unicode字符，即正确处理四个字节的UTF-16编码。
/^\uD83D/u.test(‘\uD83D\uDC2A’); // false
/^\uD83D/.test(‘\uD83D\uDC2A’); // true
由于ES5之前不支持四个字节UTF-16编码，会识别为两个字符，导致第二行输出true，加入u修饰符后ES6就会识别为一个字符，所以输出false。
注意： 加上u修饰符后，会改变下面正则表达式的行为：
(1)点字符
点字符(.)在正则中表示除了换行符以外的任意单个字符。对于码点大于0xFFFF的Unicode字符，点字符不能识别，必须加上u修饰符。
var a = “????”;
/^.$/.test(a); // false
/^.$/u.test(a); // true
(2)Unicode字符表示法
使用ES6新增的大括号表示Unicode字符时，必须在表达式添加u修饰符，才能识别大括号。
/\u{61}/.test(‘a’); // false
/\u{61}/u.test(‘a’); // true
/\u{20BB7}/u.test(‘????’); // true
(3)量词
使用u修饰符后，所有量词都会正确识别码点大于0xFFFF的 Unicode 字符。
/a{2}/.test(‘aa’); // true
/a{2}/u.test(‘aa’); // true
/????{2}/.test(‘????????’); // false
/????{2}/u.test(‘????????’); // true
(4)i修饰符
不加u修饰符，就无法识别非规范的K字符。
/[a-z]/i.test(‘\u212A’) // false
/[a-z]/iu.test(‘\u212A’) // true
检查是否设置u修饰符：使用unicode属性。
const a = /hello/;
const b = /hello/u;
a.unicode // false
b.unicode // true
4.4 y修饰符
y修饰符与g修饰符类似，也是全局匹配，后一次匹配都是从上一次匹配成功的下一个位置开始。区别在于，g修饰符只要剩余位置中存在匹配即可，而y修饰符是必须从剩余第一个开始。
var s = ‘aaa_aa_a’;
var r1 = /a+/g;
var r2 = /a+/y;
r1.exec(s) // [“aaa”]
r2.exec(s) // [“aaa”]
r1.exec(s) // [“aa”] 剩余 ‘_aa_a’
r2.exec(s) // null
lastIndex属性:指定匹配的开始位置：
const a = /a/y;
a.lastIndex = 2; // 从2号位置开始匹配
a.exec(‘wahaha’); // null
a.lastIndex = 3; // 从3号位置开始匹配
let c = a.exec(‘wahaha’);
c.index; // 3
a.lastIndex; // 4
返回多个匹配： 一个y修饰符对match方法只能返回第一个匹配，与g修饰符搭配能返回所有匹配。
‘a1a2a3’.match(/a\d/y); // [“a1”]
‘a1a2a3’.match(/a\d/gy); // [“a1”, “a2”, “a3”]
检查是否使用y修饰符： 使用sticky属性检查。
const a = /hello\d/y;
a.sticky; // true
4.5 flags属性
flags属性返回所有正则表达式的修饰符。
/abc/ig.flags; // ‘gi’
5. 正则表达式拓展（ES9）
在正则表达式中，点(.)可以表示任意单个字符，除了两个：用u修饰符解决四个字节的UTF-16字符，另一个是行终止符。 终止符即表示一行的结束，如下四个字符属于“行终止符”：
U+000A 换行符（n）
U+000D 回车符（r）
U+2028 行分隔符（line separator）
U+2029 段分隔符（paragraph separator）
/foo.bar/.test(‘foo\nbar’)
// false
上面代码中，因为.不匹配\n，所以正则表达式返回false。 换个醒，可以匹配任意单个字符：
/foo[^]bar/.test(‘foo\nbar’)
// true
ES9引入s修饰符，使得.可以匹配任意单个字符：
/foo.bar/s.test(‘foo\nbar’) // true
这被称为dotAll模式，即点（dot）代表一切字符。所以，正则表达式还引入了一个dotAll属性，返回一个布尔值，表示该正则表达式是否处在dotAll模式。
const re = /foo.bar/s;
// 另一种写法
// const re = new RegExp(‘foo.bar’, ‘s’);
re.test(‘foo\nbar’) // true
re.dotAll // true
re.flags // ‘s’
/s修饰符和多行修饰符/m不冲突，两者一起使用的情况下，.匹配所有字符，而^和$匹配每一行的行首和行尾。
参考资料
1.MDN 正则表达式 2.W3school JavaScript RegExp 对象
本部分内容到这结束
Author
王平安
E-mail
pingan8787@qq.com
博 客
www.pingan8787.com
微 信
pingan8787
每日文章推荐
https://github.com/pingan8787…
ES小册
es.pingan8787.com
发表回复