JavaScript 正则表达式

前言

正则表达式在前端中的应用场景非常广泛，比如手机号码正则校验，也许你知道手机号码的校验规则是第一位1开头，第二位3、4、5、7、8开头，一共11位数字组成。但是如果使用正则表达式昵？本文将分享正则表达式的基础以及常规应用场景。

一、基础知识

1. 正则方法 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...]
   

2. 修饰符
   （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修饰符，可以将换行的也替换掉
   

3. 表达式模式
   （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）第一位数是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
   

2. 邮箱校验正则表达式

   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
   

3. 保留两位小数正则表达式

   var str=/^(([1-9]{1}\d*)|([0]{1}))(\.(\d){0,2})?$/;
   var str1= str.test(1.11);
   console.log(str1);//  true
   

三、总结

1. match 和 exec 得到的结果都是一个数组，只不过参数正好相反。match 是将正则表达式作为参数，而 exec 是将要匹配的字符串作为参数。没有匹配到，均为 null。
2. test 和 exec 都是将要匹配的字符串作为参数，但是 test 得到的是布尔值。true 或者 false。而 exec 返回值是数组，里面有被匹配到的字符串对象。如果没有匹配到，为null。
3. i 忽略大小写，
   g 匹配全局，
   m 匹配多行，
   \d 匹配数字，等同于[0-9]
   {n,m} 匹配最少 n 次，最多 m 次
   + 至少匹配1次，等同于 {1}
   * 匹配0次或多次，
   ？匹配0次或1次，等同于 {0,1}