详解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 相关文章推荐
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 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获取当前url路径的函数以及服务器变量
2013/06/29 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
零基础php编程好学吗
2019/10/11 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
超清晰的document对象详解
2007/02/27 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
Python实现将xml导入至excel
2015/11/20 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
python实现多进程通信实例分析
2019/09/01 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
Python二元算术运算常用方法解析
2020/09/15 Python
机械制造专业个人的自我评价
2013/12/28 职场文书
研究生毕业鉴定
2014/01/29 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
钢琴师观后感
2015/06/12 职场文书