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 相关文章推荐
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
vue生命周期的探索
Apr 03 Javascript
了解javascript中的Dom操作
May 27 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
微信小程序如何获取地址
Dec 24 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 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 getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python实现基本线性数据结构
2016/08/22 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
python基于ID3思想的决策树
2018/01/03 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
QML实现钟表效果
2020/06/02 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
python代码实现图书管理系统
2020/11/30 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
光盘行动倡议书
2014/02/02 职场文书
开学典礼决心书
2014/03/11 职场文书
困难补助申请报告
2015/05/19 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
工伤调解协议书
2016/03/21 职场文书