JavaScript正则表达式进阶指南

xietao3 发布于2019-08-22 17:14 / 1409人阅读

摘要：非贪婪匹配默认情况下，正则表达式的量词，都是进行贪婪匹配，即匹配尽可能多的字符。参考正则表达式关于专注于微信小程序微信小游戏支付宝小程序和线上应用实时监控。自从年双十一正式上线，累计处理了亿错误事件，付费客户有金山软件百姓网等众多品牌企业。

摘要：正则表达式是程序员的必备技能，想不想多学几招呢？

本文用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,
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.")
// null

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

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

/^forever.+/m.exec("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.")[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号元素。

参考

MDN：正则表达式

关于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/

超融合服务器服务器托管正则正则表达式正则匹配正则表达式 -正则表达式正则表达式?

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94978.html

前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

zxhaaa 2019-08-22 16:11 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

JouyPub 2019-08-02 10:10 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

vslam 2019-08-30 15:53 评论0 收藏0