javascript正则表达式中分组详解


Posted in Javascript onJuly 17, 2016

之前写了一篇关于正则新手入门的文章,本以为对正则表达式相对比较了解 但是今天我又遇到了一个坑,可能是自己不够细心的原因吧,今天就着重和大家分享一下javascript正则表达式中的分组。如果你对JS正则表达式不够理解 可以点击这里了解更多。

分组在正则中用的还是比较广的,我所理解的分组 就是一对括号() ,每一对括号 就代表了一个分组,

分组可以分为:

  1. 捕获性分组
  2. 非捕获性分组
  3. 捕获性分组

捕获性分组会在 比如 match exec这样的函数中以第二项,第三项的形式得到相应分组的结果。先来看一个例子吧

var reg = /test(\d+)/;
 var str = 'new test001 test002';
 console.log(str.match(reg));
//["test001", "001", index: 4, input: "new test001 test002"]

代码中 (\d+)是一个分组(有些人也叫他子模式),但是表示的都是同一个意思,上面的例子中 test001是完全匹配的结果,
然而 分组的匹配是从整个完全匹配结果(也就是test001)中来查找与子模式\d+匹配的字符,这里显然是 001.

但是今天遇到的情况是这样的

var reg = /test(\d)+/;
 var str = 'new test001 test002';
 console.log(str.match(reg));
//["test001", "1", index: 4, input: "new test001 test002"]

不同之处就是 (\d+) 改为了 (\d)+ ,整个匹配结果还是 test001 但是第一个分组匹配的结果却不同。

咱们慢慢来分析他们的区别

(\d+) 这整个是一个分组的情况,由于 默认情况下 匹配模式都是贪婪模式 也就是说尽可能多的去匹配
所有\d+ 匹配到的结果 是 001 然后 外面添加了一对括号 也就是一个分组,这样第一个分组中匹配的结果就是 001.

再来看第二个例子中的 (\d)+ 同样这也是一个贪婪模式 首先会先匹配0然后后面是0 也会匹配到 最后是1 同样也匹配到 到此 匹配结束

看起来跟第一个例子中的匹配没什么区别,但是这里的 分组(\d)表示 匹配单个数字,

按照我之前的理解是 会匹配最开始匹配到的结果 也就是0 但这种理解是错误的。由于整个匹配是贪婪模式,尽可能多的去匹配

分组中的 (\d) 就会捕获 最后一次匹配到的结果 1

如果是非贪婪模式 那就会尽可能少的去匹配

var reg = /test(\d)+?/;
 var str = 'new test001 test002';
 console.log(str.match(reg));

//["test001", "0", index: 4, input: "new test001 test002"]

这样(\d)匹配结果就是0了,虽然后面还有能够匹配到的结果,但是这里是尽可能少的去匹配

非捕获性分组

var reg = /test(?:\d)+/;
 var str = 'new test001 test002';
 console.log(str.match(reg));
//["test001", index: 4, input: "new test001 test002"]

非捕获性分组也就是 有些地方需要用到一对括号,但是又不想让他成为一个捕获性分组也就是不想让这个分组被类似 macth exec 这样的函数所获取到

通常在括号内部的前面加上?: 也就是 (?:pattern)这样就变成了一个非捕获性分组,

这样 match的结果中就不会出现分组匹配到的内容了 也就是少了 第二项的 1.

这篇文章着重说明 (\d+)和 (\d)+的区别,也是我今天踩到的坑,若有错误之处,欢迎指正。

Javascript 相关文章推荐
JavaScript 的方法重载效果
Aug 07 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
最佳的JavaScript错误处理实践
Jul 16 #Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 #Javascript
js canvas实现擦除动画
Jul 16 #Javascript
微信jssdk用法汇总
Jul 16 #Javascript
详解JavaScript节流函数中的Throttle
Jul 16 #Javascript
很棒的js选项卡切换效果
Jul 15 #Javascript
轻松5句话解决JavaScript的作用域
Jul 15 #Javascript
You might like
PHP 缓存实现代码及详细注释
2010/05/16 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
php define的第二个参数使用方法
2013/11/04 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
javascript 操作符(~、&、|、^、)使用案例
2014/12/31 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
python实现简易动态时钟
2018/11/19 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
什么是lambda函数
2013/09/17 面试题
大学生个人求职口试自我评价
2014/02/16 职场文书
单位工作证明格式模板
2014/10/04 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
介绍信范文
2015/01/31 职场文书
建议书范文
2015/02/05 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
Python日志模块logging用法
2022/06/05 Python