深入理解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 处理 URL 的两个函数代码
Aug 13 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 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
php adodb连接mssql解决乱码问题
2009/06/12 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
js页面跳转常用的几种方式
2010/11/25 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
Python可跨平台实现获取按键的方法
2015/03/05 Python
python实现图像识别功能
2018/01/29 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
工程造价与管理专业应届生求职信
2013/11/23 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
拾金不昧表扬信
2015/01/16 职场文书
杭白菊导游词
2015/02/10 职场文书
电影圆明园观后感
2015/06/03 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL