详解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 相关文章推荐
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
Jquery ui css framework
Jun 28 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
Javascript 编码约定(编码规范)
Mar 11 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 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
模仿OSO的论坛(三)
2006/10/09 PHP
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
Python注释详解
2016/06/01 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
计算机专业毕业生求职信分享
2013/12/24 职场文书
房地产端午节活动方案
2014/08/24 职场文书
2014年工人工作总结
2014/11/25 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书