本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、课程设计和辅导 4、单片机开发 5、串口通讯调试
 当前位置:文章中心 >> Jquery_Ajax_Javascript
立即购买视频教程 正则表达式学习笔记
夜鹰教程网 来源:www.yyjcw.com 日期:2017-11-6 23:44:43
正则表达式学习笔记

这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



学习了半年的正则表达式,也不能说一直学习吧,就是和它一直在打交道,如何用正则表达式解决自己的问题,并且还要考虑如何在匹配大量的文本时去优化它。慢慢的觉得正则已经成为自己的一项技能,逐渐的从一个正则表达式小白变成一个伪精通者。


正则的教程很多,不限于此,如果你对正则已经了解了,那么可以开始下面的内容了, 文章中可能还会涉及一些效率的问题 。


new RegExp 和 // 正则对象创建区别


如果写过 Python 的同学,都一定会知道 Python 中可以在字符串前面加个小写的 r ,来表示防止转义。防止转义的意思就是说: str = r'\t' 等价于 str = '\\t' ,加了 r 会防止 \ 被转义。


为什么要介绍这个,因为这就是 new RegExp 和 // 的区别,因为我们知道在正则表达式中会频繁的使用转义字符 \w\s\d 等,但是它们在内存中的是以 \\w\\s\\d 存储的,看个例子:


//推荐写法

var regex1 = /\w+/g;

regex1 // /\w+/g

//RegExp 写法

var regex2 = new RegExp('\\w+','g');

regex2 // /\w+/g

//错误写法

var regex3 = new RegExp('\w+','g');

regex3 // /w+/g

你也看出来了,错误写法只能匹配 wwwww 这样的字符串,曾经我就见过有人把他们弄混了,还说第一个第三个没有区别。第二种方法的输出,还是 /\w+/g ,中间还是要转换,所以推荐第一种写法。


当然,还有比较奇葩的:


1


2


var regex4 = new RegExp(/\w+/g);

regex4 // /\w+/g

MSDN 上关于 RegExp 的介绍。


i、g、m 修饰符


这几个修饰符只是针对 JS 来说的,像 Python 中还有 re.S 表示 . 可以匹配换行符。


对于 i 表示忽略字母大小写,不是很常用,因为它有很多替代品,比如: /[a-zA-Z]/ 可以用来替代 /[a-z]/i ,至于两者处理长文本的时间效率,我自己没有研究过,不下定论。


使用 i 需要注意的地方,就是 i 会对正则表达式的每一个字母都忽略大小写,当我们需要部分单词的时候,可以考虑一下 /(?:t|T)he boy/ 。


g 表示全局匹配,在印象中,可能很多人会觉得全局匹配就是当使用 match 的时候,把所有符合正则表达式的文本全部匹配出来,这个用途确实很广泛,不过 g 还有其他更有意思的用途,那就是 lastIndex 参数。


var str = '1a2b3c4d5e6f',

    reg = /\d\w\d/g;

str.match(reg); //["1a2", "3c4", "5e6"]

为什么不包括 2b3,4d5 ,因为正则表达式匹配的时候,会用 lastIndex 来标记上次匹配的位置,正常情况下,已经匹配过的内容是不会参与到下次匹配中的。带有 g 修饰符时,可以通过正则对象的 lastIndex 属性指定开始搜索的位置,当然这仅仅局限于函数 exec 和 test(replace 没研究过,没听说过可以控制 lastIndex,match 返回的是数组,无法控制 lastIndex),针对这个题目修改如下:


var str = '1a2b3c4d5e6f',

  reg = /\d\w\d/g;

var a;

var arr = [];

while(a = reg.exec(str)){

  arr.push(a[0]);

  reg.lastIndex -= 1;

}

arr //["1a2", "2b3", "3c4", "4d5", "5e6"]

m 表示多行匹配,我发现很多人介绍 m 都只是一行略过,其实关于 m 还是很有意思的。首先,来了解一下单行模式,我们知道 JavaScript 正则表达式中的 . 是无法匹配 \r\n (换行,各个系统使用不一样) 的,像 Python 提供 re.S 表示 . 可以匹配任意字符,包括 \r\n ,在 JS 中如果想要表示匹配任意字符,只能用 [\s\S] 这种蹩脚的方式了(还有更蹩脚的 [\d\D],[.\s] )。这种模式叫做开启或关闭单行模式,可惜 JS 中无法来控制。


多行模式跟 ^ $ 两兄弟有关,如果你的正则表达式没有 ^$,即时你开启多行模式也是没用的。正常的理解 /^123$/ 只能匹配字符串 123 ,而开启多行模式 /^123$/g 能匹配 ['123','\n123','123\n','\n123\n'] ,相对于 ^$ 可以匹配 \r\n 了。


var str = '\na';

/^a/.test(str); //false

/^a/m.test(str); //true

有人说,m 没用。其实在某些特殊的格式下,你知道你要匹配的内容会紧接着 \r\n 或以 \r\n 结尾,这个时候 m 就非常有用,比如 HTTP 协议中的请求和响应,都是以 \r\n 划分每一行的,响应头和响应体之间以 \r\n\r\n 来划分,我们需要匹配的内容就在开头,通过多行匹配,可以很明显的提高匹配效率。


原理性的东西,我们还是要知道的,万一以后会用到。


(?:) 和 (?=) 区别


在正则表达式中,括号不能乱用,因为括号就代表分组,在最终的匹配结果中,会被算入字匹配中,而 (?:) 就是来解决这个问题的,它的别名叫做非捕获分组。


var str = 'Hello world!';

var regex = /Hello (\w+)/;

regex.exec(str); //["Hello world", "world"]

var regex2 = /Hello (?:\w+)/;

regex2.exec(str); //["Hello world"]

可以看到 (?:) 并不会把括号里的内容计入到子分组中。


关于 (?=),新手理解起来可能比较困难,尤其是一些很牛逼的预查正则表达式。其实还有个 (?!),不过它和 (?=) 是属于一类的,叫做 正向肯定(否定)预查 ,它还有很多别名比如零宽度正预测先行断言。但我觉得最重要的只要记住这两点,预查和非捕获。


预查的意思就是在之前匹配成功的基础上,在向后预查,看看是否符合预查的内容。正因为是预查,lastIndex 不会改变,且不会被捕获到总分组,更不会被捕获到子分组。


var str = 'Hello world!';

var regex = /Hello (?=\w+)/;

regex.exec(str); //["Hello "]

//replace 也一样

var regex2 = /(?:ab)(cd)/

'abcd'.replace(regex2,'$1') //"cd"

和 (?:) 区别是: 我习惯的会把匹配的总结果叫做总分组 ,match 函数返回数组每一项都是总分组,exec 函数的返回数组的第一项是总分组。(?:) 会把括号里的内容计入总分组,(?=) 不会把括号里的内容计入总分组。


说白了,还是强大的 lastIndex 在起作用。(?:) 和 (?=) 差别是有的,使用的时候要合适的取舍。


说了这么多关于 (?=) 的内容,下面来点进阶吧!现在的需求是一串数字表示钱 “10000000”,但是在国际化的表示方法中,应该是隔三位有个逗号 “10,000,000”,给你一串没有逗号的,替换成有逗号的。


var str = "10000000";

var regex = /\d(?=(\d{3})+$)/g;

str.replace(regex, '$&,'); //"10,000,000"

我们分析一下 regex, /\d(?=(\d{3})+$)/g 它是全局 g,实际上它匹配的内容只有一个 \d, (?=(\d{3})+$) 是预判的内容,之前说过,预判的内容不计入匹配结果,lastIndex 还是停留在 \d 的位置。 (?=(\d{3})+$) 到结尾有至少一组 3 个在一起的数字,才算预判成功。


\d = 1 的时候,不满足预判,向后移一位, \d = 0 ,满足预判,replace。


(?!) 前瞻判断


(?=) 和 (?!) 叫做正向预查,但往往是正向这个词把我们的思维给束缚住了。正向给人的感觉是只能在正则表达式后面来预判,那么 预判为什么不能放在前面呢 。下面这个例子也非常有意思。


一个简单密码的验证,要保证至少包含大写字母、小写字母、数字中的两种,且长度 8~20。


如果可以写多个正则,这个题目很简单,思路就是: /^[a-zA-Z\d]{8,20}$/ && !(/[a-z]+/) && !(/[A-Z]+/) && !(/\d+/) ,看着眼都花了,好长一串。


下面用 (?!) 前瞻判断来实现:


var regex = /^(?![a-z]+$)(?![A-Z]+$)(?!\d+$)[a-zA-Z\d]{8,12}$/;

regex.test('12345678'); //false

regex.test('1234567a'); //true

分析一下,因为像 (?!) 预判不消耗 lastIndex,完全可以放到前面进行前瞻。 (?![a-z]+$) 的意思就是从当前 lastIndex (就是^)开始一直到 $,不能全是小写字母, (?![A-Z]+$) 不能全是大写字母, (?!\d+$) 不能全是数字, [a-zA-Z\d]{8,12}$ 这个是主体,判断到这里的时候, lastIndex 的位置仍然是 0,这就是 (?!) 前瞻带来的效率。


非贪婪与贪婪的问题


贪婪出现在 + * {1,} 这种不确定数量的匹配中,所谓的贪婪,表示正则表达式在匹配的时候,尽可能多的匹配符合条件的内容。比如 /hello.*world/ 匹配 'hello world,nice world' 会匹配到第二个 world 结束。


鉴于上面的情况,可以使用 ? 来实现非贪婪匹配。? 在正则表达式中用途很多,正常情况下,它表示前面那个字符匹配 0 或 1 次,就是简化版的 {0,1} ,如果在一些不确定次数的限制符后面出现,表示非贪婪匹配。 /hello.*?world/ 匹配 'hello world,nice world' 的结果是 hello world 。


我刚开始写正则的时候,写出来的正则都是贪婪模式的,往往得到的结果和预想的有些偏差,就是因为少了 ? 的原因。


我初入正则的时候,非贪婪模式还给我一种错觉。还是前面的那个例子,被匹配的内容换一下,用 /hello.*?world/ 匹配 'hello word,nice world' ,因为 word 不等于 world,在第一次尝试匹配失败之后,应该返回失败,但结果却是成功的,返回的是 'hello word,nice world' 。


一开始我对于这种情况是不理解的,但仔细想想也对,这本来就应该返回成功。至于如何在第一次尝试匹配失败之后,后面就不再继续匹配,只能通过优化 .* 。如果我们把 .*?end 这样子来看, .* 会把所有字符都吞进去,慢慢吐出最后几个字符,和 end 比较,如果是贪婪,吐到第一个满足条件的就停止,如果是非贪婪,一直吐到不能吐为止,把离自己最近的结果返回。


所以,贪婪是返回最近的一次成功匹配,而不是第一次尝试。


避免回溯失控


回溯可以杀死一个正则表达式,这一点都不假。关于正则表达式回溯也很好理解,就是正则引擎发现由两条路可以走时,它会选择其中的一条,把另一条路保存以便回溯时候用。


比如正则 /ab?c/ 在成功匹配到 a 之后,后面可以有 b,也可以没有 b,这时候要提供两种选择。还有其他类型的回溯,比如 /to(night|do)/ 。当然影响性能的回溯就要和 .* .+ .{m} 有关。


所谓的回溯失控,就是可供选择的路径太多,看一个常见回溯失控的例子,正则 /(A+A+)+B/ ,如果匹配成功,会很快返回,那么匹配失败,非常可怕。比如来匹配 10 个 A AAAAAAAAAA ,假设第一个 A+ 吞了 9 个 A,整个正则吐出最后一个字符发现不是 B,知道吐完,还不能返回 false,第一个 A+ 吞 8 个 A,….回溯次数的复杂度是 n 的平方。


当然你可能会说,自己不会写这样傻的正则表达式。真的吗?我们来看一个匹配 html 标签的正则表达式, /<html>[\s\S]*?<head>[\s\S]*?</head>[\s\S]*?<body>[\s\S]*?</body>[\s\S]*?</html> (感觉这样写也很傻)。如果一切都 OK,匹配一个正常的 HTML 页面,工作良好。但是如果不是以 </html> 结尾,每一个 [\s\S]*? 就会扩大其范围,一次一次回溯查找满足的一个字符串。


在说到回溯的同时,有时候还是要考虑一下 . * {} 查询集合的问题,反正我的建议是尽量避免使用匹配任何字符的 [\s\S] ,这真的是有点太暴力了。因为我们写正则的时候,都是以正确匹配的思路去写的,同时还需要考虑如果匹配不成功,该如何尽快的让 [a-zA-Z]* 集合尽快停止,比如 [^\r\n]* 在匹配单行时效果不错,即时匹配失败也可以快速停止。


总结


感觉这篇文章写的很乱,东扯西扯的,大概我把我这几个月以来所学到的正则表达式知识都写在了这里,当然这并不包括一些基础的知识。我觉得学习正则最主要的还是去练习,只有在实际项目中总结出来的正则经验,才算自己正在掌握的,如果只是简单的少一眼,时间久了,终究会忘记。共勉!



MSDN RegExp


进阶正则表达式

如何找出文件名为 “.js” 的文件,但要过滤掉 “.min.js” 的文件。


代码如下:


var regex = /^(?!.*\.min\.js$).+\.js$/;

regex.test('a.js'); //true

regex.test('b.min.js'); //false

regex.test('c.css'); //false


复制链接 网友评论 收藏本文 关闭此页
上一条: ES6中使用箭头定义函数  下一条: javascript数组详解
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  
  热点推荐
ajax 清除缓存的两种方法
js日历控件点击日期显示在文本框中…
HTML、JS与FLASH 之间的静态传值方…
主题:ajax请求JSP,为什么GET就是…
javascript 改变iframe(框架)的方…
javascript取鼠标当前坐标
推荐一款网页软键盘 很漂亮的哦
ajax session过期问题的几个解决方…
js文字间隔停顿向上滚动效果
ajax 服务器文本框自动填值
js技术技巧收藏(200例)---1
ajax 数据库中随机读取5条数据动态…
主题:这是否是个捷径?Ajax利用S…
揭开AJAX神秘的面纱(AJAX个人学习…
常用的JS后台导航菜单
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
js处理键盘事件(keydown event)…
Web前端技术疑点难点汇总
Asp.Net Core2.0允许跨域请求设置…
XMLHttpRequest请求中的跨域问题
原生js节点的操作 创建、添加、移…
VUE2.0组件:父组件子组件之间值的…
JavaScript是世界上最流行的脚本语…
js正则表达式表单验证详解
js正则表达式大全
详细且实用的JS正则表达式大全
EcmaScript5中扩展了叫bind的方法…
attachEvent和addEventListener的…
addEventListener的使用方式
通过构造器的方式来创建函数
为什么需要addEventListener
  工具下载  需要远程协助? 

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
微信小程序 vue.js高级实例视频教程

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



关于我们 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3