长沙黑马程序员 JS正则表达式语法详解

# JS正则表达式语法详解

## 前言

正则表达式在线图形化描述：https://regexper.com

什么是正则表达式？说白了，就是用来按照某种规则去匹配字符串的表达式

## RegExp对象

JS 通过内置对象 `RegExp` 支持正则表达式，有两种方法实例化 `RegExp` 对象

- 字面量
- 构造函数

## 字面量

范例：

```javascript
var reg = /\bis\b/
'He is a boy. This is a dog. Where is she?'.replace(reg, 'IS')
// 返回：'He IS a boy. This is a dog. Where is she?'

var reg = /\bis\b/g
'He is a boy. This is a dog. Where is she?'.replace(reg, 'IS')
// 返回：'He IS a boy. This IS a dog. Where IS she?'
```

补充说明：`\b` 是单词边界的意思

## 构造函数

范例：

```javascript
var reg = new RegExp('\\bis\\b')
'He is a boy. This is a dog. Where is she?'.replace(reg, 'IS')
// 返回：'He IS a boy. This is a dog. Where is she?'

var reg = new RegExp('\\bis\\b', 'g')
'He is a boy. This is a dog. Where is she?'.replace(reg, 'IS')
// 返回：'He IS a boy. This IS a dog. Where IS she?'
```

补充说明：

1. 第一个参数是正则表达式的源文本，第二个参数是修饰符
2. `\\bis\\b`，这里为什么要用两个反斜线？因为要当做普通的反斜线文本传递进去，所以需要转义

## 修饰符

- `g`：global 全文搜索，不添加，搜索到第一个匹配停止
- `i`：ignore case 忽略大小写，默认大小写敏感
- `m`：multiple lines 多行搜索

全文搜索和忽略大小写范例：

```javascript
'He is a boy. This is a dog. Is he?'.replace(/\bis\b/, '0')
// 返回：'He 0 a boy. This is a dog. Is he?'

'He is a boy. This is a dog. Is he?'.replace(/\bis\b/g, '0')
// 返回：'He 0 a boy. This 0 a dog. Is he?'

'He is a boy. This is a dog. Is he?'.replace(/\bis\b/gi, '0')
// 返回：'He 0 a boy. This 0 a dog. 0 he?'
```

多行搜索范例：

```javascript
'@123\n@456\n@789'.replace(/^@\d/g, 'X')
// 返回：`X123\n@456\n@789`

'@123\n@456\n@789'.replace(/^@\d/gm, 'X')
// 返回：`X123\nX456\nX789`
```

补充说明：`\n` 是换行转义字符

## 元字符

正则表达式由两种基本字符类型组成：

- 原义字符
- 元字符，元字符是在正则表达式中有特殊含义的非字母字符，如：`* + ? ^ $ . - | \ ( ) { } [ ] \t \v \n \r \f`

## 字符类

一般情况下正则表达式一个字符对应字符串一个字符

我们可以使用元字符 `[]` 来构建一个简单的类

所谓类就是一个泛指，而不是特指某个字符

表达式 `[abc]` 把字符 `a` 或 `b` 或 `c` 归为一类，可以匹配这三个字符

范例：

```javascript
'a1b2c3d4'.replace(/[abc]/g, 'X')
// 返回：'X1X2X3d4'
```

## 字符类取反

使用元字符 `^` 创建反向类

反向类的意思是不属于某类的内容

表达式 `[^abc]` 表示不是字符 `a` 或 `b` 或 `c` 的内容

范例：

```javascript
'a1b2c3d4'.replace(/[^abc]/g, 'X')
// 返回：'aXbXcXXX'
```

## 范围类

正则表达式还提供了范围类

我们可以使用 `[a-z]` 来连接两个字符表示从 `a` 到 `z` 的任意字符

这是个闭区间，也就是包含 `a` 和 `z` 本身

在 `[]` 组成的类内部是可以连写的，如：`[a-zA-Z]`

范例1：

```javascript
'a1b2d3x4z9'.replace(/[a-z]/g, 'Q')
// 返回：'Q1Q2Q3Q4Q9'
```

范例2：

```javascript
'a1b2d3x4z9AJHGYXG'.replace(/[a-zA-Z]/g, 'Q')
// 返回：'Q1Q2Q3Q4Q9QQQQQQQ'
```

范例3：

```javascript
'2019-12-15'.replace(/[0-9]/g, 'X')
// 返回：'XXXX-XX-XX'

'2019-12-15'.replace(/[0-9-]/g, 'X')
// 返回：'XXXXXXXXXX'
```

补充说明：

1. `-` 在 `[]` 里面是指某个范围区间的元字符，若想要把 `-` 也匹配到，就需要转义 `\-` 
2. 若 `-` 出现在字符类 `[]` 中，并且 `-` 左右两边都有字符，则为范围区间元字符，若任意一边无字符，则为原义字符 `-` 

## 预定义字符类

正则表达式提供预定义字符类来匹配常见的字符类：

- `.`，除了回车符和换行符之外的所有字符，等价于 `[^\r\n]` 
- `\d`，数字字符，等价于 `[0-9]` 
- `\D`，非数字字符，等价于 `[^0-9]` 
- `\s`，空白符，等价于 `[\t\v\r\n\f]` 
- `\S`，非空白符，等价于 `[^\t\v\r\n\f]` 
- `\w`，单词字符（字符、数字、下划线），等价于 `[a-zA-Z_0-9]` 
- `\W`，非单词字符，等价于 `[^a-zA-Z_0-9]` 

范例，匹配一个 `ab + 数字 + 单词字符` 的字符串：`/ab\d\w/` 

## 边界

正则表达式还提供了几个常用的边界匹配字符

- `^`，以...开始
- `$`，以...结束
- `\b`，单词边界
- `\B`，非单词边界

## 量词

如果我们希望匹配一个连续出现**20次**数字的字符串：

`/\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d/` 

这样写，未免太 lowb 了

正则表达式提供了量词：

- `?`，出现 0 次或 1 次
- `+`，出现 1 次或多次
- `*`，出现任意次
- `{n}`，出现 n 次
- `{n,m}`，出现 n 到 m 次
- `{n,}`，至少出现 n 次，注意 n 后面的逗号不能省

范例1：`\d{20}` 

范例2：`\d{20}\w\d?\w+\d*\d{3}\w{3,5}\d{3,}` 

## 贪婪模式

所谓贪婪模式，就是尽可能多的匹配，也就是说就算匹配成功还要继续往下尝试匹配更多满足条件的字符

正则表达式，默认就是贪婪模式

范例：

```javascript
'12345678'.replace(/\d{3,6}/, 'X')
// 返回：'X78'
```

## 非贪婪模式

所谓非贪婪模式，就是让正则表达式尽可能少的匹配，也就是说一旦成功匹配，本次便不再继续尝试匹配更多满足条件的字符

做法很简单，在量词后加上 `?` 即可

范例：

```javascript
'12345678'.replace(/\d{3,6}?/, 'X')
// 返回：'X45678'
```

## 分组

假设我们要匹配字符串 `Byron` 连续出现 3 次的场景，如果这样写：`/Byron{3}/`，是达不到我们想要的效果的，这里实际是 `n` 重复 3 次的意思

使用 `()` 可以达到分组的功能，让量词作用于分组，如：`/(Byron){3}/`，这样就可以满足我们的需求

范例：

```javascript
'a1b2c3d4'.replace(/[a-z]\d{3}/g, 'X')
// 返回：'a1b2c3d4'

'a1b2c3d4'.replace(/([a-z]\d){3}/g, 'X')
// 返回：'Xd4'
```

## 或

正则表达式中，使用 `|` 可以达到或的效果

范例：

```javascript
'ByronCasper'.replace(/Byron|Casper/g, 'X')
// 返回：'XX'

'ByronsperByrCasper'.replace(/Byr(on|Ca)sper/g, 'X')
// 返回：'XX'
```

## 反向引用分组

假设我们想要把 `2019-12-15` 改成 `12/15/2019`，就可以用反向引用分组轻松搞定

范例：

```javascript
'2019-12-15'.replace(/(\d{4})-(\d{2})-(\d{2})/g, '$2/$3/$1')
// 返回：'12/15/2019'
```

补充说明：其中 `$1`、`$2`、`$3`，表示直接引用第几个分组（也就是小括号）匹配到的字符

## 忽略分组

如果不希望捕获某些分组，只需要在分组内加上 `?:` 就可以了

范例（忽略年份这个分组）：

```javascript
'2019-12-15'.replace(/(?:\d{4})-(\d{2})-(\d{2})/g, '$2/$3/$1')
// 返回：'15/$3/12'
```

## 前瞻后瞻

正则表达式从文本头部向尾部开始解析，文本尾部方向，称为 **前**

前瞻就是在正则表达式匹配到规则的时候，向前检查是否符合断言，后瞻方向相反

符合和不符合特定断言称为 **肯定** 匹配和 **否定** 匹配

ES9才支持后瞻

语法如下：

- 肯定前瞻，`exp(?=assert)`
- 否定前瞻，`exp(?!assert)`
- 肯定后瞻，`exp(?<=assert)`，ES9才支持
- 否定后瞻，`exp(?<!assert)`，ES9才支持

范例：

```javascript
'a2*3'.replace(/\w(?=\d)/g, 'X')
// 返回：'X2*3'

'a2*34v8'.replace(/\w(?=\d)/g, 'X')
// 返回：'X2*X4X8'

'a2*34vv'.replace(/\w(?=\d)/g, 'X')
// 返回：'X2*X4vv'

'a2*34vv'.replace(/\w(?!\d)/g, 'X')
// 返回：'aX*3XXX'
```

## 字符串方法

### String.prototype.search

`search` 方法用于检索字符串中指定的子字符串，或检索与正则表达式匹配的子字符串

方法返回第一个匹配结果的索引，匹配不到返回 **-1**

`search` 方法不执行全局匹配，它将忽略修饰符 `g`，并且总是从字符串的开始进行检索

范例：

```javascript
'a1b2c3d1'.search('1')
// 返回：1

'a1b2c3d1'.search('10')
// 返回：-1

'a1b2c3d1'.search(1)
// 返回：1

'a1b2c3d1'.search(/1/)
// 返回：1

'a1b2c3d1'.search(/1/g)
// 返回：1
```

### String.prototype.match(reg)

`match` 方法将检索字符串，以找到一个或多个与 `reg` 匹配的文本

`reg` 是否具有修饰符 `g`，对结果影响很大

- 没有修饰符 `g`：
  - 如果 `reg` 没有修饰符 `g`，那么 `match` 方法就只能在字符串中执行一次匹配

  - 如果没有找到任何匹配的文本，将返回 `null`，否则它将返回一个数组，其中存放了与它找到的匹配文本有关的信息

  - 返回数组的第一个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的分组匹配的文本

  - 除了常规的数组元素之外，返回的数组对象还包含两个额外的属性

    - `index`：匹配文本的起始字符在字符串中的位置
    - input：源字符串的引用

  - 范例：

    ```javascript
    var reg = /\d(\w)\d/
    var str = '$1a2b3c4d5e'
    var result = str.match(reg)
    console.log(result)
    // 输出：['1a2', 'a']
    console.log(result.index, ',', result.input)
    // 输出：1 , $1a2b3c4d5e
    ```

- 有修饰符 `g`：

  - 如果 `reg` 具有修饰符 `g`，则 `match` 方法执行全文检索，找到字符串中所有的匹配文本

  - 如果没有找到任何匹配的文本，则返回 `null`，如果找到了一个或多个匹配的文本，则返回一个数组

  - 数组元素中存放的是字符串中所有的匹配文本，并且该数组对象没有 `index` 和 `input` 两个额外的属性

  - 范例：

    ```javascript
    var reg = /\d(\w)\d/g
    var str = '$1a2b3c4d5e'
    var result = str.match(reg)
    console.log(result)
    // 输出：['1a2', '3c4']
    console.log(result.index, ',', result.input)
    // 输出：undefined , undefined
    ```

    

### String.prototype.split

我们经常使用 `split` 方法把字符串分割为字符串数组，如：

```javascript
'a,b,c,d'.split(',')
// 返回：['a', 'b', 'c', 'd']
```

但是在一些复杂的分割情况下，我们就需要使用正则表达式解决，如：

```javascript
'a1b2c3d'.split(/\d/)
// 返回：['a', 'b', 'c', 'd']
```

### String.prototype.replace

我们知道 `replace` 方法是用来替换字符串的，但其实它可以用正则表达式来替换

范例：

```javascript
'a1b'.replace('1', 2)
// 返回：a2b

'a1b1c1'.replace('1', 2)
// 返回：a2b1c1

'a1b1c1'.replace(/1/g, 2)
// 返回：a2b2c2

'a1b1c1'.replace(/1/, 2)
// 返回：a2b1c1
```

补充说明：

- 第二个参数也可以接收一个函数，函数的参数列表如下：

  - 匹配的字符串
  - 正则表达式分组内容，没有分组则没有该参数
  - 匹配项在字符串中的索引
  - 源字符串

- 下面用正则表达式有无分组来分别演示：

  - 无分组范例：

    ```javascript
    'a1b2c3d4e5'.replace(/\d/g, function (matchedStr, index, origin) {
      console.log(index, ',', origin)
      return parseInt(matchedStr) + 1
    })
    // replace后，最终返回：a2b3c4d5e6
    // 输出如下：
    // 1 , a1b2c3d4e5
    // 3 , a1b2c3d4e5
    // 5 , a1b2c3d4e5
    // 7 , a1b2c3d4e5
    // 9 , a1b2c3d4e5
    ```

  - 有分组范例：

    ```javascript
    'a1b2c3d4e5'.replace(/(\d)(\w)(\d)/g, function (matchedStr, group1Str, group2Str, group3Str, index, origin) {
      console.log(matchedStr, ',', group1Str, ',', group2Str, ',', group3Str, ',', index, ',', origin)
      return group1Str + group3Str
    })
    // replace后，最终返回：a12c34e5
    // 输出如下：
    // 1b2 , 1 , b , 2 , 1 , a1b2c3d4e5
    // 3d4 , 3 , d , 4 , 5 , a1b2c3d4e5
    ```