前端入门——正则表达式

1.正则表达式的创建和使用

创建正则表达式的两种方式

使用正则表达式字面量

const reg = /[a-z]\d+[a-z]/i;

优点：

• 简单方便
• 不需要考虑二次转义

 缺点：

• 子内容无法重复使用
• 过长的正则导致可读性差

使用 RegExp 构造函数

const alphabet = '[a-z]'; const reg = new RegExp(`${alphabet}\\d+${alphabet}`, 'i');

• 子内容可以重复使用
• 可以通过控制子内容的粒度提高可读性

缺点

• 二次转义的问题非常容易导致 bug
•  

正则表达式的常见用法

RegExp.prototype.test()

const reg = /[a-z]\d+[a-z]/i;

reg.test('a1a'); // true
reg.test('1a1'); // false
reg.test(Symbol('a1a')); // TypeError

 

要求输入字符串，如果输入的不是字符串类型，会尝试进行类型转换，转换失败会抛出 TypeError

输出

true 或者 false，表示匹配成功或失败

RegExp.prototype.source  和 RegExp.prototype.flags

 

const reg = /[a-z]\d+[a-z]/ig;

reg.source; // "[a-z]\d+[a-z]"
reg.flags; // "gi"

get RegExp.prototype.source

返回当前正则表达式的模式文本的字符串

get RegExp.prototype.flags

es2015新增，返回当前正则表达式的修饰符的字符串，会对修饰符按照字母升序进行排序（gimsuy

RegExp.prototype.exec() 和 String.prototype.match()

const reg = /[a-z]\d+[a-z]/i; reg.exec('a1a'); // ["a1a", index: 0, input: "a1a", groups: undefined] reg.exec('1a1'); // null 'a1a'.match(reg); // ["a1a", index: 0, input: "a1a", groups: undefined] '1a1'.match(reg); // null

RegExp.prototype.exec 要求输入字符串，遇到非字符串类型会尝试转换

String.prototype.match 要求输入正则表达式，遇到其它类型会先尝试转成字符串，再以字符串为 source 创建正则表达式

匹配成功，返回匹配结果

匹配失败，返回 null

RegExp.prototype.exec() 和 String.prototype.match()

const reg = /(a)/g; reg.exec('a1a'); // ["a", "a", index: 0, input: "a1a", groups: undefined] 'a1a'.match(reg); // ["a", "a"]

当正则表达式含有 g 修饰符时，RegExp.prototype.exec 每次只返回一个匹配结果，数据格式和不含 g 修饰符相同。

 

String.prototype.match 会返回所有的匹配结果，数据格式会变为字符串数组。

 

由于 String.prototype.match 返回的数据格式不固定，因此大多数情况都建议使用 RegExp.prototype.exec

RegExp.prototype.lastIndex

const reg = /(a)/g;
const str = 'a1a';

reg.lastIndex; // 0
reg.exec('a1a'); // ["a", "a", index: 0, input: "a1a", groups: undefined]
reg.lastIndex; // 1
reg.exec('a1a'); // ["a", "a", index: 2, input: "a1a", groups: undefined]
reg.lastIndex; // 3
reg.exec('a1a'); // null
reg.lastIndex; // 0

 

当前正则表达式最后一次匹配成功的结束位置（也就是下一次匹配的开始位置）

 

注意：lastIndex 不会自己重置，只有当上一次匹配失败才会重置为 0 ，因此，当你需要反复使用同一个正则表达式的时候，请在每次匹配新的字符串之前重置 lastIn