常用正则表达式、JS中的正则以及ES6的扩展
一、常见的正则表达式汇总
之前的时候,写过一个这么粗略的正则表达式:使用正则让userName必须为1到3位,否则显示格式不正确!
代码如下:
rules: [ { required: true, message: formatMessage({ id: 'validation.userName.required' }), }, { pattern: /^\d{1,3}$/, message: formatMessage({ id: 'validation.userName.wrong-format' }), }, ],
1、正则表达式
正则表达式,英文名为Regular Expression,作用是用于匹配字符串。如果想要练手的话,就去https://regexr.com/这个网址尽情的练去吧。
(注意:以下所有的命令都是被包在//g里面的,我只是省略了没写,注意,还是要包括在//g里面的!)
2、匹配任意字符
【//g】:里面是要匹配的字符;
【/王../g】:匹配“王”字后面的两个字;
【/./g】:匹配任意一个字符,即使输入的是一个空格,也能匹配到。只有一个例外,断行不会被匹配到;
【/../g】:两个点的话只能匹配两个字符,比如(王花)花,只能匹配到前两个字符。有几个点就匹配几个字符;
【3.14】:由于点代表了任意字符,所以,可以检测到(3-14),因为点代表了任意字符;
【3\.14】:这样检测到的就是(3.14)了,反斜杠代表的是转义,只能匹配点,短横线就不可以了;
3、匹配字母和数字
【\w】:小写的w,只匹配数字、大小写字母和下划线"_",一般用户名都是由这些组成的;
【\W】:大写的W,除了数字、大小写字母和下划线"_",其余的都匹配;
4、匹配数字
【\d】:只匹配数字,其他的一律不匹配,比如1.1,只能匹配(1).(1);
【\d\.\d】:这样带小数点的额数字也能匹配到了,比如1.1,就能全部都匹配到;
【\D】:只要不是数字,就能匹配到,包括空格和小数点;
5、匹配空白元素
【\s】:匹配所有的空格、制表符(就是tab)和断行;
6、字符合集
【[abc]】:只匹配字符a、b和c;
【[a-z]】:匹配小写字母,从a到z;
【[\u4e00-\u9fa5]】:选中中文。u代表的是Unicode,这叫万国码,用数字代表文字的一项标准,从第一个字符的编码到最后一个字符的编码,连起来就行了。这个就是只匹配中文字符,4e00是十六进制的数字;
7、重复一次或多次 --> 【[范围]+】 加号表示后面跟着的这个范围可以重复出现,后面的范围可以出现也可以不出现,出现的话可以出现1次,也可以出现多次
【yo+】:这个就可以匹配一次或多次,比如说“yo”和“yooo”就都能匹配到,只要这个字符串里有"yo"并且后面跟的是“o”的重复,那么这个字符串就能被匹配到;
【[yY]o+】:这个字符串中的大小写都能匹配到,“yo”、“yooo”和“Yo”、“Yooo”都能匹配到;
【[yY][Oo]+】:一个方括号就代表一个字符,"+"表示后面的这个字符,可以出现一次或者多次;
8、重复零个或多个 --> 【[范围]*】星号 表示后面跟着的这个范围既可以出现,也可以不出现;出现的话,既可以出现1次,也可以出现多次
【[yY][Oo]+[\.!~]*】:这样既可以匹配“yo”,也可以匹配“yo~”;
9、重复零次或一次 --> 【[]?】 问号表示后面跟着的这个范围只能出现0次或1次
【[yY][Oo]+[p]?[\.!~]*】:除了能匹配到上面的情况,还能匹配到“yop”和“yooop”;
10、指定重复次数 -->【{}】 花括号里面指定了重复几次到几次
【[yo{2,4]】:后面重复的o从两次到四次
11、正则里面的分组 -->【(.+)飞飞】 (.+)表示里面的分组 (讲到这里走神了,大体就这样吧)
【(.+)飞飞】:可以匹配到“王花花飞飞”
示例:
1、取出最后一个斜杆后面的数字。
let regExp=/([^/]+)$/; var a="some/123456"; let num=a? a.match(regExp)[0]:""; console.log(num);//123456
二、JS中的正则
1、正则的定义
JS通过RegExp类型来支持正则表达式,正则的匹配模式有三个:全局模式g、不区分大小写模式 i 和多行模式m,多行模式的意思是指在到达一行文本末尾的时候回查找下一行是否存在模式匹配的项。
正则的定义有两种方法,字面量方法和构造函数方法,正则表达式模式中使用的所有元字符都必须要经过转义,元字符就是那些特殊字符。
字面量方法创建正则的表达如下:
var part1=/at/g; var part2=/[bc]at/i;//不区分大小写 var part3=/.at/ig;//以at结尾的三个的字符
-
RegExp构造函数方法创建正则,会接受两个参数:要匹配的字符串模式(必选),标志字符串(可选),而且这个两个参数都是字符串。
var pattern1=new RegExp("[bc]at","i");
注意:由于构造函数接受的是字符串,所以元字符要经过双重转义,已经转义过的字符也要经过双重转义。
2、RegExp实例方法
正则对象有两个方法是非常重要的,一个是exec(),他会捕获字符串的位置和值;一个是test(),他会判断要捕获的字符串是否存在。
-
exec():
该方法接受一个参数,即要应用模式的字符串。返回的是包含第一个匹配项信息的数组,而且返回的数组还多了两个属性,一个是index,表示匹配项在字符串中的位置。一个是input;若没有匹配项,返回null。
var str="mokey,cat,fat"; var pattern=/.at/g; var matches=pattern.exec(str); console.log("位置",matches.index);//6 console.log("数组",matches);//cat matches=pattern.exec(str); console.log("新的位置",matches.index);//10 console.log("新的数组",matches);//fat
上面这段代码,正则定义采用了字面量的方法,并给出了全局的匹配模式。给定全局匹配模式,决定了返回的数组并不只是找到的第一个位置,而是当再次使用时,从下一个位置开始找起。如果不适用全局匹配模式,返回的数组永远都是匹配出现的第一个位置。
-
test():该方法接受的是一个字符串参数,返回一个布尔值,常常用在if语句中。
在构造函数中,需要双重转义。
^表示开始,$表示结束,如果没有开始和结束的标志,那么最后- 后面跟了5个0, 也会判断为true
var str="000-00-0000"; var pattern=new RegExp("^\\d{3}-\\d{2}-\\d{4}$"); var result=pattern.test(str); console.log('是否匹配',result);//true
三、ES6里面正则的扩展
1、RegExp构造函数
在ES5中,RegExp构造函数的参数有两种情况。
var regx=new RegExp("xyz","i");//第一种:两个参数。 var regx2=new RegExp(/xyz/i);//第二种:一个参数
在第二种方法中,ES6改变了只能有一个参数的行为。如果第一个参数是表达式,那么可以使用第二个参数指定修饰符。返回的正则表达式会用第二个覆盖掉第一个。
var regx3=new RegExp(/xyz/ig,"i")
上面这句代码,i模式会覆盖掉表达式中的ig模式。
var str="mokey,cat,fat"; var pattern=new RegExp(".at",'g') var matches=str.match(pattern); console.log("位置",matches.index);//undifined console.log("数组",matches);//cat,fat matches=str.replace(pattern,"dog"); console.log("新的位置",matches.index);//新的位置 undefined console.log("新的数组",matches);//新的数组 mokey,dog,dog
match()方法,返回的是一个数组,数组里面包含了所有的匹配项。
repalce()方法,返回的是一个新的数组,数组里面的匹配项被新的字符串所代替。如果没有写第二个参数,匹配项会为undifined。
console.log(/abc/ig.source);//"abc" console.log(/abc/ig.flags);//ig