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下过滤数组重复值的代码
Sep 10 Javascript
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
jquery获取radio值实例
Oct 16 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
详解ES6中的let命令
Apr 05 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
vue2 前端搜索实现示例
Feb 26 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
文件上传类
2006/10/09 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
js中unicode转码方法详解
2015/10/09 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python 多维List创建的问题小结
2019/01/18 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
django实现支付宝支付实例讲解
2019/10/17 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
新郎接新娘保证书
2015/05/08 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
Linux安装Docker详细教程
2022/07/07 Servers