• 正则系列之RegExp使用正则表达式


    文章の目录


    正则表达式可以被用于 RegExpexectest 方法以及 String 的 match、replace、search 和 split 方法。

    本文主要介绍 RegExp 的相关属性和方法。

    一、静态属性

    1、get RegExp[@@species]

    1.1、概述

    RegExp[@@species] 访问器属性返回RegExp 的构造器。

    1.2、语法

    RegExp[Symbol.species]
    
    • 1

    1.3、实例

    在派生的正则类(也就是你自定义的正则类 MyRegExp)中,MyRegExp 的 species 是 MyRegExp 构造器。但是,你可能希望覆盖它,以便在你的派生类方法中,返回 RegExp 父类对象:

    class MyRegExp extends RegExp {
    	// 将 MyRegExp species 覆盖为 RegExp 父类构造器
    	static get [Symbol.species]() {
    		return RegExp;
    	}
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2、RegExp.lastIndex

    2.1、概述

    lastIndex 是正则表达式的一个可读可写的整型属性,用来指定下一次匹配的起始索引。

    2.2、语法

    lastIndex = regExpObj.lastIndex;
    
    • 1

    2.3、描述

    只有正则表达式使用了表示全局检索的 “g” 或者粘性检索的 “y” 标志时,该属性才会起作用。此时应用下面的规则:

    • 如果 lastIndex 大于字符串的长度,则 regexp.test 和 regexp.exec 将会匹配失败,然后 lastIndex 被设置为 0。
    • 如果 lastIndex 等于或小于字符串的长度,则该正则表达式匹配从 lastIndex 位置开始的字符串。
      • 如果 regexp.test 和 regexp.exec 匹配成功,lastIndex 会被设置为紧随最近一次成功匹配的下一个位置。
      • 如果 regexp.test 和 regexp.exec 匹配失败,lastIndex 会被设置为 0

    2.4、示例

    考虑下面的语句:

    var re = /(hi)?/g;
    
    • 1

    匹配空字符串

    console.log(re.exec("hi"));
    console.log(re.lastIndex);
    
    • 1
    • 2

    返回 [“hi”, “hi”] ,lastIndex 等于 2。

    console.log(re.exec("hi"));
    console.log(re.lastIndex);
    
    • 1
    • 2

    返回 [“”, undefined],即一个数组,其第 0 个元素为匹配的字符串。此种情况下为空字符串,是因为 lastIndex 为 2(且一直是 2),“hi” 长度为 2。

    二、实例属性

    1、RegExp.prototype.dotAll

    1.1、概述

    dotAll 属性表明是否在正则表达式中一起使用"s"修饰符(引入/s 修饰符,使得。可以匹配任意单个字符)。dotAll 是一个只读的属性,属于单个正则表达式实例。

    1.2、描述

    如果使用了"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 字符。

    无法直接修改此属性。

    2、RegExp.prototype.flags

    2.1、概述

    flags属性返回一个字符串,由当前正则表达式对象的标志组成。

    2.2、描述

    flags属性中的标志以字典序排序(从左到右,即"gimuy")。

    2.3、示例

    /foo/gi.flags; // "gi"
    /bar/muy.flags; // "muy"
    
    • 1
    • 2

    2.4、兼容性

    if (RegExp.prototype.flags === undefined) {
    	Object.defineProperty(RegExp.prototype, "flags", {
    		configurable: true,
    		get: function () {
    			return this.toString().match(/[gimuy]*$/)[0];
    		}
    	});
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    3、RegExp.prototype.global

    3.1、概述

    global 属性表明正则表达式是否使用了 “g” 标志。global 是一个正则表达式实例的只读属性。

    3.2、描述

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

    你无法直接更改此属性。

    3.3、示例

    var regex = new RegExp("foo", "g");
    
    console.log(regex.global); // true
    
    • 1
    • 2
    • 3

    4、RegExp.prototype.hasIndices

    4.1、概述

    hasindexes访问器属性指示是否将d标志与正则表达式一起使用。

    4.2、描述

    如果使用了d标志,则regexp.prototype.hasindexes的值为true;否则,false。d标志表示正则表达式匹配的结果应该包含每个捕获组的子字符串的开始和结束索引。它不会以任何方式改变正则表达式的解释或匹配行为,而只是在匹配结果中提供额外的信息。hasindexes的set访问器未定义。您不能直接更改此属性。

    4.3、示例

    const str1 = "foo bar foo";
    
    const regex1 = /foo/dg;
    
    console.log(regex1.hasIndices); // Output: true
    
    console.log(regex1.exec(str1).indices[0]); // Output: Array [0, 3]
    console.log(regex1.exec(str1).indices[0]); // Output: Array [8, 11]
    
    const str2 = "foo bar foo";
    
    const regex2 = /foo/;
    
    console.log(regex2.hasIndices); // Output: false
    
    console.log(regex2.exec(str2).indices); // Output: undefined
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    5、RegExp.prototype.ignoreCase

    5.1、概述

    ignoreCase 属性表明正则表达式是否使用了 “i” 标志。ignoreCase 是正则表达式实例的只读属性。

    5.2、描述

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

    你无法直接更改此属性。

    5.3、示例

    var regex = new RegExp("foo", "i");
    
    console.log(regex.ignoreCase); // true
    
    • 1
    • 2
    • 3

    6、RegExp.prototype.multiline

    6.1、概述

    multiline 属性表明正则表达式是否使用了 “m” 标志。multiline 是正则表达式实例的一个只读属性。

    6.2、描述

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

    你无法直接更改此属性。

    6.3、示例

    var regex = new RegExp("foo", "m");
    
    console.log(regex.multiline); // true
    
    • 1
    • 2
    • 3

    7、RegExp.prototype.source

    7.1、概述

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

    7.2、示例

    var regex = /fooBar/gi;
    
    console.log(regex.source); // "fooBar",不包含 /.../ 和 "ig"。
    
    • 1
    • 2
    • 3

    8、RegExp.prototype.sticky

    8.1、概述

    sticky 属性反映了搜索是否具有粘性( 仅从正则表达式的 lastIndex 属性表示的索引处搜索 )。sticky 是正则表达式对象的只读属性。

    8.2、描述

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

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

    8.3、示例

    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(匹配失败后重置)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    9、RegExp.prototype.unicode

    9.1、概述

    unicode 属性表明正则表达式带有"u" 标志。 unicode 是正则表达式独立实例的只读属性。

    9.2、描述

    unicode 的值是 Boolean,并且如果使用了 “u” 标志则为 true;否则为 false。“u” 标志开启了多种 Unicode 相关的特性。使用 “u” 标志,任何 Unicode 代码点的转义都会被解释。

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

    9.3、示例

    var regex = new RegExp("\u{61}", "u");
    
    console.log(regex.unicode); // true
    
    • 1
    • 2
    • 3

    三、实例方法

    1、RegExp.prototype.exec()

    1.1、概述

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

    1.2、语法

    exec(str)
    
    • 1

    1.3、参数

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

    1.4、返回值

    如果匹配失败,exec() 方法返回 null,并将正则表达式的 lastIndex 重置为 0 。

    如果匹配成功,exec() 方法返回一个数组,并更新正则表达式对象的 lastIndex 属性。完全匹配成功的文本将作为返回数组的第一项,从第二项起,后续每项都对应一个匹配的捕获组。数组还具有以下额外的属性:

    • index
      匹配到的字符位于原始字符串的基于 0 的索引值。

    • input
      匹配的原始字符串。

    • groups
      一个命名捕获组对象,其键是名称,值是捕获组。若没有定义命名捕获组,则 groups 的值为 undefined。

    • indices 可选
      此属性仅在设置了 d 标志位时存在。它是一个数组,其中每一个元素表示一个子字符串的边界。每个子字符串匹配本身就是一个数组,其中第一个元素表示起始索引,第二个元素表示结束索引。

    1.5、描述

    在设置了 global 或 sticky 标志位的情况下(如 /foo/g 或 /foo/y),JavaScript RegExp 对象是有状态的。它们会将上次成功匹配后的位置记录在 lastIndex 属性中。使用此特性,exec() 可用来对单个字符串中的多次匹配结果进行逐条的遍历(包括捕获到的匹配),而相比之下, String.prototype.match() 只会返回匹配到的结果。

    在使用 exec() 时,global 标志位不会在 sticky 标志位被设置时生效,而 match() 始终会设置 sticky 标志位。

    exec() 是正则表达式的原始方法。许多其它的正则表达式方法会在内部调用 exec()——包括一些字符串方法也会调用 exec(),如 @@replace。虽然 exec() 本身非常强大而又有效,但它通常不能最清楚地表示调用的目的。

    • 如果你只是为了判断是否匹配,请使用 RegExp.prototype.test() 方法代替。
    • 如果你只是为了找出所有匹配正则表达式的字符串而又不关心捕获组,请使用 String.prototype.match() 方法代替。此外,String.prototype.matchAll() 允许你对匹配项进行迭代,这有助于简化匹配字符串的多个部分(带有匹配组)。
    • 如果你只是为了查找在字符串中匹配的索引,请使用 String.prototype.search() 方法代替。

    1.6、示例

    // Match "quick brown" followed by "jumps", ignoring characters in between
    // Remember "brown" and "jumps"
    // Ignore case
    const re = /quick\s(?brown).+?(jumps)/dgi;
    const result = re.exec("The Quick Brown Fox Jumps Over The Lazy Dog");
    
    • 1
    • 2
    • 3
    • 4
    • 5

    2、RegExp.prototype.test()

    2.1、概述

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

    2.2、语法

    regexObj.test(str)
    
    • 1

    2.3、参数

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

    2.4、返回值

    如果正则表达式与指定的字符串匹配 ,返回true;否则false。

    2.5、示例

    let str = "hello world!";
    let result = /^hello/.test(str);
    console.log(result);
    // true
    
    • 1
    • 2
    • 3
    • 4

    3、RegExp.prototype.toString()

    3.1、概述

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

    3.2、语法

    regexObj.toString()
    
    • 1

    3.3、描述

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

    3.4、示例

    myExp = new RegExp("a+b+c");
    alert(myExp.toString()); // 显示 "/a+b+c/"
    
    foo = new RegExp("bar", "g");
    alert(foo.toString()); // 显示 "/bar/g"
    
    • 1
    • 2
    • 3
    • 4
    • 5

    4、RegExp.prototype@@match

    4.1、概述

    对正则表达式匹配字符串时,**@@match**方法用于获取匹配结果。

    4.2、语法

    regexp[Symbol.match](str)
    
    • 1

    4.3、参数

    • str
      match 的目标参数是String

    4.4、返回值

    match 方法会返回一个数组,它包括整个匹配结果,和通过捕获组匹配到的结果,如果没有匹配到则返回 null

    4.5、描述

    这个方法在 String.prototype.match() 的内部调用。例如,下面的两个方法返回相同结果。

    "abc".match(/a/);
    
    /a/[Symbol.match]("abc");
    
    • 1
    • 2
    • 3

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

    4.6、示例

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

    var re = /[0-9]+/g;
    var str = "2016-01-02";
    var result = re[Symbol.match](str);
    console.log(result); // ["2016", "01", "02"]
    
    • 1
    • 2
    • 3
    • 4

    在子类中使用@@match
    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 calls re[@@match].
    console.log(result.group(1)); // 2016
    console.log(result.group(2)); // 01
    console.log(result.group(3)); // 02
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    5、RegExp.prototype@@matchAll

    5.1、概述

    **[@@matchAll]**方法返回对字符串使用正则表达式的所有匹配项。

    5.2、语法

    regexp[Symbol.matchAll](str)
    
    • 1

    5.3、参数

    • str
      一个String的匹配对象。

    5.4、返回值

    一个迭代器。

    5.5、描述

    本方法在String.prototype.matchAll()中被内部调用。例如,以下两个示例返回相同的结果。

    "abc".matchAll(/a/);
    
    /a/[Symbol.matchAll]("abc");
    
    • 1
    • 2
    • 3

    本方法用于自定义RegExp子类中的匹配行为。

    5.6、示例

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

    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"]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在子类中使用@@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" ]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    6、RegExp.prototype@@replace

    6.1、概述

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

    6.2、语法

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

    6.3、参数

    • str
      正则替换的目标字符串。

    • newSubStr (replacement)
      类型为 String 的替换器。支持大多数特殊的替换匹配模式;

    • function (replacement)
      生成新的子字符串的回调函数替换器。

    6.4、返回值

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

    6.5、描述

    如果匹配模式也是RegExp对象,这个方法在 String.prototype.replace() 的内部调用。例如,下面的两个方法返回相同结果。

    "abc".replace(/a/, "A");
    
    /a/[Symbol.replace]("abc", "A");
    
    • 1
    • 2
    • 3

    该方法是为了在 RegExp 子类中自定义匹配的替换模式。

    如果匹配模式不是一个RegExp 对象,String.prototype.replace() 就不会调用该方法,也不会创建一个 RegExp对象。

    6.6、示例

    直接调用
    这个方法基本可以和 String.prototype.replace() 一样使用,不同之处是 this 和参数顺序。

    var re = /-/g;
    var str = "2016-01-01";
    var newstr = re[Symbol.replace](str, ".");
    console.log(newstr); // 2016.01.01
    
    • 1
    • 2
    • 3
    • 4

    在子类中使用 @@replace
    RegExp 的子类可以覆写 @@replace方法来修改默认行为。

    class MyRegExp extends RegExp {
    	constructor(pattern, flags, count) {
    		super(pattern, flags);
    		this.count = count;
    	}
    	[Symbol.replace](str, replacement) {
    		// Perform @@replace |count| times.
    		var result = str;
    		for (var i = 0; i < this.count; i++) {
    			result = RegExp.prototype[Symbol.replace].call(this, result, replacement);
    		}
    		return result;
    	}
    }
    
    var re = new MyRegExp("\\d", "", 3);
    var str = "01234567";
    var newstr = str.replace(re, "#"); // String.prototype.replace calls re[@@replace].
    console.log(newstr); // ###34567
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    7、RegExp.prototype@@search

    7.1、概述

    @@search 方法执行了一个在给定字符串中的一个搜索以取得匹配正则模式的项。

    7.2、语法

    regexp[Symbol.search](str)
    
    • 1

    7.3、参数

    • str
      搜索的目标 String。

    7.4、返回值

    整数
    如果成功的话,@@search 返回该正则模式的第一个匹配项的在字符串中的位置索引。否则将返回-1。

    7.5、描述

    这个方法在 String.prototype.search() 的内部调用。例如,下面的两个方法返回相同结果。

    "abc".search(/a/);
    
    /a/[Symbol.search]("abc");
    
    • 1
    • 2
    • 3

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

    7.6、示例

    直接调用
    这个方法的使用方式和 String.prototype.search() 相同,不同之处是 this 和参数顺序。

    var re = /-/g;
    var str = "2016-01-02";
    var result = re[Symbol.search](str);
    console.log(result); // 4
    
    • 1
    • 2
    • 3
    • 4

    在子类中使用@@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 calls re[@@search].
    console.log(result); // 3
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    8、RegExp.prototype@@split

    8.1、概述

    @@split 方法切割 String 对象为一个其子字符串的数组 。

    8.2、语法

    regexp[Symbol.split](str[, limit])
    
    • 1

    8.3、参数

    • str
      切割操作的目标字符串

    • limit
      可选。一个为了限制切割数量的特定整数。 @@split 防范仍会切割每个匹配正则模式的匹配项,直到切割数量达到该限制数,除非提前切割完字符串。

    8.4、返回值

    包含其子字符串的Array 。

    8.5、描述

    如果切割器是一个RegExp对象,这个方法就将在 String.prototype.split() 的内部调用。例如,下面的两个方法返回相同结果。

    "a-b-c".split(/-/);
    
    /-/[Symbol.split]("a-b-c");
    
    • 1
    • 2
    • 3

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

    如果 str 参数不是一个RegExp 对象,String.prototype.split() 就不会调用该方法,也不会创建一个 RegExp 对象。

    8.6、示例

    直接调用
    这个方法的使用方式和 String.prototype.split() 相同,不同之处是 this 和参数顺序。

    var re = /-/g;
    var str = "2016-01-02";
    var result = re[Symbol.split](str);
    console.log(result); // ["2016", "01", "02"]
    
    • 1
    • 2
    • 3
    • 4

    在子类中使用 @@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 calls re[@@split].
    console.log(result); // ["(2016)", "(01)", "(02)"]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    写在最后

    如果你感觉文章不咋地//(ㄒoㄒ)//,就在评论处留言,作者继续改进;o_O???
    如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
    如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L~~~///(^v^)\\\~~~
    谢谢各位读者们啦(^_^)∠※!!!

  • 相关阅读:
    图解大模型微调系列之:大模型低秩适配器LoRA(原理篇)
    牛客刷题系列(汽水瓶,跳台阶扩展问题,斐波那契凤尾)
    this.$nexttick settimeout promise
    面试官最喜欢问的Redis知识
    傻瓜式制作产品图册,一秒就能学会
    3D全景视角,足不出户感知真实场景的魅力
    ifconfig看不见自己外网地址?
    信息系统项目管理师必背核心考点(二十六)三点估算(PERT)
    苹果cms模板MXone V10.6魔改版短视大气海报样式
    无代码开发平台子管理员入门教程
  • 原文地址:https://blog.csdn.net/weixin_62277266/article/details/126922990