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/。
命名分组虽然带来了一些好处,但我个人觉得,正则越长越难读懂,尤其增加的长度是一堆小括号和尖括号。在可读性上,命名分组也许会起到反作用,尤其对正则苦手来说。
JS 正则中的命名捕获分组的更多相关文章
- Python中正则匹配使用findall,捕获分组(xxx)和非捕获分组(?:xxx)的差异
转自:https://blog.csdn.net/qq_42739440/article/details/81117919 下面是我在用findall匹配字符串时遇到的一个坑,分享出来供大家跳坑. 例 ...
- JS 正则中环视(断言)应用 -- 数字千分符
介绍一下顺序环视 (?=...) 和逆序环视 (?<=...) 方便不想看长文的人,如果在支持 ES2018 的环境中整数可以这样使用: String(12345678).replace(/(? ...
- 分享一下js正则中惰性与贪婪
首先引入一个介绍比较详细的网站 http://www.cnblogs.com/yuaima/p/5258513.html http://www.jb51.net/article/31491.htm 接 ...
- js正则中的贪婪和非贪婪模式问题总结
var b="abeeee:eeeee:eeeeeab"; console.log(b.match(/e+\:e+/g));//["eeee:eeeee"]贪婪 ...
- js正则及常用方法函数总结
正则表达式作为一种匹配处理字符串的利器在很多语言中都得到了广泛实现和应用,web开发本质上是处理字符串(服务端接受请求处理后拼接字符串作为响应,这在早期的CGI编程中最明显,然后客户端解析字符串进行渲 ...
- js 正则常用函数 会正则得永生
正则表达式作为一种匹配处理字符串的利器在很多语言中都得到了广泛实现和应用,web开发本质上是处理字符串(服务端接受请求处理后拼接字符串作为响应,这在早期的CGI编程中最明显,然后客户端解析字符串进行渲 ...
- js正则基础总结和工作中常用验证规则
知识是需要系统的.就像js正则用了那么多次,却还是浑浑噩噩,迫切需要来一次整理,那么来吧! 基本知识 元字符 \d 匹配数字等于[0-9] \w 匹配字母.数字.下划线.中文 \s 匹配任意空白字符 ...
- Django---路由系统,URLconf的配置,正则表达式的说明(位置参数),分组命名(捕获关键字参数),传递额外的参数给视图,命名url和url的反向解析,url名称空间
Django---路由系统,URLconf的配置,正则表达式的说明(位置参数),分组命名(捕获关键字参数),传递额外的参数给视图,命名url和url的反向解析,url名称空间 一丶URLconf配置 ...
- js正则实现从一段复杂html代码字符串中匹配并处理特定信息
js正则实现从一段复杂html代码字符串中匹配并处理特定信息 问题: 现在要从一个复杂的html代码字符串(包含各种html标签,数字.中文等信息)中找到某一段特别的信息(被一对“|”包裹着),并对他 ...
随机推荐
- 用人类社会工程学对C语言中的一些基本概念的剖析与理解
最近在学C语言程序设计时总是遇到一些概念理解上的不清晰与混乱的地方,在一次偶然间想到了以前看过的一部电影<我是谁,没有一个系统是安全的>,里面的主角用社会工程学的想法结合黑客知识化险为夷, ...
- 【Python 10】汇率兑换3.0(while循环)
1.案例描述 设计一个汇率换算程序,其功能是将美元换算成人民币,或者相反. 2.0增加功能:根据输入判断是人民币还是美元,进行相应的转换计算 3.0增加功能:程序可以一直运行,知道用户选择退出 2.案 ...
- Vuex初级入门及简单案例
1.为什么要使用Vuex? (1)方便所有组件共享信息,方便不同组件共享信息. (2)某个组件需要修改状态和需求. 2.状态有哪些? (1)组件内部定义的data状态(通过组件内部修改) (2)组 ...
- 012_call和apply区别
一. function fn(a,b) { console.log(this); } fn.call(null,1,2); //call为参数方式 fn.apply(null,[1,2]); //ap ...
- Spring Security(三十四):10.4 Jackson Support
Spring Security has added Jackson Support for persisting Spring Security related classes. This can i ...
- git完全cli指南之详细思维导图整理分享
一直以来都觉得 在开发过程中 能用命令行的还是用命令行 能用快捷键的就要快捷键 前期可能要点学习成本 但是熟练后带来的好处还是非常可观的 所以一直坚持使用命令行的方式来使用git 基本上每个操作都能心 ...
- 在 CentOS 7 中安装 MySQL 8
准备 本文环境信息: 软件 版本 CentOS CentOS 7.4 MySQL 8.0.x 安装前先更新系统所有包 sudo yum update 安装 1. 添加 Yum 包 wget https ...
- JShell脚本工具
JShell脚本工具是JDK9的新特性 什么时候会用到 JShell 工具呢,当我们编写的代码非常少的时候,而又不愿意编写类,main方法,也不愿意去编译和运行,这个时候可以使用JShell工具.启动 ...
- SpringMVC返回json数据的三种方式(转)
原文:https://blog.csdn.net/shan9liang/article/details/42181345# 1.第一种方式是spring2时代的产物,也就是每个json视图contro ...
- 酷炫的loading
今天分享一下,怎么通过用css写出一个酷炫的loading. meta: <meta name="viewport" content="width=device-w ...