JavaScript 正则表达式

JavaScript 正则表达式

1. 概述

正则表达式用于描述各种复杂的字符串关系，使用正则表达式能够更加灵活便捷地处理字符串，它是使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

2. 字符串规则描述符

>点击此处可以直接查询元字符表

2.1 定位符：描述字符的边界

2.2 限定符：描述重复匹配的次数

【例】写出从字符串string的任意一行中匹配颜色名和颜色值的正则表达式：

// 待提取的字符串
var str = `$navajowhite:          #FFDEAD !default;
$moccasin:             #FFE4B5 !default;
$bisque:               #FFE4C4 !default;
$mistyrose:            #FFE4E1 !default;
$blanchedalmond:       #FFEBCD !default;
$lavenderblush:        #FFF0F5 !default;`

2.3 字符描述

例如，匹配IPV4地址：

var url = 'https://127.0.0.1:8888/Home/Welcome';
var re = /[1-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[1-9]{1,3}/;
var res = re[Symbol.matchAll](url);
console.log(Array.from(res, x => x[0])[0])

Out[1]:127.0.0.1

2.4 管道符：“或”匹配逻辑

管道符就是一根竖线：|，再正则表达式中标识”或“。由于匹配方向时从左向右进行的，假如有两个正则表达式A和B，那么使用 A|B 匹配字符串时，只要前一个样式完全匹配成功，那么后一个就不再匹配。

2.5 转义字符：将特殊符号标识为普通字符

在正则表达式中用于标识特殊含义的符号如.用于标识一个任意的非换行符字符，^标识起始字符，等等。但是我们希望匹配到这些字符本身也是经常遇到的情况，如IPV4地址使用.作为分割符。因此我们如果需要完整提取IPV4地址就需要表示.本身。由于直接使用点已经有了其它的含义，因此我们使用一个\号进行转义，即使用\.来表示点（.）。其它在正则中有特殊含义的符号也可以使用类似的方式。

2.6 分组

与数学计算中采用小括号()进行算式分组一样，正则模板也能够分组表达，目的是将某一部分正则模板作为一个整体表达，例如模板：

var str = '4aderf weew16a dawedb_ewwecs aswed 6aew';
var re = /(we|ew){1}/g;
var res = re[Symbol.matchAll](str);
console.log(Array.from(res1, x => x[0]))

Out[]: [‘we’, ‘ew’, ‘we’, ‘ew’, ‘we’, ‘we’, ‘ew’]

这里将(we|ew)作为一个组，{n}对改组指定重复匹配的次数。

3 创建正则表达式对象的方法

以下三种方法创建都是可以的：

• /pattern/flags
• new RegExp(pattern[, flags])
• RegExp(pattern[, flags])

3.1 正则对象的字面量

字面量用于表达源代码中一个固定值。在 JavaScript 中字正则面量也可以用于创建正则表达式对象，当表达式被赋值时，字面量形式提供正则表达式的编译状态，当正则表达式保持为常量时使用字面量。例如当你在循环中使用字面量构造一个正则表达式时，正则表达式不会在每一次迭代中都被重新编译（recompiled）。

3.2 通过调用RegExp对象的构造函数创建

var re = /ab+c/;

3.3 直接写正则表达式字面量创建

var re = new RegExp("ab+c");

3.4 比较

4. RegExp 对象

RegExp 对象用于将文本与一个模式匹配。

4.1 构造函数 RegExp()

RegExp()构造函数用于创建一个RegExp对象，这与直接使用字面量创建的方式在多数情况下是可以通用的。

以下三个表达式创建相同的正则表达式：

/ab+c/i
new RegExp(/ab+c/, 'i') // 字面量
new RegExp('ab+c', 'i') // 构造函数

参数

pattern ：正则模板

正则表达式的文本。

从ES5开始，这也可以是另一个RegExp对象或文字(仅用于两个RegExp构造函数符号)。模式可以包含特殊字符special characters来匹配比字面值字符串更广泛的值范围。

flags （标志）

如果指定， flags 是包含要添加的标志的字符串。ES6开始，如果为模式提供了一个对象，flags字符串将替换该对象的任何标志(并且lastIndex将重置为0)。如果没有指定flags并且提供了一个正则表达式对象，则该对象的flags(和lastIndex值)将被复制。flags 可包含下列任何字符的组合：

flag 不写在正则表达式里，标记位于表达式之外，格式为：

/pattern/flags

4.2 属性

4.2.1 静态属性

1. get RegExp[@@species]

species 是一个访问器属性，它返回 RegExp 对象 的默认构造器。子类构造器可能会覆盖它，来修改构造器的指派。

原始对象中的 species 属性

species属性返回默认的构造函数，即RegExp对象的RegExp构造函数：

RegExp[Symbol.species]; // RegExp()函数

派生对象中的 species 属性

在派生的集合对象中（例如，您的自定义regexp MyRegExp），MyRegExp种类是MyRegExp构造函数。但是，您可能希望覆盖它，以便在派生类方法中返回父RegExp对象：

class MyRegExp extends RegExp {
  // 将 MyRegExp species 覆盖到父 RegExp 的构造函数
  static get [Symbol.species]() { return RegExp; }
}

例如：

class MyRegExp extends RegExp {
  // 将MyRegExp种类覆盖到父RegExp构造函数
  static get [Symbol.species]() {
    return RegExp;
  }
}
const regex1 = new MyRegExp('foo', 'g');
console.log(regex1.test('football'));
// 期望输出: true

2 RegExp.lastIndex

仅当正则表达式实例使用 g 标志指示全局搜索 或 使用 y 标志指示粘性搜索时，才设置此属性。#知识点链接

lastIndex 是 RegExp 实例的读/写整数属性，指定开始下一个匹配的索引。lastIndex不是RegExp原型的属性，而是仅从 RegExp 实例中暴露出来。

对给定输入调用 test() 和 exec() 时，适用以下规则：

• 如果lastIndex 大于 输入的长度，exec() 或 test() 将找不到匹配，lastIndex 将被设置为0。
• 如果lastIndex小于或等于输入的长度，exec()或test()将尝试匹配从lastIndex开始的输入。

• 如果 exec() 或 test() 找到匹配项，lastIndex则将设置为输入中匹配字符串的结尾位置。
• 如果 exec() 或未 test() 找到匹配项，lastIndex则将设置为 0。

例子

考虑以下语句序列：

var re = /(hi)?/g;

匹配空字符串：

console.log(re.exec('hi'));
console.log(re.lastIndex);

返回 lastIndex 等于2的["hi", "hi"]：

console.log(re.exec('hi'));
console.log(re.lastIndex);

返回 ["", undefined] ，一个空数组，其第零个元素是匹配字符串。在本例中，空字符串是因为lastIndex是2(现在仍然是2)，hi的长度是2。

4.2.2 实例属性

1. flags 属性

含有 RegExp 对象 flags 的字符串。

flags属性中的标志以字典序排序（从左到右，即"gimuy"）。

属性描述符

例子

/foo/ig.flags;   // "gi"
/bar/myu.flags;  // "muy"

2. dotAll 属性

. 是否要匹配新行（newlines）。

dotAll 属性表明是否在正则表达式中一起使用"s"修饰符（引入/s修饰符，使得.可以匹配任意单个字符）。

dotAll 是一个只读的属性，属于单个正则表达式实例。

如果使用了"s"修饰符，dotAll 的值将返回Boolean类型的true，否则将返回false。“s"修饰符表示，特殊字符”."应另外匹配字符串中的下述行终结符（line terminator characters），否则将会失配：

• U+000A 换行符（“\n”）
• U+000D 回车符（“\r”）
• U+2028 行分隔符（line separator）
• U+2029 段分隔符（paragraph separator）
  这实际上意味着".“将会匹配任意的单个Unicode Basic Multilingual Plane (BMP)字符。若要使其与astral字符（大于\uFFFF的Unicode字符）匹配，你应当使用"u”（Unicode）修饰符。一起使用这两个修饰符，"."将无一例外地匹配任意Unicode字符。

属性描述符

3. global 属性

针对字符串中所有可能的匹配项测试正则表达式，还是仅针对第一个匹配项。

global 的值是布尔对象，如果使用了 “g” 标志，则返回 true；否则返回 false。 “g” 标志意味着正则表达式应该测试字符串中所有可能的匹配。

你无法直接更改此属性。

属性描述符

例子

var regex = new RegExp("foo", "g")
console.log(regex.global) // true

4. ignoreCase 属性

匹配文本的时候是否忽略大小写。

ignoreCase 的值是布尔对象，如果使用了"i" 标志，则返回 true；否则，返回 false。“i” 标志意味着在字符串进行匹配时，应该忽略大小写。

你无法直接更改此属性。

属性描述符

例子

var regex = new RegExp("foo", "i")
console.log(regex.ignoreCase) // true

5. multiline 属性

是否进行多行搜索。

multiline 是一个布尔对象，如果使用了 “m” 标志，则返回 true；否则，返回 false。“m” 标志意味着一个多行输入字符串被看作多行。例如，使用 “m”，“^” 和 “$” 将会从只匹配正则字符串的开头或结尾，变为匹配字符串中任一行的开头或结尾。

你无法直接更改此属性。

属性描述符

例子

var regex = new RegExp("foo", "m")
console.log(regex.multiline) // true

6. source 属性

正则表达式的文本。

该属性返回一个值为当前正则表达式对象的模式文本的字符串，该字符串不会包含正则字面量两边的斜杠以及任何的标志字符。

例子

var regex = /fooBar/ig;
console.log(regex.source); // "fooBar"，不包含 /.../ 和 "ig"。

7. sticky 属性

该属性是正则表达式对象的只读属性，表示搜索是否是 sticky（粘性），即仅从正则表达式的 lastIndex 属性表示的索引处搜索 。

sticky 的值是 Boolean ，并在 y 标志使用时为真; 否则为假。y 标志指示，仅从正则表达式的 lastIndex 属性表示的索引处为目标字符串匹配（并且不会尝试从后续索引匹配）。如果一个表达式同时指定了 sticky 和 global，其将会忽略 global 标志。

你不能直接更改这个属性，它是只读的。

例子

使用带 sticky 标志的正则表达式：

var str = '#foo#';
var regex = /foo/y;
regex.lastIndex = 1;
regex.test(str); // true （译注：此例仅当 lastIndex = 1 时匹配成功，这就是 sticky 的作用）
regex.lastIndex = 5;
regex.test(str); // false （lastIndex 被 sticky 标志考虑到，从而导致匹配失败）
regex.lastIndex; // 0 （匹配失败后重置）

8.unicode 属性

Unicode 功能是否开启。即该属性表明正则表达式带有 "u" 标志。 unicode 是正则表达式独立实例的只读属性。

例如：

var regex = new RegExp('\u{61}', 'u');
console.log(regex.unicode); // true

4.3 实例方法

4.3.1 已废弃：RegExp.prototype.compile()方法

已废弃的compile() 方法被用于在脚本执行过程中（重新）编译正则表达式。与RegExp构造函数基本一样。

不推荐compile方法，可以使用 RegExp 构造函数来得到相同效果

语法

regexObj.compile(pattern, flags)

参数

• pattern 正则表达式的文本
  
• flags 如果指定，标志可以具有以下值的任意组合：

使用compile方法：

regexObj.compile("new foo", "g");

相应改为使用构造函数的写法：

var regexObj = new RegExp("foo", "gi");

4.3.2 RegExp.prototype.exec()方法

在该字符串中执行匹配项的搜索。

// 匹配 "quick brown" 后跟 "jumps"，忽略中间的字符
// 记住 "brown" 和 "jumps"
// 忽略大小写
var re = /quick\s(brown).+?(jumps)/ig;
var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');

语法

regexObj.exec(str)

参数

• str 要匹配正则表达式的字符串。

返回值

例子：查找所有匹配

当正则表达式使用 "g" 标志时，可以多次执行 exec 方法来查找同一个字符串中的成功匹配。当你这样做时，查找将从正则表达式的 lastIndex 属性指定的位置开始。（test() 也会更新 lastIndex 属性）。注意，即使再次查找的字符串不是原查找字符串时，lastIndex 也不会被重置，它依旧会从记录的 lastIndex 开始。

例如：

var myRe = /ab*/g;
var str = 'abbcdefabh';
var myArray;
while ((myArray = myRe.exec(str)) !== null) {
  var msg = 'Found ' + myArray[0] + '. ';
  msg += 'Next match starts at ' + myRe.lastIndex;
  console.log(msg);
}

运行结果为：

Found abb. Next match starts at 3
Found ab. Next match starts at 9

4.3.3 RegExp.prototype.test()方法

test() 方法执行一个检索，用来查看正则表达式与指定的字符串是否匹配。返回 true 或 false。

语法

regexObj.test(str)

参数

• str 用来与正则表达式匹配的字符串

返回值

例子

测试hello是否在字符串str开始：

let str = 'hello world!';
let result = /^hello/.test(str);
console.log(result);

Out[]:true

4.3.4 RegExp.prototype[@@match]()方法

该方法为自定义 RegExp 子类中的匹配行为而存在。

该方法用于获取匹配结果。这个方法在 String.prototype.match() 的内部调用。例如，下面的两个方法返回相同结果。

'abc'.match(/a/);
/a/[Symbol.match]('abc');

语法

regexp[Symbol.match](str)

参数

例子

直接调用

这个方法的使用方式和 String.prototype.match() 相同，不同之处是 this 和参数顺序。

var re = /[0-9]+/g;
var str = '2022-01-02';
var result = re[Symbol.match](str);
console.log(result);  // ["2022", "01", "02"]

在子类中调用

RegExp 的子类可以覆写 @@match方法来修改默认行为。

class MyRegExp extends RegExp {
  [Symbol.match](str) {
    var result = RegExp.prototype[Symbol.match].call(this, str);
    if (!result) return null;
    return {
      group(n) {
        return result[n];
      }
    };
  }
}
var re = new MyRegExp('([0-9]+)-([0-9]+)-([0-9]+)');
var str = '2016-01-02';
var result = str.match(re); // String.prototype.match 调用 re[@@match].
console.log(result.group(1)); // 2016
console.log(result.group(2)); // 01
console.log(result.group(3)); // 02

4.3.5 RegExp.prototype[@@matchAll]()方法

该方法返回对字符串使用正则表达式的所有匹配项。

语法

regexp[Symbol.matchAll](str)

参数

例子

直接调用

除了this 的不同以及参数顺序的的差异，本方法的使用方法几乎与 String 的 matchAll() 方法相同。

var re = /[0-9]+/g;
var str = '2016-01-02';
var result = re[Symbol.matchAll](str);
console.log(Array.from(result, x => x[0]));
// ["2016", "01", "02"]

在子类中使用@@matchAll

RegExp的子类可以重写@@matchAll方法来修改默认行为。例如，返回一个Array而不是iterator：

class MyRegExp extends RegExp {
  [Symbol.matchAll](str) {
    var result = RegExp.prototype[Symbol.matchAll].call(this, str);
    if (!result) {
      return null;
    } else {
      return Array.from(result);
    }
  }
}
var re = new MyRegExp('([0-9]+)-([0-9]+)-([0-9]+)', 'g');
var str = '2016-01-02|2019-03-07';
var result = str.matchAll(re);
console.log(result[0]); // [ "2016-01-02", "2016", "01", "02" ]
console.log(result[1]); // [ "2019-03-07", "2019", "03", "07" ]

4.3.6 RegExp.prototype[@@replace]()方法

该方法会在一个字符串中用给定的替换器，替换所有符合正则模式的匹配项，并返回替换后的新字符串结果。用来替换的参数可以是一个字符串或是一个针对每次匹配的回调函数。

语法

regexp[Symbol.replace](str, newSubStr|function)

参数

返回值

用替换器替换相应匹配项后的新字符串。

4.3.7 RegExp.prototype[@@search]()方法

语法

regexp[Symbol.search](str)

参数

例子

在子类中使用@@search——{jsxref(“RegExp”)}} 的子类可以覆写 @@search方法来修改默认行为。

class MyRegExp extends RegExp {
  constructor(str) {
    super(str)
    this.pattern = str;
  }
  [Symbol.search](str) {
    return str.indexOf(this.pattern);
  }
}
var re = new MyRegExp('a+b');
var str = 'ab a+b';
var result = str.search(re); // String.prototype.search 调用 re[@@search].
console.log(result); // 3

返回值

4.3.8 RegExp.prototype[@@split]()方法

如果切割器是一个RegExp对象，这个方法就将在 String.prototype.split() 的内部调用。例如，下面的两个方法返回相同结果。如果str参数不是一个RegExp 对象, String.prototype.split() 就不会调用该方法，也不会创建一个 RegExp 对象。

'a-b-c'.split(/-/);
/-/[Symbol.split]('a-b-c');

语法

RegExp.prototype[@@split]()

返回值

包含其子字符串的Array 。

例子

直接调用

这个方法的使用方式和 String 的 split() 方法效果相同，不同之处是 this 和参数顺序。

var re = /-/g;
var str = '2016-01-02';
var result = re[Symbol.split](str);
console.log(result);  // ["2016", "01", "02"]

在子类中使用 @@split

RegExp 的子类可以覆写 @@split方法来修改默认行为。

class MyRegExp extends RegExp {
  [Symbol.split](str, limit) {
    var result = RegExp.prototype[Symbol.split].call(this, str, limit);
    return result.map(x => "(" + x + ")");
  }
}
var re = new MyRegExp('-');
var str = '2016-01-02';
var result = str.split(re); // String.prototype.split 调用 re[@@split].
console.log(result); // ["(2016)", "(01)", "(02)"]

4.3.9 非标准：RegExp.prototype.toSource()方法

返回一个字符串,代表当前对象的源代码。

语法

regexObj.toSource()

返回值

• 对于内置的RegExp对象， toSource() 方法返回如下字符串：

function RegExp() {
    [native code]
}

• 对于一个 RegExp实例， toSource() 方法返回代表该正则的字符串。

4.3.10 RegExp.prototype.toString()方法

返回一个表示该正则表达式的字符串。

RegExp 对象覆盖了 Object 对象的 toString() 方法，并没有继承 Object.prototype.toString()。对于 RegExp 对象，toString 方法返回一个该正则表达式的字符串形式。

语法

regexObj.toString()

例子

输出 RegExp 对象的字符串值：

myExp = new RegExp("a+b+c");
console.log(myExp.toString());

Out[1]:“/a+b+c/”

foo = new RegExp("bar", "g");
console.log(foo.toString());

Out[2]:“/bar/g”

附录： 查询

元字符表

优先级（从上到下）

标记

参考资料

[1] jcLee95 的 CSDN 博文 => Python 正则表达式https://blog.csdn.net/qq_28550263/article/details/123482797

[2] 菜鸟教程 => 正则表达式(https://www.runoob.com/regexp/regexp-tutorial.html)

[3] MDN web Docs => JavaScript 参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference