深入理解JS正则表达式---分组


Posted in Javascript onJuly 18, 2016

深入理解JS正则表达式---分组

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

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

•捕获性分组
•非捕获性分组

捕获性分组

捕获性分组会在 比如 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了,虽然后面还有能够匹配到的结果,但是这里是尽可能少的去匹配

非捕获性分组

非捕获性分组也就是 有些地方需要用到一对括号,但是又不想让他成为一个捕获性分组也就是不想让这个分组被类似 macth exec 这样的函数所获取到通常在括号内部的前面加上?: 也就是 (?:pattern)这样就变成了一个非捕获性分组,

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

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

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

以上这篇深入理解JS正则表达式---分组就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入认识javascript中的eval函数
Nov 02 Javascript
JavaScript 拾漏补遗
Dec 27 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 #Javascript
简单的JS轮播图代码
Jul 18 #Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 #Javascript
Bootstrap零基础学习第一课之模板
Jul 18 #Javascript
深入分析javascript中的错误处理机制
Jul 17 #Javascript
javascript正则表达式中分组详解
Jul 17 #Javascript
最佳的JavaScript错误处理实践
Jul 16 #Javascript
You might like
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
php xml文件操作实现代码(二)
2009/03/20 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
js charAt的使用示例
2014/02/18 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
python中mechanize库的简单使用示例
2014/01/10 Python
Python入门篇之文件
2014/10/20 Python
使用grappelli为django admin后台添加模板
2014/11/18 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
python虚拟环境完美部署教程
2019/08/06 Python
简单了解python列表和元组的区别
2020/05/14 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
基层干部十八大感言
2014/01/19 职场文书
称象教学反思
2014/02/03 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
校园广播稿精选
2014/10/01 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书