ES9的新特性之正则表达式RegExp详解

 更新时间:2021年04月07日 10:51:19   作者:flydean程序那些事  
这篇文章主要介绍了ES9的新特性之正则表达式RegExp详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

简介

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

于是正则表达式成了程序员的噩梦。今天我们来看一下如何在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.

我们看一个例子:

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详解的文章就介绍到这了,更多相关ES9正则表达式RegExp内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 十分钟上手正则表达式 上篇

    十分钟上手正则表达式 上篇

    正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等
    2021-10-10
  • 正则表达式模式修正符 比如/esi

    正则表达式模式修正符 比如/esi

    下面列出了当前在 PCRE 中可能使用的修正符。括号中是这些修正符的内部 PCRE 名。修正符中的空格和换行被忽略,其它字符会导致错误。
    2010-07-07
  • 关于日期正则表达式的思路详解

    关于日期正则表达式的思路详解

    日期正则一般是对格式有要求,且数据不是直接由用户输入时使用。这篇文章主要介绍了日期正则表达式的思路详解,需要的朋友可以参考下
    2017-09-09
  • asp提取内容中的手机号码,qq,网址的正则代码

    asp提取内容中的手机号码,qq,网址的正则代码

    有时候需要获取页面源代码中的手机号码,qq,网址,一般情况下都是用正则表达式实现的,需要的朋友可以参考下。
    2011-09-09
  • 无殇 javascript正则练习器

    无殇 javascript正则练习器

    无殇写的javascript正则练习器,比较不错,最后生成替换参数,美中不足的就是替换无法使用,本人也试着修改因为替换参数过多而无法实现,希望会的朋友修正一下
    2007-06-06
  • 15个超实用的php正则表达式

    15个超实用的php正则表达式

    对于开发人员来说,正则表达式是一个非常有用的功能,它提供了 查找,匹配,替换 句子,单词,或者其他格式的字符串。这篇文章主要介绍了15个超实用的php正则表达式,需要的朋友可以参考下
    2015-11-11
  • js正则查找match()与替换replace()用法实例

    js正则查找match()与替换replace()用法实例

    这篇文章主要介绍了js正则查找match()与替换replace()用法,实例分析了js中正则的查找match()与替换replace()的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 日常收集整理php正则表达式(超常用)

    日常收集整理php正则表达式(超常用)

    正则表达式用于字符串处理、表单验证等场合,实用效率非常高,本文给大家收集整理了些php常用正则表达式,对php常用正则表达式感兴趣的朋友可以参考下本篇文章
    2015-10-10
  • 正则表达式下全部符号解释说明

    正则表达式下全部符号解释说明

    正则表达式下全部符号,对于书写正则表达式的朋友一定要了解下,才能更好的发挥正则的作用于阅读别人的代码,先从基本来。
    2010-07-07
  • 详解PHP正则表达式替换实现(PHP preg_replace,PHP preg_replace)

    详解PHP正则表达式替换实现(PHP preg_replace,PHP preg_replace)

    PHP正则表达式替换实现是如何的呢?首先向你介绍下PHP preg_replace,PHP preg_replace的使用是我们实现的方法,那么对于PHP正则表达式替换实现过程我们从实例入手,感兴趣的跟着小编一起了解了解吧
    2015-09-09

最新评论