JavaScript正则表达式进阶指南

作者: Fundebug | 来源:发表于2019-06-06 11:13 被阅读1146次

摘要:正则表达式是程序员的必备技能,想不想多学几招呢?

本文用JavaScript的exec方法来测试正则表达式。

例如,正则表达式/F.g/会匹配“以F开头,以g结尾的字符串”,因此可以匹配"Hello, Fundebug!"中的Fundebug*,exec方法会返回一个数组,其第一个元素为所匹配的子字符串。

/F.*g/.exec("Hello, Fundebug!")[0]
// 'Fundebug'

非贪婪匹配

默认情况下,正则表达式的量词、+、?、{},都是进行贪婪匹配,即匹配尽可能多的字符*。

例如,正则表达式/.+\s/匹配的是“以空格符结尾的字符串”,我们用它来匹配苹果公司创始人乔布斯在斯坦福大学演讲的名言“You time is limited, so don’t waste it living someone else’s life.”:

/.+\s/.exec("You time is limited, so don’t waste it living someone else’s life.")[0]
// 'You time is limited, so don’t waste it living someone else’s '

.可以匹配任意字符,而+表示匹配1次或者多次,且是贪婪的,因此/.+\s/匹配到了最后一个空格符才结束。

当我们在量词、+、?、{}后面紧跟着一个?,就可以实现非贪婪匹配,即匹配尽量少的字符*。

例如,正则表达式/.+?\s/匹配到第一个空格符就会结束:

/.+?\s/.exec("You time is limited, so don’t waste it living someone else’s life.")[0]
// 'You '

正向肯定查找

使用正则表达式x(?=y),可以匹配'x'仅仅当'x'后面跟着'y'。这话有点绕,简单地说,就是匹配后面是y的x,这里的x和y都代表正则表达式。

例如,对于博客RabbitMQ入门教程的地址"https://blog.fundebug.com/2018/04/20/rabbitmq_tutorial/",如果需要匹配出域名fundebug的话,可以使用/[a-z]+(?=.com)/,匹配“在.com前面的英文单词”

/[a-z]+(?=\.com)/.exec("https://blog.fundebug.com/2018/04/20/rabbitmq_tutorial/")[0]
// 'fundebug'

广告:欢迎免费试用Fundebug,为您监控线上代码的BUG,提高用户体验~

正向否定查找

与正向肯定查找所对应的是正向否定查找,使用正则表达式x(?!y),可以"匹配'x'仅仅当'x'后面不跟着'y'"。

例如,小学生都知道的圆周率是3.1415926,不会的同学可以这样记“山顶上有一座寺庙,寺庙里面有一壶酒,还有一块肉”。如何匹配小数点后面的数字呢?可以使用/\d+(?!\.)/,匹配"后面没有小数点的数字":

/\d+(?!\.)/.exec("3.1415926")[0]
// '1415926'

而使用之前提到的正向肯定查找,就可以匹配小数点前面的数字:

/\d+(?=\.)/.exec("3.1415926")[0]
// '3'

多行匹配

下面是鲍勃·迪伦的《Forever Young》歌词:

May God bless and keep you always,
may your wishes all come true,
may you always do for others
and let others do for you.
may you build a ladder to the stars
and climb on every rung,
may you stay forever young,
forever young, forever young,
May you stay forever young.

如何匹配以forever开头的那句歌词forever young, forever young呢?

这样写/^forever.+/是错误的:

/^forever.+/.exec("May God bless and keep you always,\nmay your wishes all come true,\nmay you always do for others\nand let others do for you.\nmay you build a ladder to the stars\nand climb on every rung,\nmay you stay forever young,\nforever young, forever young,\nMay you stay forever young.")
// null

为什么错了?因为^匹配的整个字符串的开始,而是不是每一行的开始。

正则表达式指定m选项,即可支持多行匹配,这时^$匹配的是每一行的开始和结束,因此正确的正则表达式是/^forever.+/m

/^forever.+/m.exec("May God bless and keep you always,\nmay your wishes all come true,\nmay you always do for others\nand let others do for you.\nmay you build a ladder to the stars\nand climb on every rung,\nmay you stay forever young,\nforever young, forever young,\nMay you stay forever young.")[0]
// 'forever young, forever young,'

捕获括号

在正则表达式中使用小括号(),可以提取出字符串中的特定子串。

例如,Fundebug是在2016年双11正式上线的,时间是"2016-11-11",如何提取其中的年、月、日呢?如下:

/(\d{4})-(\d{2})-(\d{2})/.exec("2016-11-11")
// [ '2016-11-11', '2016', '11', '11', index: 0, input: '2016-11-11' ]

可知,3个小括号中的正则表达式分别匹配的是年月日,其结果依次为exec返回数组中的1到3号元素。

参考

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用

版权声明

转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2018/05/02/advanced_regular_expression/

相关文章

  • 技术书刊

    Javascript# ########《JavaScript设计模式》《高性能网站建设指南》《高性能网站建设进阶...

  • JavaScript正则表达式进阶指南

    摘要:正则表达式是程序员的必备技能,想不想多学几招呢? 本文用JavaScript的exec方法来测试正则表达式。...

  • JavaScript 正则表达式(3)

    在JavaScript正则表达式(2)中,我们一起学习了正则表达式的入门进阶功能,比如反向引用,分组匹配,环视,一...

  • 深入JS闭包和应用场景

    看过很多的关于闭包的讲解,写个进阶总结吧。 闭包在《JavaScript权威指南》定义是:函数对象本身和这个函数关...

  • JavaScrip-StepPitGuide《JavaScrip

    《JavaScript踩坑指南》JavaScrip-StepPitGuide? 《JavaScript踩坑指南》 ...

  • 自己收集一些前端电子书

    nodejs开发指南中文 精通CSS CSS揭秘 JavaScript权威指南 JavaScript面向对象指南 ...

  • JavaScript原型-进阶者指南

    如果不好好的学习对象,你就无法在JavaScript中获得很大的成就。 它们几乎是JavaScript编程语言的每...

  • JavaScript学习笔记(五)

    慕课网JavaScript进阶篇第9章学习笔记 JavaScript进阶篇—第9章 JavaScript学习笔记(...

  • 一位PPT设计师的思维进阶指南

    说到“进阶指南”那到底什么是进阶指南呢? 我想用中国道家的一种思想模型来构建一下今天说的PPT思维进阶指南。 首先...

  • 原生js的基础方法等二

    JavaScript 正则表达式 正则表达式模式 调试 this JSON 字符串转换为 JavaScript 对...

网友评论

    本文标题:JavaScript正则表达式进阶指南

    本文链接:https://www.haomeiwen.com/subject/pepyxctx.html