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 相关文章推荐
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
js实现简单的验证码
Dec 25 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
Openlayers实现测量功能
Sep 25 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
jQuery EasyUI 中文API Layout(Tabs)
2010/04/27 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
angular十大常见问题
2017/03/07 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
python删除不需要的python文件方法
2018/04/24 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
python实现可变变量名方法详解
2019/07/01 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
德国机车企业:FC-Moto
2017/10/27 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
法务专员岗位职责
2014/01/02 职场文书
小学生暑假感言
2014/02/06 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
2014年工程工作总结
2014/11/25 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis