深入理解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 创建对象
Jul 17 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
javascript动画算法实例分析
Jul 31 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 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
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php中引用&的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
JS获取父节点方法
2009/08/20 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python的pycurl包用法简介
2015/11/13 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
大学生简历的个人自我评价
2013/12/04 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
社会学专业求职信
2014/02/24 职场文书
实习单位评语
2014/04/26 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
开会通知
2015/04/20 职场文书
离婚代理词范文
2015/05/23 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
python实现网络五子棋
2021/04/11 Python
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android