JS正则表达式学习之贪婪和非贪婪模式实例总结


Posted in Javascript onDecember 26, 2016

本文实例总结了JS正则表达式贪婪和非贪婪模式。分享给大家供大家参考,具体如下:

首先上一段js代码:

<script>
try{
 str="<p>abcdefg</p><p>abcdefghijkl</p>";
 re1=str.match(/<p>[\W\w]+?<\/p>/ig);
 alert("非贪婪模式:\r\n\r\n1:"+re1[0]+"\r\n2:"+re1[1]);
 re1=str.match(/<p>[\W\w]+<\/p>/ig);
 alert("贪婪模式:\r\n\r\n"+re1);
 re1=str.match(/<p>(.+?)<\/p>/i);
 alert("非贪婪模式,且不要标记:\r\n\r\n1:"+re1[1]);
 re1=str.match(/<p>(.+)<\/p>/i);
 alert("贪婪模式,且不要标记:\r\n\r\n"+re1[1]);
}catch(e){
 alert(e.description)
}
</script>

下边给出一些例子:

贪婪模式:

在使用修饰匹配次数的特殊符号时,有几种表示方法可以使同一个表达式能够匹配不同的次数,比如:"{m,n}", "{m,}", "?", "*", "+",具体匹配的次数随被匹配的字符串而定。这种重复匹配不定次数的表达式在匹配过程中,总是尽可能多的匹配。比如,针对文本 "dxxxdxxxd",举例如下:

贪婪模式:

表达式 匹配结果
(d)(\w+) "\w+" 将匹配第一个 "d" 之后的所有字符 "xxxdxxxd"
(d)(\w+)(d) "\w+" 将匹配第一个 "d" 和最后一个 "d" 之间的所有字符 "xxxdxxx"。 虽然 "\w+" 也能够匹配上最后一个 "d",但是为了使整个表达式匹配成功, "\w+" 可以 "让出" 它本来能够匹配的最后一个 "d"
 

由此可见,"\w+" 在匹配的时候,总是尽可能多的匹配符合它规则的字符。
虽然第二个举例中,它没有匹配最后一个 "d",但那也是为了让整个表达式能够匹配成功。
同理,带 "*" 和 "{m,n}" 的表达式都是尽可能地多匹配,带 "?" 的表达式在可匹配可不匹配的时候,
也是尽可能的 "要匹配"。这 种匹配原则就叫作 "贪婪" 模式 。

非贪婪模式:

在修饰匹配次数的特殊符号后再加上一个 "?" 号,则可以使匹配次数不定的表达式尽可能少的匹配,使可匹配可不匹配的表达式,尽可能的 "不匹配"。这种匹配原则叫作 "非贪婪" 模式,也叫作 "勉强" 模式。如果少匹配就会导致整个表达式匹配失败的时候,与贪婪模式类似,非贪婪模式会最小限度的再匹配一些,以使整个表达式匹配成功。举例如下,针对文本 "dxxxdxxxd" 举例:

表达式 匹配结果
(d)(\w+?) "\w+?" 将尽可能少的匹配第一个 "d" 之后的字符, 结果是:"\w+?" 只匹配了一个 "x"
(d)(\w+?)(d) 为了让整个表达式匹配成功,"\w+?" 不得不匹配 "xxx" 才可以让后边的 "d" 匹配, 从而使整个表达式匹配成功。因此,结果是:"\w+?" 匹配 "xxx"

更多的情况,举例如下:

举例1:表达式 "<td>(.*)</td>" 与字符串 "<td><p>aa</p></td> <td><p>bb</p></td>" 匹配时,匹配的结果是:成功;匹配到的内容是 "<td><p>aa</p></td> <td><p>bb</p></td>" 整个字符串, 表达式中的 "</td>" 将与字符串中最后一个 "</td>" 匹配。

举例2:相比之下,表达式 "<td>(.*?)</td>" 匹配举例1中同样的字符串时,将只得到 "<td><p>aa</p></td>", 再次匹配下一个时,可以得到第二个 "<td><p>bb</p></td>"。

Javascript 相关文章推荐
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
js闭包实例汇总
Nov 09 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 #Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 #Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 #Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 #Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 #Javascript
Bootstrap的modal拖动效果
Dec 25 #Javascript
原生ajax处理json格式数据的实例代码
Dec 25 #Javascript
You might like
PHP实现链式操作的原理详解
2016/09/16 PHP
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
Python 中Pickle库的使用详解
2018/02/24 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
Python常用数据分析模块原理解析
2020/07/20 Python
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
团队激励口号
2014/06/06 职场文书
工人先进事迹材料
2014/12/26 职场文书
英文慰问信范文
2015/03/24 职场文书
春节随笔
2015/08/15 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
python tqdm用法及实例详解
2021/06/16 Python