JavaScript RegExp – 正则表达式基础

在 JavaScript 中，RegExp 是正则表达式 (Regular Expression) 的缩写，是一种用于匹配字符串中模式的对象。RegExp 对象的构造函数采用两个参数：一个用来存储模式的字符串参数，另一个可选的表示修饰符的字符串参数。

基本语法

利用字面量创建正则表达式

使用正则表达式，我们可以从一个字符串中匹配出需要的内容。在 JavaScript 中，我们可以用以下方式创建一个 RegExp 对象：

// 创建一个匹配所有单词字符的正则表达式
const regex = /\w+/;

在这个例子中，\w 匹配所有的单词字符，加上 + 表示匹配至少出现一次以上。

利用构造函数创建正则表达式

如果我们更喜欢使用构造函数来创建 RegExp 对象，我们需要传入两个参数，第一个参数为存储模式的字符串，第二个参数为表示修饰符的字符串：

const regex = new RegExp('\\w+', 'g');

在这个例子中，\w 匹配所有的单词字符，加上 + 表示匹配至少出现一次以上，g 表示全局匹配。

常用的正则表达式修饰符

i – 不区分大小写匹配

修饰符 i 表示忽略大小写匹配。例如，下列正则表达式可以匹配各种大小写形式的 javascript：

const regex = /javascript/i;
console.log(regex.test('JavaScript')); // true
console.log(regex.test('JAVASCRIPT')); // true
console.log(regex.test('javaSCRIPT')); // true
console.log(regex.test('Java Script')); // false

g – 全局匹配

修饰符 g 表示全局匹配。例如，下列正则表达式可以匹配所有 javascript 出现的位置：

const regex = /javascript/g;
console.log('JavaScript是一门非常受欢迎的编程语言，JavaScript在前端开发中被广泛使用。'.match(regex)); // ["JavaScript", "JavaScript"]

m – 多行匹配

修饰符 m 表示多行匹配。例如，下列正则表达式可以匹配一个或多个以 # 开头的行：

const regex = /^#\s*(.+)/gm;
const str = `# JavaScript RegExp
## 基本语法

### 利用字面量创建正则表达式
`;

console.log(str.match(regex)); // ["# JavaScript RegExp", "## 基本语法", "### 利用字面量创建正则表达式"]

常用的正则表达式元字符

. – 匹配任意字符

元字符 . 表示可以匹配任意字符。例如，下列正则表达式可以匹配 cat、cot，并且也可以匹配 coat：

const regex = /c.t/;
console.log(regex.test('cat')); // true
console.log(regex.test('cot')); // true
console.log(regex.test('coat')); // true

[] – 匹配字符组

元字符 [] 表示匹配方括号内任意一个字符。例如，下列正则表达式可以匹配 cat 和 cot，但是不能匹配 coat：

const regex = /c[ao]t/;
console.log(regex.test('cat')); // true
console.log(regex.test('cot')); // true
console.log(regex.test('coat')); // false

[^] – 排除字符组

在字符组 [] 中，使用修饰符 ^ 表示排除字符组中的任何一个字符。例如，下列正则表达式可以匹配不是元音字母的任何字符：

const regex = /[^aeiou]/;
console.log(regex.test('c')); // true
console.log(regex.test('o')); // false

– – 匹配字符范围

在字符组 [] 中，使用 - 表示匹配字符范围内的任意一个字符。例如，下列正则表达式可以匹配 0~9 的任意数字字符：

const regex = /[0-9]/;
console.log(regex.test('0123456789')); // true

\d – 匹配数字字符

元字符 \d 表示匹配数字字符。例如，下列正则表达式可以匹配 0~9 的任意数字字符：

const regex = /\d/;
console.log(regex.test('0123456789')); // true

\D – 匹配非数字字符

元字符 \D 表示匹配非数字字符。例如，下列正则表达式可以匹配非数字字符：

const regex = /\D/;
console.log(regex.test('abc')); // true

\s – 匹配空白字符

元字符 \s 表示匹配空格、制表符、回车符等空白字符。例如，下列正则表达式可以匹配空白字符：

const regex = /\s/;
console.log(regex.test(' ')); // true
console.log(regex.test('\t')); // true
console.log(regex.test('\n')); // true

\S – 匹配非空白字符

元字符 \S 表示匹配非空格、制表符、回车符等非空白字符。例如，下列正则表达式可以匹配非空白字符：

const regex = /\S/;
console.log(regex.test('abc')); // true
console.log(regex.test(' ')); // false

\w – 匹配单词字符

元字符 \w 表示匹配单词字符。例如，下列正则表达式可以匹配所有单词字符（包括数字）：

const regex = /\w/;
console.log(regex.test('abc')); // true
console.log(regex.test('0123456789')); // true
console.log(regex.test('$')); // false

\W – 匹配非单词字符

元字符 \W 表示匹配非单词字符。例如，下列正则表达式可以匹配非单词字符（不包括数字和字母）：

const regex = /\W/;
console.log(regex.test(' ')); // true
console.log(regex.test('$')); // true
console.log(regex.test('a')); // false

^ – 匹配字符串开头

元字符 ^ 表示匹配字符串的开头。例如，下列正则表达式可以匹配以 http 开头的字符串：

const regex = /^http/;
console.log(regex.test('http://www.baidu.com')); // true
console.log(regex.test('https://www.baidu.com')); // false

$ – 匹配字符串结尾

元字符 $ 表示匹配字符串的结尾。例如，下列正则表达式可以匹配以 .com 结尾的字符串：

const regex = /\.com$/;
console.log(regex.test('http://www.baidu.com')); // true
console.log(regex.test('https://www.baidu.com')); // true

* – 匹配前面的子表达式零次或多次

元字符 * 表示匹配前面的子表达式零次或多次。例如，下列正则表达式可以匹配含有零个或多个字母 a 的字符串：

const regex = /a*/;
console.log(regex.test('')); // true
console.log(regex.test('a')); // true
console.log(regex.test('aaaa')); // true
console.log(regex.test('bc')); // false

+ – 匹配前面的子表达式一次或多次

元字符 + 表示匹配前面的子表达式一次或多次。例如，下列正则表达式可以匹配含有一个或多个字母 a 的字符串：

const regex = /a+/;
console.log(regex.test('a')); // true
console.log(regex.test('aaaa')); // true
console.log(regex.test('')); // false
console.log(regex.test('bc')); // false

? – 匹配前面的子表达式零次或一次

元字符 ? 表示匹配前面的子表达式零次或一次。例如，下列正则表达式可以匹配含有零个或一个字母 a 的字符串：

const regex = /a?/;
console.log(regex.test('a')); // true
console.log(regex.test('')); // true
console.log(regex.test('b')); // false

{} – 匹配前面的子表达式出现次数

元字符 {} 表示匹配前面的子表达式出现的次数。例如，下列正则表达式可以匹配含有 3 个连续的 a 的字符串：

const regex = /a{3}/;
console.log(regex.test('aaabbb')); // true
console.log(regex.test('aaa')); // true
console.log(regex.test('baaa')); // false

也可以匹配前面的子表达式出现一次或多次：

const regex = /a{1,}/;
console.log(regex.test('aaa')); // true
console.log(regex.test('')); // false

常用的正则表达式方法

字符串的 search 方法

字符串的 search 方法可以搜索字符串中是否存在符合正则表达式的子串，并返回子串的首字符位置。

const str = 'Hello, world!';
console.log(str.search(/world/)); // 7
console.log(str.search(/javascript/)); // -1

字符串的 replace 方法

字符串的 replace 方法可以将符合正则表达式模式的子串替换掉。

const str = 'Hello, world!';
console.log(str.replace(/world/, 'JavaScript')); // 'Hello, JavaScript!'
console.log(str.replace(/Javascript/, 'JavaScript')); // 'Hello, world!'

在替换字符串中，还可以使用 $1、$2 等变量来引用正则表达式的分组结果。

const str = 'Name: John Doe';
console.log(str.replace(/Name: (.*)/, 'Name: $1 Smith')); // 'Name: John Doe Smith'

正则表达式的 test 方法

正则表达式的 test 方法可以测试一个字符串是否符合它的模式。

const regex = /javascript/i;
console.log(regex.test('JavaScript is awesome!')); // true
console.log(regex.test('Ruby on Rails is great!')); // false

正则表达式的 exec 方法

正则表达式的 exec 方法可以匹配一个字符串，并返回匹配的结果。它与 match 方法的不同在于，exec 方法不会将正则表达式保存在原始字符串的属性中。

const regex = /javascript/;
console.log(regex.exec('JavaScript is awesome!')); // ['JavaScript', index: 0, input: 'JavaScript is awesome!', groups: undefined]
console.log(regex.exec('Ruby on Rails is great!')); // null