前端正则表达式

正则是匹配字符串特定模式的一种表达式,官方是这样说的,但我的理解不外乎就是匹配字符窜嘛,举个例子大家就明白了。比如我们要验证邮箱,试想一下如果我们不用正则来匹配,直接用代码,循环,判断各种捣鼓来验证还真是一件非常麻烦的事情。如果用正则怎么来做了,这里为了照顾小白(当然我也是重小白走来的,所以小白很单纯,小白很善良,小白很伟大)我就写伪正则来描述:   所有0-9或者a-z或者A-Z的字符出现一次到多次 加上(就是前面出现了的所有0-9...的字符跟上) "."或者"_"出现0次或者1次,然后在跟上 "@"符号 跟上 xxx.xx这种格式。 不知道我这样来描述各位亲有没有明白一点,不明白也不要紧,这里我只是随便举个列子,提一下,在下文的某个位置我会专门一步一步分析几个非常复杂的正则表达让大家能够很快的明白正则的语义。

  上面举了一个邮箱地址的正则表达式,比如这一窜 /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9][email protected]([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/ ;要看懂坑爹的这一窜,还得从基础一步一步的来。首先给大家介绍javascript经常使用正则的对象和方法:

  RegExp  这个是正则对象, 比如匹配字符串"1234"中的"23"可以这样玩: (new RegExp("23")).test("1234"); //out true;

  当然正则对象还有一种写法: var reg = /23/; reg.test("1234")  //out true;

  RegExp.test(String) ;      //这个方法上面的用上了,匹配字符串是否为指定格式

  RegExp.exec(String);      //返回查询的值

    var str = "123 aa cat Cat caT";

    var reg = /cat/i;

    reg.exec(str); // out "cat" 如果有则返回,没有的话就返回null

  String.search(RegExp) ; // 返回索引位置,类似indexOf()

    var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";            var reCat = /cat/gi;         alert(data.search(reCat));   //out "23"

  String.replace(RegExp, String); //  将字符串替换成另外一个字符窜,RegExp指定的格式,String要替换的字符串

    var str = "1234aa67aa89";            var reg = /aa/gi;         str.replace(reg, "") ; //out "12346789"

  String.split(RegExp) ;              // 将字符串拆分成数组

    var str = "1234aa67aa89";            var reg = /aa/gi;         str.split(reg) ; //out [1234, 67, 89]

  String.match(RegExp);          //将指定格式的字符串以数组的方式返回

    var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";            var reCat = /cat/gi;              var arrMactches = data.match(reCat); // out ["Cat", "cat"]

  上面的的方法是在字符串过滤操作中经常用到的方法, 当然还有一些我没有全部列举出来,用到了在去差API也不迟,好了我们熟悉了操作正则的这些方法之后我们紧接着正则表达式了,所谓表达式意思就是用一些字符按照先后顺序组合在一起表示的一层含义,所以我们先要重正则表达式的元字符说起,其实元字符就相当于javascript语言的关键字,比如你定义变量不能这样干 var if = "xxxx"; 正则有一下一些元字符:{ [ ^ | $ ] } ? * + . 这些都是正则的元字符,这里我就不解释意思了,用到了时候再来分析。如果大家想知道可以找度娘

  字符类

  字符类是用于测试字符串的组合, 将一些字符放入方括号中,就可以有效的告诉正则表达式去匹配第一个,第二个,第三个...比如/[abc]/,这个又称之为简单类

    简单类

1   var str = "cat 123 caT 234 cAt 345 CaT";
2   var reg = /cat/gi;
3   str.match(reg) ; //out ["cat", "caT", "cAt", "CaT"]

    负向类和范围类: 这里要解释下"^" "-"这两个符号, "^"这个符号的意思就是取反,而"-"是范围, g表示全局,i表示忽略大小写,/[^2-3a-z]+/gi 所以这句话的意思就是: 除了2到3和a到z的所有字符出现1次到多次,并且在全局中忽略大小写。其实细心的看官这里还会发现一个知识点, 2-3a-z这一句其实是一个组合,又称之为组合类,下面的这个实例就用到了正则的几个知识点: 1.负向类,意思就是取反; 2. 范围类; 3.组合类,相当于逻辑运算符的并且&&

1   var str = "cat123caT234cAt345CaT";
2   var reg = /[^2-3a-z]+/gi;
3   str.match(reg);  //out ["1", "4", "45"]

    预定义类

代码               等同于                    匹配
.                 [^\n\r]                  除了换行和回车符之外的任意字符 \d                [0-9]                    数字 \D                [^0-9]                   非数字字符 \s                [\t\n\x0b\f\r]           空白字符 \S                [^\t\n\x0b\f\r]          非空白字符 \w                [a-zA-Z_0-9]             单词字符,所有的字符数字下划线 \W                [^a-zA-Z_0-9]            非单词字符

  量词:量词是可以指某个特定模式出现的次数,可以是硬性量词,比如某个字符出现三次,也可以是软性量词,比如某个字符至少出现一次。正则中的量词有以下这些

  贪婪量词

  ?      出现零次到一次

  +       至少出现一次或者多次

  *        出现0次到多次

  {n}    出现n次

  {n,m}出现n次到m次

  {n,}   至少出现n次或者n+次

  说道量词的话有贪婪, 惰性和支配量词,以上的这些量词都是贪婪量词,由于javascript正则引擎对支配量词支持不是很好,所以我们这里重点来说贪婪和惰性量词,先把惰性量词列出来之后在来说说他们的关系和区别

  惰性量词

  ??          出现零次到一次

  +?           至少出现一次或者多次

  *?            出现零次到多次

  {n}?          出现n次

  {n,m}?      出现n次到m次

  {n,}?         至少出现n次或者n+次

  贪婪量词在匹配字符串的时候首先看是否匹配字符串,如果没有找到匹配的则去掉字符串中最后一个字符再次尝试,整个过程一直重复,直到字符串为空时停止。而惰性量词正好相反,首先查看字符串中第一个字符是否匹配,否则在读入下一个字符在进行匹配,直至重复这个过程到读入整个字符窜都不匹配时停止。可能说了这些多还是不太明白,下面我会举个例子帮助大家理解

1         var str = "abbbaabbbaaabbb1234";
2         var re1 = /.*bbb/g;   //贪婪匹配
3         var re2 = /.*?bbb/g;  //惰性匹配
4         alert(str.match(re1));
5         alert(str.match(re2));

  亲,你觉得第一个alert会输出什么呢,如果是[abb, aabbb, aaabbb]的话的, 那么恭喜你答错了,前面说过*是贪婪量词,它在匹配的时候会首先匹配整个字符串,是从字符串的尾部操作的,当去掉字符1的时候就发现剩下的字符串"abbbaabbbaaabbb"已经达到它匹配的要求了,所以它返回的结果就是字符串"abbbaabbbaaabbb", 而第二个alert为啥子会打印[abbb,aabbb,aaabbb]呢,我们再来一步一步的看,这个是惰性匹配,所以它在匹配字符串的时候是从字符串开始的部分取出第一个字符进行匹配,发现不行,在取下一个,还是不行,直至取到了"abbb".好,现在发现匹配了,然后将这个装进数组, 在从剩下的字符串里面取,直至最后将符合指定模式的子字符串装进数组,所以最后就返回[abbb,aabbb,aaabbb]。只要稍微花点心思动动手还是很容易就理解了。好了,关于正则的量词的一些知识点就讲到这里,万里长征才走一半,下面接到说正则的复杂模式,上面说到的字符类那一块都是正则的简单模式,只能做一些简单的字母,数字,汉字,长度等效验,如果在掌握了下面的复杂模式就可以非常牛逼的匹配各种复杂,蛋痛的字符串模式了,比如邮箱,身份证验证,标签过滤,包括jquery类选择器,sizzle引擎过滤器。好了,直接切入主题吧:

复杂分组

  分组模式:分组模式就那么回事我用一个例子或许你一下子就豁然开朗了

            //如果要匹配"andand"的怎么做呢,你也许会说可以这样干
            var str = "asdfandandcxhksdf";
            var reg = /andand/gi;
            alert(reg.test(str)); //output true
            //好的,亲,这样匹配也是可以的,但是有不知道多少and怎么办呢,
            //不可能全部加在正则表达式里面吧,此时分组的便捷性就体现出了
            //出了它的优势,我们可以这样干:
            var reg = /(and){2}/g; //注意这里()是元字符分组的意思,{2} 是量词,贪婪量词        

  捕获分组模式:指的是RegExp.$1这个属性的值,这个值就是正则中一个分组的值,在这个对象RegExp中,定义了最多支持RegExp.$1-RegExp.$100个分组值,还是来个例子吧

  

1             var str = "asdffirstfirstsecondsecond1234";
2             var reg = /(first){2}(second){2}/gi;
3             reg.test(str); // 要必须匹配之后才有下面的值
4             alert(RegExp.$1); //output "first"
5             alert(RegExp.$2); //output "second"

  非捕获分组模式:上面说了捕获分组,那非捕获分组其实就是不让RegExp.$1引用了,这里要说一点的是在捕获分组中RegExp.$1会创建正则的反向引用的存储空间,所以在进行捕获分组时会有更多的空间开销,还会降低匹配速度。那现在晓得非捕获分组的好处了吧。简单的说就是在正则表达式()里面加上一个问号和冒号/(?:first)/,语法就是这样的,还是看代码吧

1             var str = "#123456789";
2             var reg = /#(?:\d+)/;
3             reg.test(str);
4             alert(RegExp.$1);      //output "" 注意这里取消了反向引用就为空了

  候选模式:候选我的理解就是或者,举个例子,比如你要对一个表达式同时匹配"red", "black"的话怎么做呢, 如果是在以前的话就要写两个正则来进行分别匹配,而加入了候选就可以非常方便的操作了,还是上代码吧

            var str1 = "111red222";
            var str2 = "111black111";

            var reg = /(red|black)/;
            alert(reg.test(str2)); //output true
            alert(reg.test(str1)); //output true

  前瞻模式:有时候我们希望某个字符分组出现在另外一个字符分组之前才去捕获,这相当于是在正则里面做判断了, 果然是高级功能,灰常强大,我在写正则的时候也没有用到过, 只是书上都说了, 我还是把它搬到这里来出哈风头。 上代码吧

 1         /*
 2              *前瞻又分为正向前瞻和反向前瞻
 3              *下面我会用代码加注释的方式加以描述
 4              */
 5              //正向前瞻
 6              var str1 = "bedroom";
 7              var str2 = "bedding";
 8              var reg = /(bed(?=room))/; //符号?=来表示正向前瞻,表示在字符串"bedroom"中如果bed后面有room的字符才捕获,顺序执行
 9              alert(reg.test(str1)); //output true
10              alert(RegExp.$1);      //output "bed" 捕获到反向引用bed字符串
11              alert(reg.test(str2)); //output true
12              //反向前瞻
13              var reg = /(bed(?!ing))/; //符号?!来表示反向前瞻,表示在字符串"bedding"中如果有"ing"子字符串才捕获,逆序执行
14              alert(reg.test(str2)); //output true
15              alert(RegExp.$1);      //output "bed" 捕获到反向引用bed字符串
16              alert(reg.test(str1)); //output true
17              alert(RegExp.$1);
18              /*以上代码如果各位亲测试不通过的话那就是正则引擎不支持前瞻*/

  边界模式:这个模式很重要也很常用,比如去掉字符串的首尾空格,那下面说说几种边界的可能:

  ^行的开始           $行的结尾             \b单词的边界               \B非单词的边界

            //用一个例子来说明边界
            var str = "  xiaoming     "
            var reg = /(^\s+)|\s+$/g; //(^\s+)去除字符串开始位置的空格,\s+$去除字符串尾部空格,|这个符号想必不用我说了吧,候选
            var str = str.replace(reg, "");
            alert(str); //output "xiaoming"

  多行模式:这个也是正则复杂模式里面最后一个模式了,也不经常用,不管你信不信,反正我是信了,还是直接来看代码吧

1             //请看下面这个实例,\n在前面的预定类,表示换行
2             var str = "first\nsecond\nthread";
3             var reg = /^(\w+)/g;
4             alert(str.match(reg)); //output 若不指定m行的话就输出"first"
5             var reg = /^(\w+)/gm;
6             alert(str.match(reg)); //output [first, second, thread]

  到目前为止正则表达式的语法,规则各种都已经说完了,如果各位小白认真的看到这里,我们在来分析文章开头说的邮箱验证表达式就非常容易了。好,现在我们就来一步一步的分析那个非常蛋痛的表达式,首先我们要来拆分这段表达式,我会用不同的颜色来表示这段表达式的每一段,这里就用到了一种思想,分而治之,太复杂的东西不利于直观的表达某些东西,所以拆分,打碎,各个击破:

  /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/

  1.([a-zA-Z0-9]+[_|\_|\.]?)* 这一段表示的是一个分组,分组()里面首先是[a-zA-Z0-9]意思是匹配字符串大小写字母数字,后面紧跟一个+,这个是贪婪量词,1次到多次,前面提到过的。[a-zA-Z0-9]+而这一段的意思就是说大小写字母数字匹配1次到多次,[_|\_|\.]?而这个呢是符号"_"或者"."出现0次到一次。整个这段表达式的意思就是所有大小写字母数字出现1次到多次,紧接着符号"_"和"."出现0次到一次,在把这两个条件加起来成为一个组,这个组的格式又可以出现0次到多次。

  2.[a-zA-Z0-9]+ 这段就不用说了吧,上面也说了就是大小写字符数字出现1次到多次

  3.@([a-zA-Z0-9]+[_|\_|\.]?)* 这个理解起来就简单了,以字符@开头上面那个分组出现0次到多次的这个格式

  4.\.[a-zA-Z]{2,3}  这个表达式呢还是比较容易,也是以字符"."开头所有大小写字母出现两次或者三次

  5./^$/ 这两个符号是表示从字符串的开始匹配到行的结束。

  看到这里大家是不是对正则表达式的认识更深了一些呢, 如果还不行话在给大家分析一个实例吧 /^((0?[1-9])|((1|2)[0-9])|30|31)$/ 这个正则的意思是验证一个月的31天,正确格式是01、09和1、31。首先我们还是来拆分 /^((0?[1-9])|((1|2)[0-9])|30|31)$/

  1.首先这个表达式中出现了三个黑色的"|"候选符号,意思就是说可以匹配四种情况

  2.(0?[1-9]) 这个表达式是匹配 0出现0次或者一次紧接着跟上数字出现一次,这是一种情况,如:01, 09, 1, 9这些

  3.((1|2)[0-9]) 这个分组表示的是1或者2出现一次紧接着跟上0-9出现一个,又是一种情况,如:10,19,20,29

  4.30|31 这个就更简单了,30或者31只能出现一次。


1

时间: 2024-10-10 07:14:12

前端正则表达式的相关文章

JS前端正则表达式学习笔记(转)

1.正则表达式的创建: 方法一:以字面量形式来创建 格式为/pattern/flags;其中pattern(模式)为任何简单或者复杂的表达式,可以包括字符类,限定符,分组,向前查找以及反向引用.每个正则表达式都可以有一个或者多个标识(flags),用以表明表达式的行为.正则表达式的匹配模式支持下列三个标识: g:(global) 全局模式,即模式将应用于所有的字符串,而非发现第一个匹配项时立即停止: i: (case-insensitive) 表示不区分大小写模式 m: (multiline)表

前端-正则表达式-收集

身份证: xxxxxx yyyy MM dd 375 0     十八位 xxxxxx    yy MM dd   75 0     十五位 地区: [1-9]\d{5} 年的前两位: (18|19|([23]\d))1800-2399 年的后两位: \d{2} 月份: ((0[1-9])|(10|11|12)) 天数: (([0-2][1-9])|10|20|30|31)闰年不能禁止29+ 三位顺序码: \d{3} 两位顺序码: \d{2} 校验码: [0-9Xx] 正则表达式 十八位: ^[

2019最全的WEB前端 系统学习路线,从基础到企业实战

近几年 前端 的受欢迎程度可谓是扶摇直上,当然了学习的人也是愈来愈多.一些学习前端 的小白在学习初期,总希望能够得到一份 前端 学习路线图,小编经过多方汇总为大家汇总了一份前端 学习路线图. 对于一个零基础的想学习 前端 的朋友来说,学习方法很重要, 学习方法不对努力白费 一定要有一个正确的学习线路与方法 如果你在学习 前端 的过程当中有遇见任何问题,可以加入我的 前端 交流学习秋秋qun:七二八.七零零.四九一,多多交流问题,互帮互助,群里有不错的学习教程和开发工具.学习 前端 有任何问题(学

【代码备份】ASP.NET正则表达式写法

1.前端正则表达式写法 1 function checkPassWord(password) { 2 //密码至少8个字符,至少1个大写字母,1个小写字母,1个数字 3 var reg = new RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,}$/); 4 if (reg.test(password)) 5 return true; 6 else 7 return false; 8 } 2.ASP.NET后端正则表达式写法 1 private boo

百度基础架构组-实习生面试(2016.08 java后台开发)

一.项目 1.Spring MVC与Struts2的区别: 2.MVC三层是如何工作的?比如:要访问一个Url?a=xx&b=xx,怎么找到相应的资源,怎么运算,怎么返回等? 3.数据库mybatis,如何优化的?加索引. 二.计算机网络 1.get与post的区别 若要传输一个比较大的内容,使用post请求,因为get请求是有字长限制的. 2.http协议的状态 200 OK,404 Not found,301 请求的资源永久性的移动到了新位置,302请求的资源临时移动到了一个新位置 三.Gi

聊一聊即将来临的跳槽季

第十四章 - 02: 聊一聊即将来临的跳槽季 之前的文章中都是聊的技术,今天在九月即将开始的前一天,咱们来聊一聊跳槽季 古之 大佬们都有云: 金三银四,金九银十. 这句话也被 很多职场新人奉为真理,毕竟在那些躁动的几个月里,公司中请假的.裸辞的.休假的的人都变多了. 那么在面对诱惑多多的 跳槽季,我们应该做一些什么? 当然在面对这个每年都在变化的事情,我们当然需要去了解一下 职场 大数据! 来更加全面的去了解 职业 到底是一个什么样的存在. 2017年 拉钩互联网白皮书 一.2017年互联网行业

SpringBoot注册登录(三):注册--验证账号密码是否符合格式及后台完成注册功能

SpringBoot注册登录(一):User表的设计点击打开链接SpringBoot注册登录(二):注册---验证码kaptcha的实现点击打开链接      SpringBoot注册登录(三):注册--验证账号密码是否符合格式及后台完成注册功能点击打开链接     SpringBoot注册登录(四):登录功能--密码错误三次,需要等待2分钟才能登录,固定时间内不能登录点击打开链接 SpringBoot注册登录(五):登录功能--Scheduling Tasks定时作业,用于某个时间段允许/不允

Python之路-(js正则表达式、前端页面的模板套用、Django基础)

js正则表达式 前端页面的模板套用 Django基础 js正则表达式: 1.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m 表示多行匹配 登录注册验证: test: 判断字符串是否符合规定的规则 rep = /\d+/;   (定义规则) rep.test('')   (引号里面必须包含字母和数字才返回true,否则为false) rep = /^\d+$/; (只有是纯数字时候才返回true,否则是false) exe

web前端之JavaScript正则表达式

web前端之JavaScript正则表达式 后面有代码: \d 表示数字 \d? ?表示0个或者一个 \d+ +表示一个或者多个 \d{3} 表示三个 \d{3,5} 表示三到五个 \d{3,} 表示至少出现3次 \d* *表示0到任意个 \b 表示单词边界 \B 表示非单词边界 \bis\b 表示查找" is "的 . 表示任意字符 \ 表示转译 http:(\/\/.+\.jpg) 用()进行分组 $1 获取其内部东西 []表示或 ^表示开头 $表示结尾 g表示全局 \d{4}[/