详解JavaScript正则表达式之分组匹配及反向引用


Posted in Javascript onMarch 09, 2016

语法

元字符:(pattern)

作用:用于反复匹配的分组

属性$1~$9

如果它(们)存在,用于得到对应分组中匹配到的子串

\1或$1

用于匹配第一个分组中的内容

\2或$2

用于匹配第一个分组中的内容

...

\9或$9

用于匹配第一个分组中的内容

用法示例

var reg = /(A+)((B|C|D)+)(E+)/gi;//该正则表达式有4个分组
//对应关系
//RegExp.$1 <-> (A+)
//RegExp.$2 <-> ((B|C|D)+)
//RegExp.$3 <-> (B|C|D)
//RegExp.$4 <-> (E+)

以上的代码也同时给出了$1~$9的用法

$1~$9是正则表达式预定义的静态属性,通过RegExp.$1引用

分组嵌套关系说明

上述代码也可以说明分组的嵌套关系

//测试环境 Chrome浏览器
var str = "ABCDE";
var reg = /(A+)((B|C|D)+)(E+)/gi;
str.match(reg);//输出:["ABCDE"]
reg.exec(str,'i');//输出:["ABCDE", "A", "BCD", "D", "E"]
RegExp.$1;//输出:"A"
RegExp.$2;//输出:"BCD"
RegExp.$3;//输出:"D"
RegExp.$4;//输出:"E"

这样就可以很明白的看出分组的嵌套关系了

总结来说:大的分组中存在小的分组时,小的分组是排在该大分组后面的分组,以此类推

第二部分

这部分主要讲解类似于"\1"这个东西的用法

分组匹配之反向引用

语法

元字符 \1~\9

作用:用来表示前面以匹配的字符或分组的一个引用

用法示例

参考文章:[原]AS3 js正则表达式 反向引用(backreference)

上面说的可能有些拗口,下面给一个例子:

//一般情况,当我们想匹配任意两个相同的字符(复杂一点就是两个相同的分组)时,往往可以借助下面的写法
//说明:
//(\w)用来匹配任何除了换行和制表符的字符, 而\1是对(\w)的一个引用, 所以你可以理解成: (\w)\1 就是(\w)(\w)
//但是,
//(\w)\1 和 (\w)(\w)的不同之处在于, (\w)(\w)表示任意两个连续的字符, 比如Ac, MM, K9, 都可以,
// 但(\w)\1只能是AA, CC, 99 这样连续相同的字符
//所以, 你可以这样理解, \1 是对(\w)的一个实例化引用, 当(\w) 匹配到A时, \1 被表达成A, 当(\w)匹配9时, \1 被表示成9
//说了这么多, 可能有些废话, 下面这个例子就很好理解了
var str = "AA Am 99";
var reg = /(\w)\1/g;
str.match(reg);//输出: ["AA", "99"]

所以, 参照上边我所引用的文章中给出的 "关键字搜索高亮显示的正则表达用法" 的例子, 我给出自己改进的小的DEMO

虽然这个DEMO没有用到任何的关于反向引用的知识点::>_<::

//测试环境 Chrome浏览器
var key = "keywords";//搜索的关键字
var text = " I am a text, and I have a keywords before this";//待匹配的文本
var reg = new RegExp("("+key+")","g");
text.replace(reg,"<span style='color:red'>$1</span>");//输出: " I am a text, and I have a <span style='color:red'>keywords</span> before this"

下面给大家详细介绍下正则表达式之反向引用

 示例1:

public static void main(String[] args) { 
 String s="99-3933"; 
 boolean b=Pattern.matches("([\\d])\\1[-]([3])\\1\\2{2}", s); 
 System.out.println(b); 
}

反向引用,匹配重复的数字

([\d])====>\1

([3])====>\2

示例2:

public class test { 
 public static void main(String[] args) { 
  String s="99-393399-3933"; 
  boolean b=Pattern.matches("(([\\d])\\2[-]([3])\\2\\3{2})\\1", s); 
  System.out.println(b); 
 } 
}
Javascript 相关文章推荐
在JavaScript中使用inline函数的问题
Mar 08 Javascript
一个tab标签切换效果代码
Mar 27 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 #Javascript
javascript事件绑定学习要点
Mar 09 #Javascript
js实现分割上传大文件
Mar 09 #Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 #Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 #Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 #Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 #Javascript
You might like
用PHP查询域名状态whois的类
2006/11/25 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
原生js实现随机点名
2020/07/05 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python错误处理详解
2014/09/28 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
为什么要有struct关键字
2012/05/08 面试题
幼儿教师国培感言
2014/02/19 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
西安事变观后感
2015/06/12 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
go开发alertmanger实现钉钉报警
2021/07/16 Golang
Python内置的数据类型及使用方法
2022/04/13 Python