JavaScript 正则命名分组【推荐】


Posted in Javascript onJune 07, 2018

前言

以往我们只是习惯于通过数组下标来访问正则匹配到的分组,但分组达到4、5个时,标识起来就会非常麻烦。V8早已实现了正则命名分组提案,只是我们很少使用,本文将介绍JS的正则命名分组。

以往的做法

假设要使用正则匹配一个日期的年月日,以往我们会这样做:

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

这里有几个缺点:

  • 要找到一个分组的位置,你必须要去数括号的位置,有时嵌套起来会更令人头疼。
  • 后面维护代码的同学阅读起来,还要根据下标找到正则里面对应的括号,并且要再次阅读括号里面的正则才知道含义。
  • 当你调整正则捕获分组的数量、顺序或嵌套时,你必要还要对下面的代码做调整。

所有这些问题,都可以通过正则命名分组来解决。

现在的玩法

现在你只需要给分组里面一个命名标识即可:

(?<year>\d{4})

这里,我们用变量year标记了上一个捕获组#1。 该名称必须是合法的JavaScript标识符。 匹配后,您可以通过matchObj.groups.year访问捕获的字符串。

让我们通过命名分组重写前面的代码:

const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{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

如果正则里面有了命名分组,那么匹配结果会多了一个groups 的属性,这个属性中包含了一切命名分组的捕获结果。配合上解构大法使用又是一股清流:

const {groups: {day, year}} = RE_DATE.exec('1999-12-31');
console.log(year); // 1999
console.log(day); // 31

当然,即使你使用了命名分组,那么返回的结果还可以通过以往的数组下标方式访问:

const year2 = matchObj[1]; // 1999
const month2 = matchObj[2]; // 12
const day2 = matchObj[3]; // 31

命名分组具有以下优点:

  • 找到分组的“ID”更容易。
  • 匹配的代码变得自描述性,因为分组的ID描述了捕获的内容。
  • 如果更改分组的顺序,则不必更改匹配的代码。
  • 分组的名称也使正则表达式更易于理解,因为您可以直接看到每个组的用途。

反向引用

反向引用命名分组\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

replace( )

字符串方法replace()以两种方式支持命名分组:

方式一

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

如果replace不一定是直接返回新的拼接字符串,那么可以看看下面的办法:

方式二

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

看看这replace的callback形参密密麻麻看得心慌慌,很多都用不上,那么我们看看更简单的写法:

console.log('1999-12-31'.replace(RE_DATE,
 (...args) => {
  const {year, month, day} = args.slice(-1)[0];
  return month+'/'+day+'/'+year;
 }));
 // 12/31/1999

这里配合上spread operator直取最后一个参数,再接上一个解构大法,结果又是一股清流。

命名分组没有匹配结果?

如果可选的命名组不被匹配,则其属性值被设置为undefined,但key是仍存在:

const RE_OPT_A = /^(?<as>a+)?$/;
const matchObj = RE_OPT_A.exec('');
// We have a match:
console.log(matchObj[0] === ''); // true
// Group <as> didn't match anything:
console.log(matchObj.groups.as === undefined); // true
// But property as exists:
console.log('as' in matchObj.groups); // true

异常情况

分组名不能有重复项:

/(?<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>",不包含命名分组时会向后兼容

最后

  • Chrome60 已支持命名分组
  • 通过babel插件处理兼容问题

babel-plugin-transform-modern-regexp

总结

以上所述是小编给大家介绍的JavaScript 正则命名分组,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 继承机制实例
Aug 12 Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 #Javascript
vue.js实现标签页切换效果
Jun 07 #Javascript
js数组去重的N种方法(小结)
Jun 07 #Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 #Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 #Javascript
vue实现简单loading进度条
Jun 06 #Javascript
security.js实现的RSA加密功能示例
Jun 06 #Javascript
You might like
php数组去除空值函数分享
2015/02/02 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
JS实现手风琴特效
2020/11/08 Javascript
简单介绍Python中的struct模块
2015/04/28 Python
python中map()函数的使用方法示例
2017/09/29 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
教师先进事迹材料
2014/12/16 职场文书
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS