深入理解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中文本框中输入法切换的问题
Dec 10 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
JavaScript手机振动API
Jun 11 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
jquery实现图片轮播器
May 23 jQuery
Angular实现预加载延迟模块的示例
Oct 12 Javascript
Angular实现表单验证功能
Nov 13 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 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
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
php错误级别的设置方法
2013/06/17 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
PHP编写简单的App接口
2016/08/28 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
python的三目运算符和not in运算符使用示例
2014/03/03 Python
python正则中最短匹配实现代码
2018/01/16 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
基于Python实现简单学生管理系统
2020/07/24 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
计算机工程学院个人求职信
2013/10/05 职场文书
毕业生怎样写好自荐信
2013/11/11 职场文书
体育教育专业毕业生自荐信
2013/11/15 职场文书
教师绩效工资方案
2014/02/01 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
新学期开学寄语2016
2015/12/04 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
python中os.path.join()函数实例用法
2021/05/26 Python
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
深入理解Pytorch微调torchvision模型
2021/11/11 Python
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python