正则表达式（轻松入门级）

Posted 2020-10-23 LearningTogether

前言：正则表达式又称为火星文，因为视觉上让人感觉很复杂。本文将会详细介绍正则表达式，初学者只要认真阅读过，定会有收获。

1、正则的概念

　　正则表达式（regular expression）是一个描述字符规则的对象。可以用来检查一个字符串是否含有某个子字符串，将匹配的子字符串替换或者从某个字符串中取出符合某个条件的子串等。

　　为什么要用正则：前端往往有大量的表达数据校验工作，采用正则表达式会使得数据校验的工作量大大减轻。常用效果（邮箱、手机号、身份证号等等）。

2、创建方式

　　第一种方式：

// 通过构造函数的方式
　　var oReg = new RegExp(‘study‘, ‘i‘);

 

　　第二种方式：

// 通过语法糖（简写）的形式
 　var oReg = /study/i;

　　修饰符：

　　i ：表示忽略大小写。

　　g：表示全局匹配，查找所有匹配而非在找到第一个匹配后停止。

　　m：多行匹配。

3、正则对象方法

　　test：检索字符串中指定的值。返回true或false。

　　exec：用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果，如果未找到匹配，则返回值为null。

　　下面我们来个举个列子：

　　// 首先我来看test
　　//我们要在字符串str中找出符合Reg的规则的子字符串，符合则返回true，不符合则返回false
    var str = ‘Good good study, Day day up! Good good study‘;
    var Reg1= /good/ig;
    var Reg2= /goood/ig;
    console.log(Reg1.test(str));//true
    console.log(Reg2.test(str));//false

　　

    // 接下来我们再来看 exec
    //用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果，如果未找到匹配，则返回值为null
    var str = ‘Good good study, Day day up! Good good study‘;
    var Reg= /good/ig;
    console.log(Reg.exec(str));//["Good", index: 0, input: "Good good study, Day day up! Good good study"]
    console.log(Reg.exec(str));//["good", index: 5, input: "Good good study, Day day up! Good good study"]
    console.log(Reg.exec(str));//["Good", index: 29, input: "Good good study, Day day up! Good good study"]
    console.log(Reg.exec(str));//["good", index: 34, input: "Good good study, Day day up! Good good study"]
    console.log(Reg.exec(str));//null
    //注：如果没有指定g修饰符，那么每次匹配都是从头开始匹配，如果指定g修饰符以后，下次匹配则从上次匹配的结束位置开始匹配。

 

4、字符串函数

　　search：检索与正则表达式相匹配的值，返回字符串中第一个与正则表达式相匹配的子串的起始位置，如果没有找到则返回-1。

　　match ：找到一个或多个正则表达式的匹配。

　　replace：替换与正则表达式匹配的子串。

　　split      ：把字符串分割为字符串数组。

　　单看概念不容易理解，看看下面的小实列就一目了然

　
　　　var str = ‘Good good study, Day day up! Good good study‘;
     var Reg= /study/ig;
     console.log(str.search(Reg));//10
     console.log(str.match(Reg));// ["study", "study"]
     console.log(str.replace(Reg,‘aaaa‘));//Good good aaaa, Day day up! Good good aaaa
     console.log(str.split(Reg));//["Good good ", ", Day day up! Good good ", ""]

5、正则表达式构成

　　正则表达式是由普通字符（列如字符a到z）以及特殊字符（称为元字符）组成的文字模式。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。

　　①元字符---限定符：

　　*：匹配前面的子表达式零次或多次。

　　+：匹配前面的子表达式一次或多次。

　　？：匹配前面的子表达式零次或一次。

　　{n}：匹配确定n次。

　　{n,}：至少匹配n次。

　　{n,m}：最少匹配n次且最多匹配m次。

　　实列如下：

var str =‘gd god good goood gooood‘;

     var Reg1 =/go*d/ig; //*：匹配前面的子表达式零次或多次
     console.log(str.match(Reg1));//["gd", "god", "good", "goood", "gooood"]


     var Reg2 =/go+d/ig; //+：匹配前面的子表达式一次或多次
     console.log(str.match(Reg2));//["god", "good", "goood", "gooood"]


     var Reg3 =/go?d/ig; //？：匹配前面的子表达式零次或一次
     console.log(str.match(Reg3));//["gd", "god"]


     var Reg4 =/go{2}d/ig; //{n}：匹配确定n次
     console.log(str.match(Reg4));//["good"]


     var Reg5 =/go{2,}d/ig; //{n,}：至少匹配n次
     console.log(str.match(Reg5));//["good", "goood", "gooood"]
     

     var Reg6 =/go{1,3}d/ig; //{n, m}：最少匹配n次且最多匹配m次
     console.log(str.match(Reg6));//["god", "good", "goood"]

　

 

　　②元字符---字符匹配符：

　　字符匹配符用于匹配某个或某些字符。

　　[xyz]：字符集合。匹配所包含的任意一个字符。

　　[^xyz]：负值字符集合。匹配未包含的任意字符。

　　[a-z]：字符范围。匹配指定范围内的任意字符。

　　[^a-z]：负值字符范围。匹配任何不在指定范围内的任意字符。

　　\d：匹配一个数字字符。

　　\D：匹配一个非数字字符。

　　\w：匹配包含下划线的任何单词字符。等价于[a-z0-9A-Z_]

　　\W：匹配任何非单词字符。等价于[^a-z0-9A-Z_]

　　\s：匹配任何空白字符。

　　\S：匹配任何非空白字符。

　　·：匹配除”\n”之外的任何单个字符。

　　实列如下：

     var str = ‘aiod acd abd add aed afd ahd $%#@ 12345678 asdfghh‘;

     var Reg1 = /a[abc]d/ig;        //[xyz]：字符集合。匹配所包含的任意一个字符
     console.log(str.match(Reg1)); //["acd", "abd"]

     var Reg2 = /a[^abc]d/ig;       //[^xyz]：负值字符集合。匹配未包含的任意字符
     console.log(str.match(Reg2)); // ["add", "aed", "afd", "ahd", "asd"]

     var Reg3 = /a[a-z]d/ig;        //[a-z]：字符范围。匹配指定范围内的任意字符
     console.log(str.match(Reg3)); //["acd", "abd", "add", "aed", "afd", "ahd", "asd"]

     var Reg4 = /a[^a-e]d/ig;      //[^a-z]：负值字符范围。匹配任何不在指定范围内的任意字符
     console.log(str.match(Reg4)); //["afd", "ahd", "asd"]

     var Reg5 = /\d+/ig;             //  \d：匹配一个数字字符。
     console.log(str.match(Reg5));  //["12345678"]

     var Reg6 = /\D+/ig;            //    \D：匹配一个非数字字符
     console.log(str.match(Reg6));  //["aiod acd abd add aed afd ahd $%#@ ", " asdfghh"]

     var Reg7 = /\w+/ig;            //   \w：匹配包含数字,字母,下划线的任何单词字符,等价于[a-z0-9A-Z_]
     console.log(str.match(Reg7));  //["aiod", "acd", "abd", "add", "aed", "afd", "ahd", "12345678", "asdfghh"]

     var Reg8 = /\W+/ig;            //    \W：匹配任何非单词字符。等价于[^a-z0-9A-Z_]
     console.log(str.match(Reg8));  // [" ", " ", " ", " ", " ", " ", " $%#@ ", " "]

     var Reg9 = /\s+/ig;            //    \s：匹配任何空白字符
     console.log(str.match(Reg9));  //[" ", " ", " ", " ", " ", " ", " ", " ", " "]

     var Reg10 = /\S+/ig;            //    \S：匹配任何非空白字符
     console.log(str.match(Reg10)); //["aiod", "acd", "abd", "add", "aed", "afd", "ahd", "$%#@", "12345678", "asdfghh"]

　　

　　③元字符---定位符：

　　定位符可以将一个正则表达式固定在一行的开始或结束，也可以创建只在单词内或只在单词的开始或结尾处出现的正则表达式。　　

　　^：匹配输入字符串的开始位置。

　　$：匹配输入字符串的结束位置。

　　\b：匹配一个单词边界，也就是单词和空格间的位置。

　　\B：匹配非单词边界。

// ^：匹配输入字符串的开始位置。
    var str  =‘123456‘;  
    var Reg1  =/^\d+/ig;
    var Reg2  =/\d/ig;
    console.log(Reg1.test(str));//true

//$：匹配输入字符串的结束位置。
    var str =‘abcd789‘;
    var Reg =/.+\d{3}$/ig;
    console.log(Reg.test(str));//true

// \b：限定单词以什么开头和结尾，\B：限定单位不以什么开头和结尾
var str = ‘good ogoodm goods sgoods‘;

var reg1 = /\bg\w+/g;
var reg2 = /\w+d\b/g;
console.log(str.match(reg1));//["good", "goods"]
console.log(str.match(reg2));//["good"]
var reg3 = /\Bg\w+/g;
var reg4 = /\w+d\B/g;
console.log(str.match(reg3));//["goodm", "goods"]
console.log(str.match(reg4));//["ogood", "good", "sgood"]

 

　　④元字符---转义符

　　\：用于匹配某些特殊字符（遇到特殊字符需要用反斜杠转义）

 // 特殊字符：. + * ? {} [] ^ $ \

    var str = ‘++++++-*/%‘;
    var oReg = /\++/g;
    console.log(str.match(oReg));//["++++++"]

　　

　　⑤元字符---选择匹配符

　　|：可以匹配多个规则

// 选择匹配符
var str = ‘gooqd gaawd gwwsd‘;
var oReg = /g(ooq|aaw)d/g;
console.log(str.match(oReg));// ["gooqd", "gaawd"]

 

　　接下来是常用简单型检测案例

　　1、手机号检测

// 下面是国内 13、15、18开头的手机号正则表达式。（可根据目前国内收集号扩展前两位开头号码）
var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$/

　　2、检测中文

//字符串只能是中文
var oReg = /^[\u2E80-\u9FFF]+$/;

　　3、身份证检测

// 18位身份证检测
 var oReg = /^\d{17}[\dxX]$/;

　　4、日期检测

//日期检测
 var oReg = /^\d{4}(\-|\/)\d{1,2}\1\d{1,2}$/;

　　5、去除首尾空格

// 去除首尾的空格
var sVal = oSpace.value;
var oReg = /^\s+(\S*)\s+$/;
console.log(sVal.replace(oReg, ‘$1‘));

　　6、检测文件格式

//检测文件格式
var oReg = /.+\.(jpg|jpeg|png|gif)$/i;

　　7、检测邮编

//检测邮编
var oReg = /^\d{6}$/;

　　8、过滤

// 过滤
var str = ‘小明说小强是混蛋，小强说他不是混蛋‘;
str.replace(/混蛋/g, ‘**‘);