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:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
js实现自定义滚动条的示例
Oct 27 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
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
jquery select操作的日期联动实现代码
2009/12/06 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
纯js三维数组实现三级联动效果
2017/02/07 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python多进程同步简单实现代码
2016/04/27 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
如何通过命令行进入python
2020/07/06 Python
容易被忽略的Python内置类型
2020/09/03 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
酒后驾驶检讨书
2014/01/27 职场文书
《理想》教学反思
2014/02/17 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
教师考核表个人总结
2015/02/12 职场文书
个人政治思想总结
2015/03/05 职场文书
详解Laravel制作API接口
2021/05/31 PHP