前言
正则表达式在前端中的应用场景非常广泛,比如手机号码正则校验,也许你知道手机号码的校验规则是第一位1开头,第二位3、4、5、7、8开头,一共11位数字组成。但是如果使用正则表达式昵?本文将分享正则表达式的基础以及常规应用场景。
一、基础知识
-
正则方法 search 、match 、replace 、test、 exec
(1)search 用来匹配字符串,返回匹配的索引值。
var str="hello"; var index = str.search('el'); console.log(index);// 1
(2)match 用来匹配字符串,返回数组,数组中元素为匹配到的字符串文本。如果匹配不到返回 null。
var str="hello world"; var str1= str.match('world'); console.log(str1);// [world,index:6...]
(3)replace 方法接收两个参数,第一个为被替换值,第二个为替换值。
var str='hello world'; var str1 = str.replace("world",""); console.log(str1);// hello
(4)test 通过模式来搜索字符串,然后根据结果返回 true 或 false。
var str=/world/; var str1 = str.test("hello world"); console.log(str1);// true
(5)exec 通过指定的模式(pattern)搜索字符串,返回数组,数组中包含找到的字符串和该字符串出现的索引值。如果匹配不到返回 null。
var str=/world/; var str1 = str.exec("hello world"); console.log(str1);// [world,index:6...]
-
修饰符
(1)i 修饰符,不区分大小写。var str='hello WORLD'; var str1 = str.replace("world",""); var str2 = str.replace(/world/i,""); console.log(str1);// hello WORLD 如果没加i修饰符,就会区分大小写 console.log(str2);// hello
(2)g 查找全局匹配,而不是在第一个匹配后停止。
var str='hello world world'; var str1 = str.replace(/world/,""); var str2 = str.replace(/world/g,""); console.log(str1); // hello world 如果没加g修饰符,只能将第一个 world 替换掉 console.log(str2);// hello 加了g修饰符,两个都替换掉了
(3)m 执行多行匹配,可与g结合使用,实现多行全局匹配。
var str='helloworld\nhelloworld\nhelloworld'; var str1 = str.replace(/world$/g,""); var str2 = str.replace(/world$/gm,""); console.log(str1); // helloworld helloworld hello如果没加m修饰符, //只能将最后一个 world 替换掉 console.log(str2); // hello hello hello 加了m修饰符,可以将换行的也替换掉
-
表达式模式
(1)括号表示一定范围内的值[abc] 查找方括号内的任何字符
var str="hello world"; var str1= str.match(/[howd]/g); console.log(str1);// ["h", "o", "w", "o", "d"]
[0-9]查找任何从0至9的字符
var str="hello world22411"; var str1= str.match(/[0-2]/g); console.log(str1);// ["2", "2", "1", "1"]
(x|y)查找x或者y
var str="hello world22411"; var str1= str.match(/(2|4)/g); console.log(str1);// ["2", "2", "4"]
{n} n 是一个非负整数,匹配确定的n 次。
var str=/^\d{2,7}$/;//匹配2-7个 0 到 9之间的数字 var str1= str.test(599888); console.log(str1);// true
(2)元字符是拥有特殊含义的字符
\d 查找数字
var str="hello world22411"; var str1= str.match(/\d/g); console.log(str1);// ["2", "2", "4", "1", "1"]
\s 查找空白字符
var str="hello world"; var str1= str.match(/\s]/g); console.log(str1);// [" "]
\b 匹配单词边界
var str="hello world"; var str1= str.match(/\bwo]/g); console.log(str1);// ["wo"]
\u 查找以十六进制数规定的 Unicode 字符
var str="hello world"; var str1= str.match(/\u0077/g); console.log(str1);// ["w"]
^ 以什么开头
var str="hello world"; var str1= str.match(/^he/); console.log(str1);// ["he", index: 0, input: "hello world", groups: undefined]
$ 以什么结尾
var str="hello world"; var str1= str.match(/ld$/); console.log(str1);// ["ld", index: 9, input: "hello world", groups: undefined]
(3)定义量词
n+ 匹配任何包含至少一个n的字符
var str="helloo"; var str1= str.match(/o+/); console.log(str1);// ["oo", index: 4, input: "helloo", groups: undefined]
n* 匹配任何包含零个或多个 n 的字符串
var str="helloo"; var str1= str.match(/o*/); console.log(str1);// ["", index: 0, input: "helloo", groups: undefined]
n? 匹配任何包含零个或一个 n 的字符串
var str="helloo"; var str1= str.match(/o?/); console.log(str1);// ["", index: 0, input: "helloo", groups: undefined]
二、应用场景
-
手机号码校验正则表达式
手机号码校验规则
(1)第一位数是1;
(2)第二位数是3/4/5/7/8;
(3)还剩下9位,0-9任意匹配,一共11位数。var str=/^1[34578]{1}\d{9}$/; var str1= str.test(13907130220); console.log(str1);// true
-
邮箱校验正则表达式
675334@qq.com
邮件名称部分规则如下:
(1)26个大小写英文字母表示为a-zA-Z
(2)数字表示为0-9
(3)下划线表示为_
(4)中划线表示为-
(5)由于名称是由若干个字母、数字、下划线和中划线组成,所以需要用到+表示多次出现根据以上条件得出邮件名称表达式:[a-zA-Z0-9_-]+
域名部分规则如下:
一般域名的规律为“[N级域名][三级域名.]二级域名.顶级域名”,比如“qq.com”、“www.qq.com”、“mp.weixin.qq.com”、“12-34.com.cn”,分析可得域名类似“** .** .** .**”组成。** 部分可以表示为[a-zA-Z0-9_-]+
.** 部分可以表示为.[a-zA-Z0-9_-]+
多个 .** 可以表示为(.[a-zA-Z0-9_-]+)+
因此域名部分可以表示为[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+最终表达式:
由于邮箱的基本格式为“名称@域名”
需要使用^匹配邮箱的开始部分
需要使用$匹配邮箱结束部分所以最终邮箱的正则表达式为:
^[a-zA-Z0-9_-] +@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$
var str=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/; var str1= str.test(675334@qq.com); console.log(str1);// true
-
保留两位小数正则表达式
var str=/^(([1-9]{1}\d*)|([0]{1}))(\.(\d){0,2})?$/; var str1= str.test(1.11); console.log(str1);// true
三、总结
- match 和 exec 得到的结果都是一个数组,只不过参数正好相反。match 是将正则表达式作为参数,而 exec 是将要匹配的字符串作为参数。没有匹配到,均为 null。
- test 和 exec 都是将要匹配的字符串作为参数,但是 test 得到的是布尔值。true 或者 false。而 exec 返回值是数组,里面有被匹配到的字符串对象。如果没有匹配到,为null。
- i 忽略大小写,
g 匹配全局,
m 匹配多行,
\d 匹配数字,等同于[0-9]
{n,m} 匹配最少 n 次,最多 m 次
+ 至少匹配1次,等同于 {1}
* 匹配0次或多次,
?匹配0次或1次,等同于 {0,1}