第六周第三天笔记

1.1 正则基础

• 正则的含义：由特定的符号组成的具有特殊含义的代码；
• 正则的目的：就是制定一些规则，来操作（校验/匹配，捕获）字符串的内容；只针对字符串；
• 正则的操作：
  • 校验：reg.test(str)，返回值为布尔值；如/^2\d{2}/.test(xml.status);,校验成功，满足规则，就返回true,不满足规则，就返回false;
  • 捕获：reg.exec(str)，返回值为一个数组；目的：用我制定的规则去捕获字符串中的内容，有就以数组的形式拿出来，没有就返回null;
• 字符串与正则配合的方法：
  • match("在字符串中查找内容"): 使匹配，如果存在要查找的内容，则返回内容，如果不存在，则返回null；
  • replace("被替换的内容","替换的内容")： 不会改变原字符串，返回一个新的字符串；
  • search():搜索，找到返回其下标值，找不到返回-1;
  • split(separator,limit):字符串转换为新数组，原字符串不会发生改变；
    • separator: 分离器，用于分割字符串的字符；即将其转换为逗号；—可以取空字符“”；
    • limit:可选参数，即分割几次，数值等于数组元素的个数；
• 字符串方法代码格式：
  • str.match();
  • str.replace();
  • str.search();
  • str.split();
• 正则的方法代码格式：
  • reg.test();
  • reg.exec();

1.2 正则校验（匹配）

• 校验test()方法讲解：

1.3 正则创建的方式

• 创建正则的方式分为两种：字面量创建和实例创建
  • 字面量创建：var reg=/^2\d{2}/;
    • 总结：字面量创建，斜杠中不加引号，代表的就是字符串；斜杠中如果加引号，引号算一个字符，代表自己的字符意义；注意，字面量创建中无法进行变量的拼接；

        //1.字面量创建，var reg=/str/，斜杠中不加引号，代表的就是字符串；
        var str="圆梦源";
        var reg=/str/;//此处str指的是一个字符串"str";而不是变量str；
        console.log(reg.test("str"));//打印为true;
        console.log(reg.test("圆梦源"));//打印为false;
        
        //2.字面量创建中，斜杠中如果加引号，引号算一个字符，代表自己的字符意义
        var reg2=/"+str+"/;//此处的+号，是把前面的字符多写几个；"号，代表一个字符放在里面；
        console.log(reg2.test("str"));//打印为false;
        console.log(reg2.test("圆梦源"));//打印为false;
        console.log(reg2.test('""""strrrrr"'));//打印为true;
        console.log(reg2.test('dsfsfsd""""strrrrr"'));//打印为true;校验不严格，只要存在内容就行；
        
        //3.注意，字面量创建中无法进行变量的拼接； 
  

  • 实例创建：var reg=new RegExp(" ");
    • 总结：括号中必须加引号，才代表字符串，如果不带引号，就是变量；实例创建可以进行变量拼接；

        //1.实例创建中，var reg=new RegExp("str"),括号中必须加引号，才代表字符串，如果不带引号，就是变量；
        var str="圆梦源";
        var reg3=new RegExp(str);//括号中不加引号，就指的是变量；
        console.log(reg3.test("圆梦源"));//打印为true;
        console.log(reg3.test("123圆梦源dfsd"));//打印为true;
        console.log(reg3.test("str"));//打印为false;
    
        //2. 实例创建中，括号里加引号，此时指的就是字符串，不再是变量；
        var str="圆梦源";
        var reg4=new RegExp("str");
        console.log(reg4.test('圆梦源'));//打印为false;
        console.log(reg4.test("str"));//打印为true;
    
        //3.实例创建可以进行变量拼接；
        var str="圆梦源";
        var reg6=new RegExp("ti"+str+"an");//变量拼接
        console.log(reg6.test("ti圆梦源an"));//打印为true;
  

  • 字面量创建和实例创建的区别：
    • 字面量创建无法拼接变量，实例创建可以拼接变量；
    • 字面量创建不需要转义，实例创建需要转义，如“\d”等带斜杠的元字符需要转义，前面加一个斜杠；

     var reg=/^2\d{2}$/;//字面量创建中，特殊符号不需要转义；
     console.log(reg.test("200"));//结果为true;
     var reg2=new RegExp("^2\\d{2}$");//实例创建中，特殊符号需要转义，如"\d"前面加"\";
     console.log(reg2.test("200"));//结果为true;
  

1.4 正则表达式的组成

• 正则表达式组成：由元字符和修饰符两部分组成；如代码:var reg=/^2\d{2}/g;
  • 元字符：就是包含在两个斜杠之间的字符；
  • 修饰符：就是斜杠外面的字符；
• 元字符：包含特殊含义的元字符和量词元字符
  • 特殊含义的元字符：1)\转义；2）|或；3）()分组；4）.除了\n以外的其他字符；5）\n 换行；6）\b 开头结尾和空格；7）^开头；8）$结尾 9）\s 空格；10）\S 非空格；11）\d 数字 12）\D 非数字；13）\w数字，字母，下划线； 14）\W 非数字，字母，下划线；15）[a-z]a到z之间的小写字母； 16）[^a-z] 非a到z之间的小写字母； 17）[abc] 包含abc三个字母中的任何一个，只能是一个； 18）[^abc] 除了abc三个字母；
  • 量词元字符：1）* 0到多次； 2）+ 1到多次； 3）? 0或1； 4）{n} 正好n次； 5）{n,} 最少n次；n次到多次； 6）{n,m} n次到m次；
• 修饰符：1）g 全局； 2）m 换行； 3） i 忽略大小写；
• 知识点：
  • 小括号的用法：
    • 提高优先级：/^(18|19)$/;验证18或19；

       //目的：验证18或19
         var reg=/^18|19$/;//分析：1加8或1加9，以1开头，以9结尾；
         console.log(reg.test("18219"));//结果为true;
         console.log(reg.test("119"));//结果为true;
       //注意：当使用|的时候必须加小括号；
       //正确写法：
         var reg1=/^(18|19)$/;
         console.log(reg1.test("189"));//结果为false;
         console.log(reg1.test("18"));//结果为true;
    

    • 分组的作用；
    • 小分组的作用；用于exec捕获；
  • 中括号的用法：
    • 中括号[]的用法：中括号中不会出现两位数；只能出现一个；

        //[abc]意思是abc中的任何一个；不会出现两个；
          var reg=/^[11-89]$/;//分析：1或1-8或9，三者中的任何一个
          console.log(reg.test("1"));//结果为true;
          console.log(reg.test("6"));//结果为true;6在1-8之间；
          console.log(reg.test("11"));//结果为false;11不在三者之间；
      

    • 中括号[]里面的字符意义会发生改变，分为两种，
      • 如"+","."这些元字符，代表加，小数点；都不用加转义符；但是在其他的时候必须加转义符才能代表加，小数点的意思；
        • 对比1：[+-]指的是+或-，二者任何一个；此时中括号中的+号，不用加转义符，就代表加号的含义；
        • 对比2：(\+|-)指的是+或-，二者任何一个；此时在小括号中的+号需要添加转义符；才代表加号的含义；
      • 如"\w","\s","\d"这些元字符，带斜杠的仍然代表元字符的含义；
  • 中括号和小括号的共同点：是在使用或的时候，功能是一样的；都代表两者其一；
    • 中括号：[ab]指的就是a,b二者中任何一个；
    • 小括号：(a|b)指的也是a,b二者中任何一个；
    • 弊端：当a，b为数字时，必须是一位数时，才能用中括号，如果为两位数，只能用小括号；如[1234]代表的意思是1234四位数中的任何一个数；而(12|34)代表的是12或34；
    • 注意：尽量不要用小括号，因为在exec方法捕获时，会对小括号进行小分组；会导致错乱；可以通过添加"?:"来解决，只匹配不捕获;
  • 量词元字符"?"问号的用法：
    • 代表可有可无；如有效数字正则表达式中的使用；
    • 放在正则捕获中的量词元字符后面，添加后，来解决正则捕获的贪婪性；如捕获数字时，只捕获一个数字时的使用；

1.5 正则表达式实际应用

• 有效数字的正则表达式
  • 代码：var reg=/^[+-]?(((\d)|([1-9]\d+))(\.\d+)?)$/或var reg=/^(\+|-)?(((\d)|([1-9]\d+))(\.\d+)?)$/(其中加号要用转义符);
  • 解读：
    1. ^指开头，$ 指结尾
    2. +和-都可以，所以用[+-]，可有可无，用?
    3. 数字分为整数和小数,用()()
    4. 整数分为两种，一位数，两位数或更多；所以用或，即()|();
    5. 一位数()可以是0-9之间的任何一个数，所以用\d;
    6. 两位数或多位数，第一位不能是0,所以需要1-9之间的数字，用[1-9];第二位可以是0-9之间的数字，用\d,可以是三位数或更多位，用+;
    7. 小数可有可无，用?；小数中分为小数点和数字，其中小数点用转义符\.来组合，数字可以是0-9之间的任何数字，所以用\d,可以是多位数，用+;
• 电话号码的正则表达式
  • 代码：var reg=/^1\d{10}$/
  • 解读：^1指以1开头，\d指0-9之间的数字，{10}指正好10位数字，$指结尾；
• 邮箱的正则表达式
  • 代码：var reg=/^([\w.-]+)@([a-zA-Z0-9]+)((\.[a-zA-Z]{2,4}){1,2})$/
  • 分析：邮箱可能出现的情况：zhan233f_sdi-dfjeif.djife @ qq/163 .com/.cn/.blog
  • 解读：
    1. 邮箱分为四部分
    2. 第一部分：@前面的部分。有可能出现的情况：小写字母a-z；大写字母A-Z；数字0-9；下划线_；符号-；符号.
       • 用[\w.-]+表示上面出现的情况；
         • 其中“小写字母a-z；大写字母A-Z；数字0-9；下划线_；”，用\w表示；
         • 其中“符号-；符号.”，用[.-]表示，中括号的意思是三者出现任何一个；
         • +的意思是可以出现1到多个；
    3. 第二部分：@符号，直接字符串拼接；
    4. 第三部分：qq或QQ或163或者其他，但是包括小写字母a-z；大写字母A-Z；数字0-9；不包括下划线，所以不能用\w;
       • [a-zA-Z0-9]指的就是“小写字母a-z；大写字母A-Z；数字0-9”；
       • +指的是可以出现1到多次；
    5. 第四部分：“.com/.cn/.blog”，其中可能出现".com"或".com.cn"或".com.blog"三种情况
       • 先创建".com或.cn或.blog"，\.代表小数点，[a-zA-Z]代表所有的大小写字母，{2,4}指的是字母出现的次数只能在2到4之间；不能是+;
       • 所以(\.[a-zA-Z]{2,4})代表的是".com或.cn或.blog"；
       • {1,2}指的是".com或.cn或.blog"出现的次数，只能出现1到2次；如".com"或".com.cn"或".com.blog"三种情况
  • 验证代码:

     var reg=/^([\w.-]+)@([a-zA-Z0-9]+)((\.[a-zA-Z]{2,4}){1,2})$/;
      console.log(reg.test("135865985@qq.com"));//结果为true;
      console.log(reg.test("135865985@163.com.cn"));//结果为true;
      console.log(reg.test("135865985@qq.com.blog"));//结果为true;
      console.log(reg.test("135865985@qq.com.blogg"));//结果为false;因为.blogg位数超过四位；
  

• 中文的正则表达式
  • 第一个汉字：“一”,代码：\u4e00;
  • 最后一个汉字：“龥”，代码：\u9fa5;
  • 实例：二到四位的汉字；代码：var reg=/^[\u4e00-\u9fa5]{2,4}$/
• 数字18到65之间的正则表达式
  • 分析：将其分解为三部分，18-19,20-59,60-65
  • 代码：var reg=/^((18|19)|([2-5]\d)|(6[0-5]))$/;注意：有或出现必须加小括号；
  • 解读：
    • (18|19)指18或19之间一个数；
    • [2-5]\d指第一位为2到5之间，第二位为0-9之间数字；
    • 6[0-5]指第一位为6，第二位为0-5之间的数字；
• 身份证号码的正则表达式
  • 简单的正则表达式
    • 分析：身份证总共18位，最后一位可能是数字也可能是字母X
    • 知识点：小括号与中括号中解决或的问题的方法,以及使用小括号的弊端；
    • 代码：

      var str="130216192305253234";
      var reg=/^\d{17}(\d|X)$/;
      console.log(reg.exec(str));//结果为：["130216192305253234", "4", index: 0, input: "130216192305253234", groups: undefined]
      //此时用exec会出现问题，当用到或的时候，需要用小括号，但是在exec中会把小括号作为小分组，拿出来；所以会多一项"4"；
      var reg1=/^\d{17}[\dX]$/;
      //避免使用小括号，可以使用中括号，来解决或的问题；
      console.log(reg1.exec(str));//结果为：["130216192305253234", index: 0, input: "130216192305253234", groups: undefined]
    

  • 获取详细信息的正则表达式
    • 分析：身份证号码每一位都有其含义，所以需要小分组将其分别获取，分类如：两位省，四位市县，四位年，两位月，两位日，后四位（分为两位户口所在地编码，一位奇偶性别，最后一位根据前面17位计算出来代表个人信息的）
    • 代码：

     var str="130216192305253234";
     var reg2=/^(\d{2})(\d{4})(\d{4})(\d{2})(\d{2})(\d{2})(\d)(\d|X)$/;
     console.log(reg2.exec(str));//结果为：["130216192305253234", "13", "0216", "1923", "05", "25", "32", "3", "4", index: 0, input: "130216192305253234", groups: undefined];
    

1.6 正则捕获

• 正则中的捕获，主要讲三个方法：
  • exec: reg.exec(str);——正则的方法；
  • match: str.match(reg);——字符串的方法；
  • replace: str.replace(reg,xxxx);——字符串的方法；

1.6.1 正则exec方法解读

• 定义：exec是正则的方法，每次捕获只能捕获一个满足正则的内容，然后返回的结果是个数组，默认情况下，数组有4项：
  1. 第一项：符合大正则的内容；(包含小分组内容)
  2. 第二项：如果存在小分组，则第二项内容为小分组的内容；如果存在多个小分组，那么会依次类推到第三项等等；
  3. 第三项：index:对应的值为查找到的内容开始字符所对应的索引；（位置）
  4. 第四项：input:原始字符串；
• 代码：

   var str="huadianxiehe2018zhanwang2019huigu2017huadianxiehe2015";
   var reg=/huadianxiehe(\d+)/g;//此时()为小分组，所以得到的数组中第二项为小分组内容；
   console.log(reg.exec(str));//结果为：["huadianxiehe2018", "2018", index: 0, input: "huadianxiehe2018zhanwang2019huigu2017huadianxiehe2015", groups: undefined]
   console.log(reg.exec(str));//结果为：["huadianxiehe2015", "2015", index: 37, input: "huadianxiehe2018zhanwang2019huigu2017huadianxiehe2015", groups: undefined]
  

• 正则捕获有两大特点：
  1. 懒惰性：每次找的时候都是从0开始找；
     • 解决措施：添加修饰符全局g；目的使其按顺序找；需注意：当查找到最后一个满足条件的表达式后，会输出null，然后再查找的时候，会重头开始查找，无限循环；
     • 知识点：修饰符g的作用，以及exec捕获的方式和返回的数组形式；
     • 代码对比：

  2. 贪婪性：在正则代码中添加"+"号后，就会把所有的输出来，所以比较贪婪；
     • 解决措施：在量词元字符"+"后面，添加量词元字符"?"；
     • 知识点：量词元字符"?"的应用
     • 代码对比：

      var str="huadianxiehe201823243zhanwang2019huigu2017";
          var reg=/\d+/g;
          console.log(reg.exec(str));//结果为：["201823243", index: 12, input: "huadianxiehe201823243zhanwang2019huigu2017", groups: undefined]
          //分析：添加+号后，exec会一下将201823243全部拿出来，显示贪婪；
          var reg1=/\d+?/g;
          console.log(reg1.exec(str));//结果为：["2", index: 12, input: "huadianxiehe201823243zhanwang2019huigu2017", groups: undefined]
          console.log(reg1.exec(str));//结果为：["0", index: 13, input: "huadianxiehe201823243zhanwang2019huigu2017", groups: undefined]
          //分析：在+号后面添加?号，会解决它的贪婪性，让其每次都输出一个数字；
          //修改：如果想要达到捕获的目的，一个一个数字的获取，正则表达式可以写成 reg=/\d/g;
     

• 正则属性方法：
  • lastIndex属性：
    • 属性值：若正则表达式中在未添加全局g时，每次exec捕获都从0开始，此时的lastIndex值都是0；
    • 属性值：若正则表达式中添加全局g后，指最后一次exec捕获内容后，开始下一次捕获时，开始查找的字符位置的索引值；需注意：当查找到最后一个满足条件的表达式后，会输出null，此时lastIndex值为0；继续查找，就会重头开始查找，无限循环；
    • 代码：

• 实例1
  • 需求：获取字符串中所有的数字，组成一个数组
  • 代码：

1.6.2 字符串match方法解读

• 定义：是字符串的方法，每次能得到所有符合正则的内容，并且以一个新数组的形式返回；如果没有符合规则的内容，返回null;
• 代码：

   var str="huadianxiehe2018zhanwang2019huigu2017huadianxiehe2015";
   var reg=/\d+/g;
   console.log(str.match(reg));//结果为：["2018", "2019", "2017", "2015"]；
  

1.6.3 exec方法与match方法的区别

• exec方法与match方法的区别：
  • exec方法是RegExp类原型上的方法；match方法是字符串原型上的方法；
  • exec方法和match方法，在查找的时候，正则表达式中，如果不添加全局g，则两个方法拿到的结果是相同的，都是一个数组，里面有三项；
  • exec方法每次只能拿到一个值；match方法能拿到所有值（前提是正则表达式中添加全局g），并以新数组的形式返回；针对的都是字符串；
  • exec方法既能拿到大正则，也能拿到小分组；match方法只能拿到大正则，无法拿到小分组；
• 实例：利用exec方法实现match功能