JS正则表达式学习之贪婪和非贪婪模式实例总结

 更新时间:2016年12月26日 09:43:30   作者:EthanQ  
这篇文章主要介绍了JS正则表达式学习之贪婪和非贪婪模式用法,结合实例形式总结分析了JS正则表达式中贪婪模式与非贪婪模式的具体功能、使用方法与相关注意事项,需要的朋友可以参考下

本文实例总结了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>"。

PS:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用:

JavaScript正则表达式在线测试工具:
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具:
http://tools.jb51.net/regex/create_reg

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • JavaScript事件机制的剖析与优化详解

    JavaScript事件机制的剖析与优化详解

    在现代前端开发中,JavaScript事件处理是一个至关重要的部分,它能够使网页与用户交互,实现丰富的交互体验,然而,对JavaScript事件机制的深入理解是开发者成为优秀前端工程师的关键所在,本文将全面剖析JavaScript事件机制,需要的朋友可以参考下
    2023-12-12
  • 检查JavaScript对象属性是否存在的方法小结

    检查JavaScript对象属性是否存在的方法小结

    在前端开发面试,面试官提出了一个经典的JavaScript问题:“在JavaScript中,如何检查对象是否包含某个属性?请你详细介绍几种不同的方法,并解释它们的区别,”这个问题考验你对JavaScript的基础掌握情况,让我们进入这个面试场景,需要的朋友可以参考下
    2024-09-09
  • 解决Layui 表单提交数据为空的问题

    解决Layui 表单提交数据为空的问题

    今天小编就为大家分享一篇解决Layui 表单提交数据为空的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • JS在if中的强制类型转换方式

    JS在if中的强制类型转换方式

    大家都知道JS在很多情况下会进行强制类型转换,最常见的方式有两种,在文章均给大家提到,下面小编给大家带来了JS在if中的强制类型转换,感兴趣的朋友一起看看吧
    2018-07-07
  • js 可选链操作符的使用

    js 可选链操作符的使用

    可选链操作符(?.)允许读取位于链接对象链身处的属性的值,本文就详细的介绍一下,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • JS判断字符串变量是否含有某个字串的实现方法

    JS判断字符串变量是否含有某个字串的实现方法

    下面小编就为大家带来一篇JS判断字符串变量是否含有某个字串的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 使用cropper.js裁剪头像的实例代码

    使用cropper.js裁剪头像的实例代码

    最近小编在做一个裁剪头像的功能,下面小编把使用cropper.js裁剪头像的实例代码分享到脚本之家平台,需要朋友参考下吧
    2017-09-09
  • webpack教程之webpack.config.js配置文件

    webpack教程之webpack.config.js配置文件

    本篇文章主要介绍了webpack教程之webpack.config.js配置文件 ,具有一定的参考价值,有兴趣的可以了解一席
    2017-07-07
  • 终于解决了IE8不支持数组的indexOf方法

    终于解决了IE8不支持数组的indexOf方法

    今天,测试报过来一个js bug, 在IE8下有个js错误,但是在其它浏览器下(Firefox, Chrome, IE9)下面都很正常。后来调试发现原因是在IE8下,js数组没有indexOf方法。
    2013-04-04
  • 性能优化篇之Webpack构建代码质量压缩的建议

    性能优化篇之Webpack构建代码质量压缩的建议

    这篇文章主要介绍了性能优化篇之Webpack构建代码质量压缩的建议,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04

最新评论