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 相关文章推荐
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
浅析javascript中的DOM
Mar 01 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
Javascript缓存API
Jun 14 Javascript
js选项卡的制作方法
Jan 23 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
javascript变量提升和闭包理解
Mar 12 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 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
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
用Python写一段用户登录的程序代码
2018/04/22 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
医药专业应届毕业生求职信范文
2014/01/01 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
2015年工程师工作总结
2015/04/30 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏