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判断元素的子元素是否存在的示例代码
Feb 04 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
史上最为详细的javascript继承(推荐)
May 18 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
php array_slice函数的使用以及参数详解
2008/08/30 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
php自动加载方式集合
2016/04/04 PHP
javascript object array方法使用详解
2012/12/03 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
js实现拖拽功能
2017/03/01 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python实现读取json文件到excel表
2017/11/18 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
python对于requests的封装方法详解
2019/01/03 Python
详解python中的index函数用法
2019/08/06 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
医学院学生的自我评价分享
2013/11/19 职场文书
日语专业毕业生求职信
2013/12/04 职场文书
银行实习鉴定
2013/12/13 职场文书
电工实训报告总结
2014/11/05 职场文书
入党介绍人意见2015
2015/06/01 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js