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中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 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解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
JS常用算法实现代码
2016/11/14 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
python实现ipsec开权限实例
2014/11/11 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
python如何获取apk的packagename和activity
2020/01/10 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
创立科技Java面试题
2015/11/29 面试题
教师党员思想汇报
2014/01/06 职场文书
2014年库房工作总结
2014/11/26 职场文书
个人年终总结怎么写
2015/03/09 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
九年级历史教学反思
2016/02/19 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle