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 一个图片切换的插件
Oct 09 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
js中开关变量使用实例
Feb 24 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
原生小程序封装跑马灯效果
Oct 21 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
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/05/24 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
Python map和reduce函数用法示例
2015/02/26 Python
python从入门到精通(DAY 2)
2015/12/20 Python
Python 专题四 文件基础知识
2017/03/20 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
研究生求职推荐信范文
2013/11/30 职场文书
教师的实习鉴定
2013/12/15 职场文书
工作中个人的自我评价
2013/12/31 职场文书
学习作风建设心得体会
2014/10/22 职场文书
2014年村委会工作总结
2014/11/24 职场文书
美术教师个人总结
2015/02/06 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server
Springboot中如何自动转JSON输出
2022/06/16 Java/Android