详解javascript 正则表达式之分组与前瞻匹配


Posted in Javascript onMay 30, 2018

本文主要讲解javascript 的正则表达式中的分组匹配与前瞻匹配的,需要对正则的有基本认识,本人一直对两种匹配模棱不清。所以在这里总结一下,如有不对,还望大神指点。

1.分组匹配:

1.1捕获性分组匹配 ()

2.2非捕获性分组匹配 (?:)

2前瞻匹配:

2.1正向前瞻匹配: (?=表达式) 后面一定要匹配有什么

2.2反向前瞻匹配: (?!表达式) 后面一定不能要有什么

1.1、捕获性分组匹配 ()

var str1 = "holle word 123456 can 12s a 123 a";
var reg1 =/([a-z]+)\s(\d+)/; //不是全局模式 ,以() 分组,这里有两组,每一组都将匹配得到
var regg1 = /([a-z]+)\s(\d+)/g; //全局模式 g,以() 分组,这里有两组,每一组都将匹配得到
//res :非全局模式
console.log(reg1.exec(str1)); //exec()方法:["wold 123456","word","123456"]
console.log(str1.match(reg1));//match()方法:["word 123456","word","123456"]
console.log(RegExp.$1);//获取到第一个分组 ([a-z]+) 匹配的结果 :word
console.log(RegExp.$2);//获取到第一个分组 (\d+) 匹配的结果 :123456
//res :全局模式
console.log(regg1.exec(str1)); //exec()方法:["wold 123456","word","123456"]
console.log(str1.match(regg1));//match()方法:["word 123456","can 12","a 123"]
console.log(RegExp.$1);//获取到第一个分组 ([a-z]+) 匹配的结果 :a
console.log(RegExp.$2);//获取到第一个分组 (\d+) 匹配的结果 :123

分析:这个正则表达式匹配的是,至少一个字母,跟着一个空格,然后至少一个数字,

非全局就是第一次匹配正确就不会再往后匹配 了,

1.exec()方法提取的值是规定的,第一个值是正则表达式相匹配的文本,如上示例的"/([a-z]+)\s(\d+)/",第2个值是第一个字子表达式(即第一个分组),如上示例的"([a-z])",以此类推

2.即使是全局模式,exec()都不会全局匹配,循环调用exec()是唯一全局匹配的方式,所以你会发现上面使用exec()方法的结果是一样

3.而 match 方法在全局模式的捕获性分组匹配,会对正则表达式全局匹配,但是不会对子表达式匹配(分组),所以你会发现上面str1.match(regg1) 的结果是不会单独以分组([a-z]+)字母或者分组(\d+)数字出现,而是全局匹配整一个正则,所以结果是["word 123456","can 12","a 123"]

4.match 方法在非全局模式 的捕获性分组匹配中,会对正则表达式全局匹配,也会对子表达式匹配(分组),所以你发现,str1.match(reg1)匹配的结果有单独分组的匹配,但是因为是非全局,所以第一次匹配正确就结束了,只有["wold 123456","word","123456"],“wold 123456” 是整个表达式匹配的结果,“word” 是第一个分组([a-z]+)匹配的结果,“123456” 是第二分组(\d+) 匹配的结果

5.$1,$2... 分别包含正则表达式中的相对应反向引用,在全局与非全局模式,如果结果集有多个,会以最后一次匹配的结果来算,如上面,全局模式,匹配一共有三个符合的,["word 123456","can 12","a 123"],那么就以最后一个"a 123"为所有分组得到的结果,第一个分组是([a-z]+) 匹配的是字母所以是a,第二个分组是数字(\d+),所以是123 ,以此类推,如果只出现一次,一次也是当最后一次,自然也是一样的分析,哈哈哈,有点多余。。。。

 1.2 (?:) 非捕获性分组匹配 ,不捕获子表达式(分组)

var str1 = "holle word 123456 can 12s a 123 a";
var reg2 = /(?:[a-z]+)\s(?:\d+)/;
var regg2 = /(?:[a-z]+)\s(?:\d+)/g;
//res :非全局模式
console.log(reg2.exec(str1));// exec(): 直接匹配["wold 123456"],
console.log(str1.match(reg2));//match()方法:["word 123456"]
//res :全局模式
console.log(regg2.exec(str1));// exec(): 直接匹配["wold 123456"],
console.log(str1.match(regg2));//match()方法:["word 123456","can 12","a 123"]

分析,和上面的捕获性分组匹配是一样的解析,只是不再匹配子表达式(分组)

2.1正向前瞻匹配: (?=表达式) 后面一定要匹配有什么

注意:前瞻分组匹配(?=表达式) 会作为匹配内容,不会作为匹配结果返回

//实例,提取以jpg类型的图片名称
var str2 = "ab.jpg,admin/12.gif,and.jpg";
var reg3 = /[^\\]\w+(?=\.jpg)/g;
console.log(str2.match(reg3));//["ab", ",and"]

2.2反向前瞻匹配: (?!表达式) 后面一定不能要有什么

//示例:匹配 连续a字母三个以上,且后面不能有数字
var str3 = "aaa12345,aaaadmin,aaaaaadd,dlala";
var reg4 = /a{3,}(?!\d+)/g;
console.log(str3.match(reg4));//["aaaa","aaaaaa"]

总结

以上所述是小编给大家介绍的javascript 正则表达式之分组与前瞻匹配,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
json 实例详细说明教程
Oct 31 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 Javascript
浅谈如何使用webpack构建多页面应用
May 30 #Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 #Javascript
Angular4 反向代理Details实践
May 30 #Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 #Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 #Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 #Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 #Javascript
You might like
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
c#中的实现php中的preg_replace
2009/12/21 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
python读取浮点数和读取文本文件示例
2014/05/06 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
python flask实现分页的示例代码
2018/08/02 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
Django的models模型的具体使用
2019/07/15 Python
python滑块验证码的破解实现
2019/11/10 Python
Django 自动生成api接口文档教程
2019/11/19 Python
如何写python的配置文件
2020/06/07 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
学生打架检讨书大全
2014/01/23 职场文书
党支部公开承诺书
2014/03/28 职场文书
新闻发布会主持词
2014/03/28 职场文书
校外活动方案
2014/08/28 职场文书
教师师德表现自我评价
2015/03/05 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android