Skip to content

Instantly share code, notes, and snippets.

@pengfeiw
Last active February 20, 2022 03:35
Show Gist options
  • Save pengfeiw/6966e82ba0f92907731a6e9f52fd3779 to your computer and use it in GitHub Desktop.
Save pengfeiw/6966e82ba0f92907731a6e9f52fd3779 to your computer and use it in GitHub Desktop.
关于 JavaScript 正则表达式的一个简短的介绍

Regular Expression in JavaScript

如果对正则表达式的语法还不熟悉,可以看我的博客正则表达式指南

正则表达式的创建

JavaScript 提供了两种方式创建正则表达式对象,两种方式创建的正则表达式对象是等价的。

  1. 字面量形式

由斜杠 / 包围一个正则表达式字符串,构成一个正则表达式对象。

语法如下,其中 flags 是可选的修饰符参数。

/pattern/flags

例如:

/ab+c/i;
  1. 构造函数

通过 JavaScript 提供的 RegExp 构造函数创建正则表达式对象。

RegExp 的函数原型:

RegExp(pattern[, flags]); // 等价于 /pattern/flags

例如:

new RegExp("ab+c", "i");

修饰符

修饰符指的是当前正则表达式的附加规则,放在正则表达式的尾部,是可选参数。

修饰符可以单个使用,也可以多个使用。

// 字面量形式
var regex1 = /pattern/i;
var regex2 = /pattern/ig;

// 构造函数形式
var regex3 = new RegExp("pattern", "i");
var regex4 = new RegExp("pattern", "ig");

在介绍具体修饰符前,先介绍下 test() 方法。test() 表示一个正则表达式是否与指定的字符串匹配, 行为表现类似于 String.prototype.search() 方法,差别在于 test 返回一个布尔值,而 search 返回索引。

  1. g 修饰符

默认情况下,正则表达式在首次匹配成功后,会终止匹配。g 修饰符表示全局匹配(global match),使用 g 修饰符,正则表达式会匹配目标字符串中所有复合条件的结果。

var regex = /b/;
var str = "abba";

regex.test(str); // true
regex.test(str); // true
regex.test(str); // true

上面的例子,无论执行多少次 regex.test(str), 都会返回 true,因为 regex 对象每次使用 test 方法匹配字符串时,都是从字符串的开始处匹配的。

如果添加 g 修饰符,则表示全局匹配,每次匹配开始的位置为上一次匹配结束的位置,所以下面的例子中第三次 regex.test(str) 返回 false

var regex = /b/g;
var str = "abba";

regex.test(str); // true
regex.test(str); // true
regex.test(str); // false
  1. i 修饰符

i 是 ignoreCase 的缩写,表示忽略目标字符串的大小写。

默认情况下,正则表达式匹配是需要考虑字符串大小写形式的,所以下面的匹配会失败。

var s = "Abc";
var regexp = /abc/;

regexp.test(s); // false

可以通过添加 i 修饰符,让正则表达式匹配忽略大小写。

var s = "Abc";
var regexp = /abc/i;

regexp.test(s); // true
  1. m 修饰符

m 是 multiline 的缩写,意为多行的意思。该修饰符会修改 ^$ 的行为,默认情况 ^ 匹配字符串的开始处和结尾处,加上 m 修饰符后,^$ 会识别换行符 \n

/script$/.test('javascript\n') // false
/script$/m.test('javascript\n') // true

上例中,第一个 test 失败,是因为默认情况下 $ 不会匹配换行符,第二个加上 m 修饰符后,$ 可以匹配换行符了,所以匹配成功。

属性和方法

属性

  • RegExp.prototype.ignoreCase:返回一个布尔值,表示是否设置了 i 修饰符。
  • RegExp.prototype.global:返回一个布尔值,表示是否设置了 g修饰符。
  • RegExp.prototype.multiline:返回一个布尔值,表示是否设置了 m修饰符。
  • RegExp.prototype.flags:返回一个字符串,包含了已经设置的所有修饰符,按字母排序。
  • RegExp.prototype.lastIndex:返回一个整数,表示下一次开始搜索的位置。该属性可读写,但是只在进行连续搜索时有意义,详细介绍请看后文。
  • RegExp.prototype.source:返回正则表达式的字符串形式(不包括反斜杠),该属性只读。

方法

  1. RegExp.prototype.test()
regexObj.test(str)

返回一个布尔值,表示当前模式是否能匹配参数字符串。当设置了 g 标识符时,下一次匹配会从上一次匹配结束位置开始,lastIndex 表示当前匹配开始的位置。

var r = /x/g;
var s = '_x_x';

r.lastIndex // 0
r.test(s) // true

r.lastIndex // 2
r.test(s) // true

r.lastIndex // 4
r.test(s) // false
  1. RegExp.prototype.exec()
regexObj.exec(str)

对目标字符串执行一次搜索匹配,返回一个结果数组或者 null

var s = '_x_x';
var r1 = /x/;
var r2 = /y/;

r1.exec(s) // ["x"]
r2.exec(s) // null
var s = '_x_x';
var r = /_(x)/;

r.exec(s) // ["_x", "x"] // 第一个成员是整个匹配的结果,第二个成员是圆括号匹配的结果。

javascript 正则表达式中的圆括号,可以表示分组匹配的意思。

@tangweijuan
Copy link

非常棒的内容

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment