JS 正则中的命名捕获分组

假设你在一段陌生的代码中看到这样一个函数:

function toLocalDate(date) {
  return date.replace(/(\d{2})-(\d{2})-(\d{4})/, "$2-$1-$3")
}

单看这个函数你能知道它是想把“日-月-年”替换成“月-日-年”,还是反过来?匿名捕获分组没法做到这一点,那就该命名捕获分组上场了:

function toLocalDate(date){
  return date.replace(/(?<month>\d{2})-(?<day>\d{2})-(?<year>\d{4})/, "$<day>-$<month>-$<year>")
}

俗话说的好,“一个好的变量名赛过一行注释”,命名捕获分组很大的一个作用就是它能起到注释的作用。

另外,命名捕获分组还有一个好处,那就是假如你在修改一个正则时,在已有分组的左边引入了新的分组,那么你还得记得更新已有的反向引用的数字。比如将 (foo)\1 改成了 (bar)(foo)\1,那你得把原来的 \1 改成 \2,replace() 方法的第二个参数里的 $1 也同样得改。

语法

命名捕获分组自身的语法是 (?<name>...),比普通的分组多了一个 ?<name> 字样,其中 name 的起法就和你平时起变量名一样即可(不过在这里关键字也可用)。

反向引用一个命名分组的语法是 \k<name>,注意命名分组同样可以通过数字索引来反向引用,比如:

/(?<foo>a)\k<foo>\1/.test("aaa") // true

在 replace() 方法的替换字符串中反向引用是用 $<name>:

"abc".replace(/(?<foo>a)/, "$<foo>-") // "a-bc",同样 $1 仍然可用

总结一下就是,和命名分组相关的有三种语法,分别是 ?<name>、\k<name>、$<name>,相同点是都用尖括号包裹着分组名。

在 API 中的使用

在 exec() 和 match() 中的使用:

const groups = "04-25-2017".match(/(?<month>\d{2})-(?<day>\d{2})-(?<year>\d{4})/).groups // {month: "04", day: "25", year: "2017"}

const {day, month, year} = groups

exec() 和 match() 方法返回的匹配结果数组上多了一个 groups 属性,里面存放着每个命名分组的名称以及它们匹配到的值,利用 ES6 的解构语法,可以方便的提取出想要的字段。注意这个 groups 属性只有在当前正则里至少存在一个命名分组的前提下才会存在,比如:

/(\d{2})-(\d{2})-(\d{4})/.exec("04-25-2017").groups // undefined,因为没有命名分组

在 replace(/.../, replacement) 中的使用:

replacement 是字符串的情况上面已经举过例子了,这里主要讲它是函数的情况:

"04-25-2017".replace(/(?<month>\d{2})-(?<day>\d{2})-(?<year>\d{4})/, (...args) => {
  const groups = args.slice(-1)[0]
  const {day, month, year} = groups
  return `${day}-${month}-${year}`
}) // "25-04-2017"

也就是说,在实参列表的最末尾,多传了一个 groups 对象。同样,如果正则里没有命名分组,这个参数不会存在。

异常情况

分组名不能有重复项:

/(?<foo>a)(?<foo>b)/ // SyntaxError: Duplicate capture group name

反向引用一个不存在的分组名:

/\k<foo>/u // SyntaxError: Invalid named capture referenced

/\k<foo>/.test("k<foo>") // true, 非 Unicode 下为了向后兼容,k 前面的 \ 会被丢弃

在 reaplce() 方法的替换字符串中引用一个不存在的分组:

"abc".replace(/(?<foo>.*)/, "$<bar>") // SyntaxError: Invalid replacement string

"abc".replace(/(.*)/, "$<bar>") // "$<bar>",不包含命名分组时会向后兼容

总结

V8 目前已经完全实现了命名捕获分组的提案 https://tc39.github.io/proposal-regexp-named-groups/

命名分组虽然带来了一些好处,但我个人觉得,正则越长越难读懂,尤其增加的长度是一堆小括号和尖括号。在可读性上,命名分组也许会起到反作用,尤其对正则苦手来说。

时间: 2024-10-14 19:20:29

JS 正则中的命名捕获分组的相关文章

Python中正则匹配使用findall,捕获分组(xxx)和非捕获分组(?:xxx)的差异

转自:https://blog.csdn.net/qq_42739440/article/details/81117919 下面是我在用findall匹配字符串时遇到的一个坑,分享出来供大家跳坑. 例题: 如图所示: 正则a和正则b两个式子匹配出来的结果是不同的. 那 ?: 的作用就是把捕获分组转变为非捕获分组. 什么是捕获组和非捕获组呢? (qq|163|126) ---> 这样单独的括号就为捕获组 (?:qq|163|126) ---> 这样在原有分组里加上?: 就把捕获组转变为一个非捕获

JS 正则中环视(断言)应用 -- 数字千分符

介绍一下顺序环视 (?=...) 和逆序环视 (?<=...) 方便不想看长文的人,如果在支持 ES2018 的环境中整数可以这样使用: String(12345678).replace(/(?<=\d)(?=(\d{3})+\b)/g, ',') // "12,345,678" 其中最关键的是肯定顺序环视(?=...),也叫零宽度正预测先行断言.添加千分符麻烦的地方在于只有在从右到左 3 的倍数的位数和前面的数字中间需要添加逗号而正则是从左到右匹配的,这时候就需要用到顺序

js正则中的贪婪和非贪婪模式问题总结

var b="abeeee:eeeee:eeeeeab"; console.log(b.match(/e+\:e+/g));//["eeee:eeeee"]贪婪模式,只显示第一个匹配到的 console.log(b.match(/e+?\:e+?/g));//["eeee:e", "eeee:e"]非贪婪模式,从前向后查询 console.log(b.match(/e+\:(?=e+)/g));//["eeee:&q

js正则及常用方法函数总结

正则表达式作为一种匹配处理字符串的利器在很多语言中都得到了广泛实现和应用,web开发本质上是处理字符串(服务端接受请求处理后拼接字符串作为响应,这在早期的CGI编程中最明显,然后客户端解析字符串进行渲染和执行),所以说,JS作为一门常用于web开发的语言,必然要具备正则这种强大的特性,本文将对JS中的正则用法及常用函数进行一番总结. 1.正则对象及其属性 首先正则对象是JS中内置的一个对象,好比Array以及Math一样,不需要第三方库的支持,通常我们采取两种方式来定义一个正则对象 1)构造函数

js正则实现从一段复杂html代码字符串中匹配并处理特定信息

js正则实现从一段复杂html代码字符串中匹配并处理特定信息 问题: 现在要从一个复杂的html代码字符串(包含各种html标签,数字.中文等信息)中找到某一段特别的信息(被一对“|”包裹着),并对他进行加粗.加下滑线处理. 解决思路: 1.用正则匹配“|”出现的次数,处理刚好出现2次的(html字符串中一般不会含有这个字符) 2.使用正则分组,获取“|”之间的内容,并进行替换(添加样式) 代码: function specialDeal(){ htmlStr = htmlStr.replace

java 和 JS(javaScript)中的反斜杠正则转义

首先说下为什么要转义.在正则中有些字符有特殊含义的,比方说 * 可以前一子表达式的任意次,. 表示除"\r\n"之外的任何单个字符,+ 表示前一子表达式的一次或多次,等.而在有些情况下,需要正则验证这些字符,比方说要验证加减乘除四个运算符号,为了告诉编译器,你要验证的是一个字符而不是正则表达式,就要对这些有特殊含义的字符进行转义,这样就有了转义这一操作. 在java 和javascipt中,都是用反斜杠"\"进行转义,然后两种语言的用法不尽相同,下面举例说明: 1.

42 python中正则中的分组 正则中匹配字符串的起始和结尾以及单词边界

第七课 正则中的分组 # 分组 # 正则表达式中用一对圆括号括起来的部分被称为一个分组 # '(\d\d\d)-(\d\d)' import re ''' 1. 只有圆括号括起来的部分才算一组,如果正则表达式中既有被圆括号括起来的部分, 也有未被圆括号括起来的部分,那么只将圆括号括起来的部分算一组 2. group方法,如果不指定参数,会返回匹配的整个字符串,如果加参数,会返回指定 分组的字符串,组索引从1开始 3. groups方法,以元组形式返回匹配的所有分组 4. 分组的索引是从1开始的

正则中的括号()的用途(匹配子项或是分组)

首先我们前面介绍过,replace()方法中的第二个参数若是回调函数,那么这个回调函数中的参数就是匹配成功后的结果.....,那么有没有考虑回调函数中有多个参数呢? 先举个例子: <!DOCTYPE> <html> <head> <meta charset='utf-8'> <title></title> </head> <script type="text/javascript"> win

深入入门正则表达式(java) - 命名捕获

深入入门正则表达式(java) - 引言 深入入门正则表达式(java) - 1 - 入门基础深入入门正则表达式(java) - 2 - 基本实例 深入入门正则表达式(java) - 3 - 正则在java中的使用 深入入门正则表达式(java) - 匹配原理 - 1 - 引擎分类与普适原则 深入入门正则表达式(java) - 匹配原理 - 2 - 回溯 深入入门正则表达式(java) - 命名捕获 很多正则引擎都支持命名分组,java是在java7中才引入这个特性,语法与.Net类似(.Net