js正则表达式使用详解

正则表达式

正则表达式（Regular Expression），在代码中常简写为 regex、regexp或RE。使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

搜索是可用于文本搜索和文本替换。

语法：

/正则表达式主体/修饰符(可选)

在 javascript 中， 正则表达式通常用于两个字符串方法：search()和 replace()。

search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

• search() 方法的使用

const str = 'hello world'
// 正则表达式
console.log(str.search(/ello/)) // 1
console.log(str.search(/lls/)) // -1
// 字符串：字符串参数会转换为正则表达式
console.log(str.search('ello')) // 1
console.log(str.search('lls')) // -1

• replace() 方法的使用

const str = 'hello world'
// 正则表达式
console.log(str.replace(/ello/, 'ey')) // hey world
console.log(str.replace(/elll/, 'ey')) // hello world
// 字符串：字符串参数会转换为正则表达式
console.log(str.replace('ello', 'ey')) // hey world
console.log(str.replace('elll', 'ey')) // hello world

正则表达式修饰符

修饰符可以在全局搜索中不区分大小写

const str = 'hElLo world'
console.log(str.replace(/ello/, 'ey')) // hElLo world
console.log(str.replace(/ello/i, 'ey')) // hey world

const str2 = 'hello world\nRegExp'
console.log(str2.replace(/^Reg/, 'reg')) // hello world\nRegExp 
console.log(str2.replace(/^Reg/m, 'reg')) // hello world\nregExp

const str3 = 'hello world hello RegExp'
console.log(str3.replace(/ello/, 'ey')) // hey world hello RegExp
console.log(str3.replace(/ello/g, 'ey')) // hey world hey RegExp

正则表达式模式

方括号

方括号用于查找某个范围内的字符

元字符

元字符是拥有特殊含义的字符

量词

RegExp 对象方法

const str = 'hello world hello RegExp'
console.log(/ello/.compile(/ello/)) // /ello/
console.log(/ello/.exec(str)) // [ 'ello', index: 1, input: 'hello world hello RegExp', groups: undefined ]
console.log(/ello/.test(str)) // true

test方法的坑

test 方法用于测试字符串参数中是否存在匹配正则表达式模式的字符串。

lastIndex：是当前表达式匹配内容的最后一个字符的后一位，用于规定下一次匹配的起始位置。

当正则表达式使用了全局匹配时，test方法会出现奇怪现象：

let reg = /\w/g

console.log(reg.test('ab')) // true
console.log(reg.test('ab')) // true
console.log(reg.test('ab')) // false
console.log(reg.test('ab')) // true

正常情况，ab符合 test方法，都应该返回 true才对，原因就在于 lastIndex 属性。

我们可以试试每次都运行 test 方法打印出 lastIndex的值：

let reg = /\w/g
console.log(reg.lastIndex) // 0

console.log(reg.test('ab')) // true
console.log(reg.lastIndex) // 1
console.log(reg.test('ab')) // true
console.log(reg.lastIndex) // 2
console.log(reg.test('ab')) // false
console.log(reg.lastIndex) // 0
console.log(reg.test('ab')) // true
console.log(reg.lastIndex) // 1

lastIndex属性是当前表达式匹配内容的最后一个字符的后一位，用于规定下一次匹配的起始位置。

当进入正则表达式全局模式时，每次使用 test 方法都会从 lastIndex 开始，匹配从 lastIndex 开始的子字符串。比如例子中，第二次执行 test 方法时，此时，lastIndex 已经变为2，子字符串为空，所以 reg 不可能匹配上它，由于子字符串匹配失败，test 方法返回 false，并将 lastIndex 属性置为0，重新开始一轮循环。

避免 test 中的坑的方法：

• test方法本身就是用来测试是否存在匹配正则的字符串，不使用全局模式一样可以实现目的，所以第一种方法就是不适用全局模式；
• 不将正则对象实例存在变量中，每次直接用正则对象实例调用 test方法，不过这种方法对内存有所损耗，理论上不建议。

支持正则表达式的 String 对象的方法

const str = 'hello world hello RegExp'
console.log(str.search(/ello/)) // 1
console.log(str.search(/Ello/)) // -1

console.log(str.match(/ello/)) // [ 'ello', index: 1, input: 'hello world hello RegExp', groups: undefined ]

console.log(str.replace(/ello/, 'ey')) // hey world hello RegExp
console.log(str.replace(/Ello/, 'ey')) // hello world hello RegExp

console.log(str.split(/ello/)) // [ 'h', ' world h', ' RegExp' ]
console.log(str.split(/ello/, '1')) // [ 'h' ]
console.log(str.split(/ello/, 2)) // [ 'h', ' world h' ]
console.log(str.split(/ello/, 3)) // [ 'h', ' world h', ' RegExp' ]

search 方法

String.prototype.search(reg)

search方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。方法返回第一个匹配结果的 index。查找不到则返回 -1。

• search方法不执行全局匹配，它将忽略修饰符 g，并且总是从字符串的开始进行检索，因此，它不会产生类似于 test 方法的问题。
• 不输入正则表达式则 search方法将会自动将其转为正则表达式。

match 方法

String.prototype.match(reg)

match 方法将检索字符串，以找到一个或多个与 reg 匹配的文本，reg是否具有修饰符 g对结果影响很大。

非全局调用：

如果 reg 没有修饰符 g，那 match 方法就只能在字符串中执行一次匹配，如果没有找到任何匹配的文本，将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。

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

除了常规的数组元素外，返回的数组还含有2个对象属性：

• index：声明匹配文本的起始字符在字符串的位置
• input：声明对 stringObject的引用

let str = 'af12131ds22'
console.log(str.match('v')) // null
console.log(str.match('s')) // [ 's', index: 8, input: 'af12131ds22', groups: undefined ]

全局调用：

如果 reg具有修饰符 g，则 match 方法将执行全局检索，找到字符串中的所有匹配子字符串。如果没有找到任何匹配的子串，将返回 null。否则，返回一个数组。数组元素中存放的是字符串中所有匹配到的子串，而且也没有 index 属性或 input 属性。

let str = 'af12131ds22'
console.log(str.match(/[^\w]/g)) // null
console.log(str.match(/\d+/g)) // [ '12131', '22' ]

split 方法

String.prototype.split(reg)

把字符串分割为字符数组

let str = 'af12131ds22'
console.log(str.split('')) // [ 'a', 'f', '1', '2', '1', '3', '1', 'd', 's', '2', '2' ]
console.log(str.split('1')) // [ 'af', '2', '3', 'ds22' ]

一些复杂情况可以使用正则表达式解决

let str = 'af12131ds22'
console.log(str.split(/\d/)) // [ 'af', '', '', '',   '', 'ds', '',   '' ]
console.log(str.split(/\d+/)) // [ 'af', 'ds', '' ]

replace 方法

String.prototype.replace()

replace 方法有三种形态：

• String.prototype.replace(str, replaceStr)
• String.prototype.replace(reg, replaceStr)
• String.prototype.replace(reg, function)

let str = 'af12131ds22'
console.log(str.replace('1', 7)) // af72131ds22
console.log(str.replace(/1/g, 7)) // af72737ds22

str.replace(/1/g, function (...args) {
  console.log(args)
})
/**
 * [ '1', 2, 'af12131ds22' ]
 * [ '1', 4, 'af12131ds22' ]
 * [ '1', 6, 'af12131ds22' ]
 */

replace 接受函数参数时，有四个参数：

• 匹配字符串
• 正则表达式分组内容，没有分组则没有该参数
• 匹配项在字符串中的 index
• 原字符串

// 有分组内容的
let str = 'af12131ds22'
str.replace(/(\d)(\w)/g, function (...args) {
  console.log(args)
})
/**
 * [match, group1, group2, index, origin]
[ '12', '1', '2', 2, 'af12131ds22' ]
[ '13', '1', '3', 4, 'af12131ds22' ]
[ '1d', '1', 'd', 6, 'af12131ds22' ]
[ '22', '2', '2', 9, 'af12131ds22' ]
 */

let str = 'af12131ds22'
str.replace(/(\d)(\w)(\d)/g, function (...args) {
  console.log(args)
})
/**
 * [match, group1, group2, group3, index, origin]
[ '121', '1', '2', '1', 2, 'af12131ds22' ]
 */

后行断言

JavaScript 语言的正则表达式，只支持先行断言（lookahead）和先行否定断言（negative lookahead）。不支持后行断言（lookbehind）和后行否定断言（negative lookbehind）。ES2018 引入后行断言。

“先行断言”指的是，x 只有在 y 前面才匹配，必须写成 /x(?=y)/。比如，只匹配百分号之前的数字，要写成 /\d+(?=%)/。

“先行否定断言”指的是，x 只有不在 y前面才匹配，必须写成/x(?!y)/。比如，只匹配不在百分号之前的数字，要写成 /\d+(?!%)/。

let lookbehead = /\d+(?=%)/.exec('100% of US presidents have been male')
console.log(lookbehead)
let negativeLookbehead = /\d+(?!%)/.exec('that is all 44 of them')
console.log(negativeLookbehead)
/**
 * [
    '100',
    index: 0,
    input: '100% of US presidents have been male',
    groups: undefined
  ]
  [ '44', index: 12, input: 'that is all 44 of them', groups: undefined ]
 */

上面两个字符串，如果互换正则表达式，就不会得到相同的结果。另外，还可以看到，“先行断言”括号之中的部分（(?=%)），是不计入返回结果的。

“后行断言”正好与“先行断言”相反，x只有在 y 后面才匹配，必须写成 /(?<=y)x/。比如，只匹配美元符号后面的数字，要写成/(?<=\$)\d+/。

“后行否定断言”则与“先行否定断言”相反，x 只有不在y后面才匹配，必须写成 /(?<!y)x/。比如，只匹配不在美元符号后面的数字，要写成 /(?<!\$)\d+/。

let lookbehind = /(?<=\$)\d+/.exec('$100 of US presidents have been male')
console.log(lookbehind)
let negativeLookbehind = /(?<!\$)\d+/.exec('that is all &44 of them')
console.log(negativeLookbehind)
/**
 * [
      '100',
      index: 1,
      input: '$100 of US presidents have been male',
      groups: undefined
    ]
    [
      '44',
      index: 13,
      input: 'that is all &44 of them',
      groups: undefined
    ]
 */

上面例子中，“后行断言”的括号之中的部分（(?<=\$)），也是不计入返回结果。

下面的例子是使用后行断言进行字符串替换。

let reg = /(?<=\$)foo/g
console.log('$foo %foo foo'.replace(reg, 'bar')) // $bar %foo foo

上面代码中，只有在美元符号后面的 foo才会被替换。

“后行断言”的实现，需要先匹配 /(?<=y)x/的 x，然后再回到左边，匹配 y 的部分。这种“先右后左”的执行顺序，与所有其他正则操作相反，导致了一些不符合预期的行为。

具名组匹配

正则表达式使用圆括号进行组匹配

const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/

上面代码中，正则表达式里面有三组圆括号。使用 exec 方法，就可以将这三组匹配结果提取出来。

const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/
const matchObj = RE_DATE.exec('1997-11-26')
console.log(matchObj)
// [ '1997-11-26', '1997', '11', '26', index: 0, input: '1997-11-26', groups: undefined ]
const year = matchObj[1] // 1997
const month = matchObj[2] // 11
const day = matchObj[3] // 26

组匹配的一个问题是，每一组的匹配含义不容易看出来，而且只能用数字序号（比如 matchObj[1]）引用，要是组的顺序变了，引用的时候就必须修改序号。

ES2018 引入了具名组匹配（Named Capture Groups），允许为每一个组匹配指定一个名字，既便于阅读代码，又便于引用。

const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/

const matchObj = RE_DATE.exec('1997-11-26')
console.log(matchObj)
// [ '1997-11-26', '1997', '11', '26', index: 0, input: '1997-11-26', groups: [Object: null prototype] { year: '1997', month: '11', day: '26' } ]

const year = matchObj.groups.year // 1997
const month = matchObj.groups.month // 11
const day = matchObj.groups.day // 26

上面代码中，“具名组匹配”在圆括号内部，模式的头部添加“问号+尖括号+组名”（?<year>），然后就可以在 exec 方法返回结果的 groups 属性上引用该组名。同时，数字序号 （matchObj[1]） 依然有效。

具名组匹配等于为每一组匹配加上了ID，便于描述匹配的目的。如果组的顺序变了，也不用改变匹配后的处理代码。

如果具名组没有匹配，那么对应的 groups 对象属性会是 undefined。

const reg = /^(?<as>a+)?$/
const matchObj = reg.exec('')
console.log(matchObj)
console.log(matchObj.groups.as) // undefined
console.log('as' in matchObj.groups) // true
/**
 * [
  '',
  undefined,
  index: 0,
  input: '',
  groups: [Object: null prototype] { as: undefined }
]
 */

上面代码中，具名组 as 没有找到匹配，那么 matchObj.groups.as 属性值就是 undefined，并且 as 这个键名在 groups 是始终存在的。

解构赋值和替换

有了具名组匹配以后，可以使用解构赋值直接从匹配结果上为变量赋值。

let { groups: { one, two } } = /^(?<one>.*):(?<two>.*)$/u.exec('foo:bar')
console.log(one, two) // foo bar

字符串替换时，使用 $<组名>引用具名组。

let reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u
console.log('2006-06-07'.replace(reg, '$<day>/$<month>/$<year>')) // 07/06/2006

上面代码中，replace 方法的第二个参数是一个字符串，而不是正则表达式。

replace 方法的第二个参数也可以是函数，该函数的参数序列如下。

let reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u
let str = '2015-01-02'.replace(reg, (
   matched, // 整个匹配结果 2015-01-02
   capture1, // 第一个组匹配 2015
   capture2, // 第二个组匹配 01
   capture3, // 第三个组匹配 02
   position, // 匹配开始的位置 0
   S, // 原字符串 2015-01-02
   groups // 具名组构成的一个对象 {year, month, day}
 ) => {
  let { day, month, year } = groups
  return `${day}/${month}/${year}`
})
console.log(str) // 02/01/2015

具名组匹配在原来的基础上，新增了最后一个函数参数：具名组构成的一个对象。函数内部可以直接对这个对象进行解构赋值。

let reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u

let str1 = '2015-01-02'.replace(reg, (...args) => {
  console.log(args)
  let { day, month, year } = args[6]
  return `${day}/${month}/${year}`
})
console.log(str1)
/**
 * [
  '2015-01-02',
  '2015',
  '01',
  '02',
  0,
  '2015-01-02',
  [Object: null prototype] { year: '2015', month: '01', day: '02' }
]
 */

引用

如果要在正则表达式内部引用某个“具名组匹配”，可以使用 \k<组名>的写法。

const reg = /^(?<word>[a-z]+)!\k<word>$/
console.log(reg.test('abc!abc')) // true
console.log(reg.test('abc!ab')) // false

数字引用（\1）依然有效。

const reg = /^(?<word>[a-z]+)!\1$/
console.log(reg.test('abc!abc')) // true
console.log(reg.test('abc!ab')) // false

这两种引用方法还可以同时使用。

const reg = /^(?<word>[a-z]+)!\k<word>!\1$/
console.log(reg.test('abc!abc!abc')) // true
console.log(reg.test('abc!ab!ab')) // false

String.prototype.matchAll()

如果一个正则表达式在字符串里面有多个匹配，现在一般使用 g 修饰符或 y 修饰符，在循环里面逐一取出。

let regex = /t(e)(st(\d?))/g
let string = 'test1test2test3'

let matches = []
let match
while (match = regex.exec(string)) {
  matches.push(match)
}

console.log(matches)
// [
//   ["test1", "e", "st1", "1", index: 0, input: "test1test2test3", groups: undefined],
//   ["test2", "e", "st2", "2", index: 5, input: "test1test2test3", groups: undefined],
//   ["test3", "e", "st3", "3", index: 10, input: "test1test2test3", groups: undefined]
// ]

console.log(reg.exec(str))
// [ 'test1', 'e', 'st1', '1', index: 0, input: 'test1test2test3', groups: undefined ]

上面代码中，while 循环取出每一轮的正则匹配，一共三轮。

ES2020 增加了 String.prototype.matchAll() 方法，可以一次性取出所有匹配。不过，它返回的是一个遍历器（Iterator），而不是数组。

let reg = /t(e)(st(\d?))/g
let str = 'test1test2test3'
for (const match of str.matchAll(reg)) {
  console.log(match)
}
// ["test1", "e", "st1", "1", index: 0, input: "test1test2test3", groups: undefined]
// ["test2", "e", "st2", "2", index: 5, input: "test1test2test3", groups: undefined]
// ["test3", "e", "st3", "3", index: 10, input: "test1test2test3", groups: undefined]

上面代码中，由于 str.matchAll(reg) 返回的是遍历器，所以可以用 for...of循环取出。相对于返回数组，返回遍历器的好处在于，如果匹配结果是一个很大的数组，那么遍历器比较节省资源。

遍历器转为数组是非常简单的，使用 ... 运算符和 Array.from() 方法就可以了

// 转为数组的方法一
[...str.matchAll(reg)]
// 转为数组的方法二
Array.from(str.matchAll(reg))