写点什么

ES9 的新特性: 正则表达式 RegExp

发布于: 2021 年 04 月 07 日

简介

正则表达式是我们做数据匹配的时候常用的一种工具,虽然正则表达式的语法并不复杂,但是如果多种语法组合起来会给人一种无从下手的感觉。

于是正则表达式成了程序员的噩梦。今天我们来看一下如何在 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]; // 1999const month = matchObj[2]; // 12const 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; // 1999const month = matchObj.groups.month; // 12const 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'); // trueRE_TWICE.test('abc!ab'); // false
复制代码


const RE_TWICE = /^(?<word>[a-z]+)!\1$/;RE_TWICE.test('abc!abc'); // trueRE_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 的博客

欢迎关注我的公众号:「程序那些事」最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧等你来发现!

发布于: 2021 年 04 月 07 日阅读数: 13
用户头像

关注公众号:程序那些事,更多精彩等着你! 2020.06.07 加入

最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧,尽在公众号:程序那些事!

评论

发布
暂无评论
ES9的新特性:正则表达式RegExp