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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
js Math 对象的方法
Sep 01 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
javascript canvas封装动态时钟
Sep 30 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分页函数
2006/07/08 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
Python中print函数简单使用总结
2019/08/05 Python
Django 自定义分页器的实现代码
2019/11/24 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
专升本自我鉴定
2013/10/10 职场文书
企业门卫岗位职责
2013/12/12 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
手术室护士个人总结
2015/02/13 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
纪委立案决定书
2015/06/24 职场文书
劳动模范获奖感言
2015/07/31 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫