简介

正则表达式是咱们做数据匹配的时候罕用的一种工具，尽管正则表达式的语法并不简单，然而如果多种语法组合起来会给人一种无从下手的感觉。

于是正则表达式成了程序员的噩梦。明天咱们来看一下如何在 ES9 中玩转正则表达式。

Numbered capture groups

咱们晓得正则表达式能够分组，分组是用括号来示意的，如果想要获取到分组的值，那么就叫做 capture groups。

通常来说，咱们是通过序号来拜访 capture groups 的，这叫做 Numbered capture groups。

举个例子：

const RE_DATE = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj[1]; // 1999
const month = matchObj[2]; // 12
const day = matchObj[3]; // 31

下面的正则表达式要匹配年月日，而后通过 exec 办法，返回 match 的数组。这个数组存储的是匹配的 groups 信息。

因为咱们有三个括号，所以能够匹配三个 group。而后通过 1，2，3 来拜访特定的 group。

咱们把下面的 matchObj 输入看一下其中的内容：

[
  '1999-12-31',
  '1999',
  '12',
  '31',
  index: 0,
  input: '1999-12-31',
  groups: undefined
]

能够看到 matchObj 是一个数组，index 0 存储的是要匹配的字符串。这里咱们看到 matchObj 还有一个 groups 是 undefined，这个 groups 就是命名 groups。

Named capture groups

下面讲到了 numbered capture groups 是通过序列号来拜访到匹配的数据。然而匹配到的 group 是没有名字的。

咱们看下怎么才可能给这些 groups 起个名字：

const RE_DATE = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; // 1999
const month = matchObj.groups.month; // 12
const day = matchObj.groups.day; // 31

看下 matchObj 的内容：

[
  '1999-12-31',
  '1999',
  '12',
  '31',
  index: 0,
  input: '1999-12-31',
  groups: [Object: null prototype] {year: '1999', month: '12', day: '31'}
]

能够看到，这次多了 groups 的信息。

如果要匹配咱们之前匹配过的 group 信息，则能够应用 numbered groups 的 \k 或者 named groups 的 \k<name>.

咱们看一个例子：

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

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

两种语法都能够应用。

Named capture groups 还能够和 replace 一起应用。

有了 group name，咱们能够间接在 replace 中应用 group name 来做援用：

const RE_DATE = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/;
console.log('1999-12-31'.replace(RE_DATE,
    '$<month>/$<day>/$<year>'));
    // 12/31/1999

replace 的第二个参数还能够是一个函数，函数的参数就是咱们 group 进去的一些内容：

const RE_DATE = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/;
console.log('1999-12-31'.replace(
    RE_DATE,
    (g0,y,m,d,offset,input, {year, month, day}) => // (A)
        month+'/'+day+'/'+year));
    // 12/31/1999

下面的例子中，g0 = 1999-12-31 示意匹配的子字符串。y, m, d 匹配的是 numbered groups 1，2，3。

input 是整个的输出。{year, month, day} 匹配的是 named groups。

RegExp 中 Unicode 属性的本义

在 Unicode 规范中，每一个字符都有属性，简略点说属性就是用来形容这个字符的。

比如说 General_Category 示意的是字符的分类：x: General_Category = Lowercase_Letter

White_Space 示意的是空格，tabs 和换行：\t: White_Space = True

Age 示意的是该字符什么时候被退出到 Unicode 中等等。

这些属性还有对应的缩写：Lowercase_Letter = Ll，Currency_Symbol = Sc 等等。

举个例子，比如说咱们想匹配空格。传统做法是这样做的：

> /^\s+$/.test('\t \n\r')
true

后面是正则表达式，而后应用一个 test 办法来匹配字符串，最终失去的 true。

刚刚讲到了 unicode 的属性，咱们也能够用属性来匹配：

> /^\p{White_Space}+$/u.test('\t \n\r')
true

属性匹配应用的是\p, 前面跟的是属性值。

留神，咱们还要在正则表达式前面加上 u，以示意应用的是 Unicode 属性本义。

lookaround assertion

lookaround assertion 能够被翻译为环视断言，它是正则表达式中的一种构造，用来判断要匹配的对象的前后环境是什么样的。

有两种 lookaround assertion，一种是 Lookahead 一种是 Lookbehind。

咱们先看一下 Lookahead 的应用：

const RE_AS_BS = /aa(?=bb)/;
const match1 = RE_AS_BS.exec('aabb');
console.log(match1[0]); // 'aa'

const match2 = RE_AS_BS.exec('aab');
console.log(match2); // null

lookahead 就是向前查看，下面咱们应用的是(?=bb) 来向前匹配 bb。

留神，尽管正则表达式匹配上了 aabb，然而 match 中并不蕴含 bb。

后果是第一个匹配上了，第二个没有匹配。

除了是用?= 之外，咱们还能够应用?! 示意不等：

> const RE_AS_NO_BS = /aa(?!bb)/;
> RE_AS_NO_BS.test('aabb')
false
> RE_AS_NO_BS.test('aab')
true
> RE_AS_NO_BS.test('aac')
true

再来看一下 Lookbehind 的应用。

Lookbehind 和 Lookahead 查问的方向刚刚相同。

向后匹配是应用 ?<= 来示意的，咱们来看一个例子：

const RE_DOLLAR_PREFIX = /(?<=\$)foo/g;
'$foo %foo foo'.replace(RE_DOLLAR_PREFIX, 'bar');
    // '$bar %foo foo'

下面的例子中，咱们匹配了最后面的 $，而后应用 bar 替换掉了 foo。

同样的，咱们也能够应用?<! 来示意非相等的状况：

const RE_NO_DOLLAR_PREFIX = /(?<!\$)foo/g;
'$foo %foo foo'.replace(RE_NO_DOLLAR_PREFIX, 'bar');
    // '$foo %bar bar'

dotAll flag

失常状况下 dot . 代表的是一个字符，然而这个字符不可能代表行的结束符：

> /^.$/.test('\n')
false

而 dotAll 是在 dot . 匹配前面引入的 s, 它能够被用来匹配行的结束符：

> /^.$/s.test('\n')
true

在 ES 中，有上面几种字符示意的都是行的结束符：

• U+000A LINE FEED (LF) (\n)
• U+000D CARRIAGE RETURN (CR) (\r)
• U+2028 LINE SEPARATOR
• U+2029 PARAGRAPH SEPARATOR

总结

以上就是 ES9 中引入的正则表达式 RegExp 的新个性了，心愿大家可能喜爱。

本文作者：flydean 程序那些事

本文链接：http://www.flydean.com/es9-regexp/

本文起源：flydean 的博客

欢送关注我的公众号:「程序那些事」最艰深的解读，最粗浅的干货，最简洁的教程，泛滥你不晓得的小技巧等你来发现！