JS：正则表达式

一、创建正则表达式

  <script>
    // 什么是正则表达式 “规则表达式”
    // 就是我们通过一些符号和特殊符号组成一个模式
    // 用来检测字符串是不是符合我写的 “规则”
    // 怎么写一个正则
    
    // 字面量创建
    var reg1 = /\d{5,}@qq\.com/

    //内置构造函数创建
    var reg2 = new RegExp("\\d{5,}@qq\\.com")

    // 打印正则对象的字面量 类型(正则表达式 是一个引用数据类型)
    console.log(reg1, typeof(reg1)); ///\d{5,}@qq\.com/ 'object'
    console.log(reg2, typeof(reg2)); ///\d{5,}@qq\.com/ 'object'
  </script>

二、正则表达式的作用

1. 第一个正则方法 test()

语法： 正则表达式.test(你要检测的字符串)

返回值： 这个字符串如果符合规则，返回 true，如果不符合规则，返回 false

  <script>
    // 当你用这个正则取检测一个字符串的时候
    // 字符串必须包含一段字符叫做 'abc'
    // 如果字符串中有 'abc' 这样一段字符串，那么就符合规则，反之就是不符合规则
    var reg = /abc/

    // 1. 第一个正则方法
    // test()
    // 语法： 正则表达式.test(你要检测的字符串)
    // 返回值： 这个字符串如果符合规则，返回 true，如果不符合规则，返回 false

    var str1 = 'aabbccabcd'
    var str2 = 'defgaabbcc'
    // 测试str中是否有reg所定义的规则的子串
    var strIsOk1 = reg.test(str1)
    var strIsOk2 = reg.test(str2)

    console.log(strIsOk1, strIsOk2); //true false

  </script>

例子：

  <script>
    var regs = [/尼玛/, /握草/, /fucking/, /你妹/]

    var oneSay = "你妹啊，我的代码出bug了，fucking！"
    var twoSay = "谢谢老天！我的代码没问题啊！"

    function isGoodSay(say){
      var isGoodSay = true;
      for (let i = 0; i < regs.length; i++) {
        var reg = regs[i]
        if (reg.test(say)) {
          isGoodSay = false
          break
        }
      }
      return isGoodSay
    }

    console.log(oneSay, isGoodSay(oneSay) );
    console.log(twoSay, isGoodSay(twoSay) );
  </script>

三、正则表达式_元字符

  <script>
    // 就是用来书写正则的特殊内容

    // 1. \d 
    // 表示是数字的意思
    // 我要检测的字符串里面必须有一个数字
    // digit数字
    // reg.test(str)检测str中是否包含reg所描述的子串
    var reg = /\d/
    console.log(reg.test('abdsavcd')); //false
    console.log(reg.test('ab123vfdvcd')); //true

    // 2. \D
    // 表示非数字
    // 表示检测的字符串里面要有一个非数字
    var reg = /\D/
    console.log(reg.test('abcd')); //true
    console.log(reg.test('123')); //false

    // 3. \s 
    // 表示空格字符 " " \t制表符 \n换行符 \r回车符     
    // 表示你的字符串中要有一个 空格
    var reg = /\s/
    console.log(reg.test('SDfghjkz')); //false
    console.log(reg.test('1     23')); //true
    console.log(reg.test('deg\tgfh')); //true

    // 4. \S
    // 表示非空格
    var reg = /\S/
    var str1 = '1 23'
    var str2 = '  \t \n \r'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //false

    // 5. \w 单词字符
    // 数字字母下划线 0 - 9 a - z A -Z _
    var reg = /\w/
    var str1 = '0_aA'
    var str2 = '@你妹@'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //false

    // 6. \W
    // 非数字字母下划线
    var reg = /\W/
    var str1 = '@_@'
    var str2 = '123456sdfghjASFDFGHJ_'
    console.log(reg.test(str1));//true
    console.log(reg.test(str2));//false

    // 7. 点.
    // 表示非换行以外的任意字符 \n换行符
    var reg = /./
    var str1 = '你妹\n'
    var str2 = '\n \n \n'
    var str3 = '\n\n\n'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //true
    console.log(reg.test(str3)); //false

  </script>

四、正则表达式_限定符

  <script>
    // 限定符是来限制前面一个元字符出现的次数

    // 1. * 
    // 表示 0 次到 正无穷 [0, +∞]
    // 下面正则表示 \d 出现 0 ~ 正无穷次都可以
    var reg = /\d*/
    var str1 = 'abc12345'
    var str2 = 'abc1'
    var str3 = 'abc'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //true
    console.log(reg.test(str3)); //true

    // 2. +
    // 表示 1 次到正无穷次 [1, +∞]
    // 下面这则表示数字出现 1 ~ 正无穷次
    var reg = /\d+/
    var str1 = 'abc12345'
    var str2 = 'abc1'
    var str3 = 'abc'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //true
    console.log(reg.test(str3)); //false

    // 3. ?
    // 表示 0 ~ 1 次
    // 表示你检测的字符串里面有一段字符是 0 ~ 1 次的数字 [0,1]
    var reg = /\d?/
    var str1 = 'abc12345'
    var str2 = 'abc1'
    var str3 = 'abc'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //true
    console.log(reg.test(str3)); //true

    // 4. {n} n 是一个数字
    // 表示只能出现至少 n 次
    var reg = /\d{3}/
    var str1 = 'abc12345'
    var str2 = 'abc12'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //false

    // 5. {n,}
    // 表示至少出现 n 次   n ~ 正无穷次
    var reg = /\d{3,}/
    var str1 = 'abc12345'
    var str2 = 'abc45'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //false

    // 6. {n,m}  n ~ m 次
    // 表示出现 n ~ m 次
    var reg = /\d{2,4}/
    var str1 = 'abc12345354'
    var str2 = 'abc4'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //false

  </script>

五、正则表达式_边界符

  <script>
    // 1. ^
    // 表示开头

    // 2. $
    // 表示结尾

    // 下面这个表示必须以数字开头
    var reg = /^\d/
    var str1 = '1abc123'
    var str2 = 'x1abc123'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //false


    // 下面这个表示必须以数字结尾
    var reg = /\d$/
    var str1 = '1abc123'
    var str2 = 'x1abc123x'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //false


    // 表示字符串从开头到结尾只能有一个数字
    var reg = /^\d$/
    var str1 = '1abc123'
    var str2 = '1'
    console.log(reg.test(str1)); //false
    console.log(reg.test(str2)); //true


    // 表示字符串从开头到结尾之恶能由数字组成并且只能出现 0 ~ 1 次
    var reg = /^\d?$/ //字符串收尾之间（字符串本身）有且仅有0或1个数字
    var str1 = '12'
    var str2 = '1'
    var str3 = ''
    console.log(reg.test(str1)); //false
    console.log(reg.test(str2)); //true
    console.log(reg.test(str3)); //true


    /* 开头和结尾中间有且只有4个数字 */
    var reg = /^\d{4}$/ //字符串收尾之间（字符串本身）有且仅有4个数字
    var str1 = '1234'
    var str2 = '12345'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //false


    /* 在开头和结尾的中间是4个以上的连续数字 */
    var reg = /^\d{4,}$/ //字符串收尾之间（字符串本身）有且仅有4个以上的数字
    var str1 = '1234'
    var str2 = '12345 '
    var str3 = '123'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //false
    console.log(reg.test(str3)); //false



    /* 在开头和结尾的中间是4-6个连续数字 */
    var reg = /^\d{4,6}$/ //字符串收尾之间（字符串本身）有且仅有4-6个数字
    var str1 = '1234'
    var str2 = '12345'
    var str3 = '123456'
    var str4 = '123'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //true
    console.log(reg.test(str3)); //true
    console.log(reg.test(str4)); //false
  </script>

六、正则表达式_特殊符号

  <script>
    // 1. \ 转义的意思 \\代表的是“\”

    // 2. | 或的意思

    // 3. ()
    //   表示把一堆东西当成一个整体

    /* 【1个以上的单词字符】.sina.com */
    var reg = /^\w+@(126|sina|qq|foxmail)\.(com|net)$/
    var str1 = 'asd@126.net'
    var str2 = '_asd123456@sina.com'
    var str3 = ' asd123456@sina.com'
    var str4 = 'asd123456@sinaaaa.com'
    var str5 = 'asd123456@sina&com'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //true
    console.log(reg.test(str3)); //false
    console.log(reg.test(str4)); //false
    console.log(reg.test(str5)); //false

    // 4. []
    // 写在括号内部的东西人选一个就行
    // 一个 [] 内部表示一个字符
    // 下面这个正则表示 从开头到结尾 只能由一个字符出现
    // a b c d 中过的任意一个都可以
    var reg = /^[abcd]$/
    var str1 = 'aaa'
    var str2 = 'a'
    console.log(reg.test(str1)); //false
    console.log(reg.test(str2)); //true


    // 5. -
    // 到 至
    var reg = /^[a-zA-Z0-9]$/
    var str1 = 'D'
    var str2 = 'Dd'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //false

    // 6. [^]
    // 非的意思
    // 表示字符串只能有一位组成
    // 并且这一位必须是 非 a~z
    var reg = /^[^a-z]$/
    var str1 = '你'
    var str2 = '你妹'
    var str3 = 'a'
    console.log(reg.test(str1)); //true
    console.log(reg.test(str2)); //false
    console.log(reg.test(str3)); //false

  </script>

七、正则表达式_执行匹配

  <script>
    // 1. test()
    // 检测字符串是否符合要求

    // 2. exec() 执行（匹配（子串）检索（子串位置）二合一）
    var reg = /\d{3}/g
    var str = `abcd110sdfsdf120asdfsafd119`

    console.log(reg.exec(str));
    //1. 
    //['110', index: 4, input: 'abcd110sdfsdf120asdfsafd119', groups: undefined]
    // 324  第一个符合条件的子串
    // 4    第一个子串出现的位置
    // input  被检测的字符串

    console.log(reg.exec(str));
    //2.
    // ["120", index: 13, input: "abcd110sdfsdf120asdfsafd119", groups: undefined]
    
    console.log(reg.exec(str));
    //3.
    // ["119", index: 24, input: "abcd110sdfsdf120asdfsafd119", groups: undefined]
    
    console.log(reg.exec(str));
    //4.
    // null

    console.log(reg.exec(str));
    //5.
    //['110', index: 4, input: 'abcd110sdfsdf120asdfsafd119', groups: undefined]

    // 第一次执行循环匹配后先打印游标位置
    console.log("循环匹配后",reg.lastIndex); //7

    // 手动调节游标起始位置
    // reg.lastIndex = 7
    
    // 循环执行（寻找子串及其出现位置） 并输出全部匹配的结果
    var newStr = "svczvcz123hjcvsjab456ushdjkskahdah789"
    function getSuited(str){
      var arr = []
      while(arr != null){
        arr = reg.exec(str)
        console.log(arr);
      }
    }
    getSuited(newStr)
    // ['123', index: 7, input: 'svczvcz123hjcvsjab456ushdjkskahdah789', groups: undefined]
    // ['456', index: 18, input: 'svczvcz123hjcvsjab456ushdjkskahdah789', groups: undefined]
    // ['789', index: 34, input: 'svczvcz123hjcvsjab456ushdjkskahdah789', groups: undefined]
    // null

    // 未开始执行时游标为0
    var newStr2 = "svczvcz123hjcvsjab456ushdjkskahdah789"
    function getSuited1(str){
      var arr = []
      reg.lastIndex = 10
      while(arr != null){
        arr = reg.exec(str)
        console.log(arr);
      }
    }
    getSuited1(newStr2)
    //['456', index: 18, input: 'svczvcz123hjcvsjab456ushdjkskahdah789', groups: undefined]
    //['789', index: 34, input: 'svczvcz123hjcvsjab456ushdjkskahdah789', groups: undefined]
    //null
  </script>

八、正则表达式_标识符

  <script>
    // 标识符是写在正则外面的东西
    // 1. g
    // 全局搜索
    // 写了 g 以后
    // 第一次搜索是从字符串索引0开始
    // 第二次搜索是从上次结束的位置开始
    // 第三次搜索是从第二次结束的位置开始
    // 直到找不到内容了 返回 null
    // 再下一次的时候又从 索引 0 开始搜索


    /* g 全局匹配 */
    // 此处的正则如果没有全局匹配标识符g 则永远只会检索到第一个子串
    // reg.lastIndex游标当前的实时位置 在【全局模式下】游标会实时地移动 常规模式下执行一次匹配后游标归零
    var reg = /\d{3}/g
    var str = 'abcd120sdfsdf110asd119fs'
    console.log(reg.exec(str),reg.lastIndex);//[120  ...]7
    console.log(reg.exec(str),reg.lastIndex);//[110 ...] 16
    console.log(reg.exec(str),reg.lastIndex);//[119 ...] 22
    console.log(reg.exec(str),reg.lastIndex);//null 0

    // 2. i
    // 忽略大小写 ignore
    // 表示再查找的时候忽略大小写问题
    var reg1 = /^[a-z]$/
    var reg2 = /^[a-z]$/i
    var str = 'Y'
    console.log(reg1.test(str)); //false
    console.log(reg2.test(str)); //true



    /* m多行模式 每行都有收尾边界符^$
    multiple多的
    */
    var reg1 = /^[a-z]$/
    var reg2 = /^[a-z]$/gm
    var str = 'Y\ne\ns'
    var str2 = 'Y\nE\nS'
    console.log(reg1.test(str)); //false
    console.log(reg2.test(str)); //true
    console.log(reg2.test(str2)); //false

    /* y粘性模式 sticky粘性的 仅从正则表达式的lastIndex 属性表示的索引处搜索*/
    var reg = /^[a-z]$/gm
    var str = 'y\ne\ns'
    console.log(reg.lastIndex);//0
    console.log(reg.exec(str),reg.lastIndex);//y 1
    console.log(reg.exec(str),reg.lastIndex);//e 3
    console.log(reg.exec(str),reg.lastIndex);//s 5
    console.log(reg.exec(str),reg.lastIndex);//null 0

    var reg = /^[a-z]$/gmy
    var str = 'Y\ne\ns'
    reg.lastIndex = 2
    console.log(reg.lastIndex);//2
    // // /* 只会从lastindex=2的地方开始找 游标不会自己动（除非exec结果是null时归零） */
    console.log(reg.exec(str), reg.lastIndex);//e 3
    console.log(reg.lastIndex); //3
    console.log(reg.exec(str), reg.lastIndex);//null 0

    // /* null触发游标归零后 只会从0出开始找 */
    reg.lastIndex = 2
    console.log(reg.exec(str), reg.lastIndex); //['e', index: 2, input: 'Y\ne\ns', groups: undefined] 3
    console.log(reg.exec(str), reg.lastIndex); //null 0

    // // /* null触发游标归零后 只会从0出开始找 */
    console.log(reg.exec(str), reg.lastIndex); //null 0
    console.log(reg.exec(str), reg.lastIndex); //null 0

  </script>

九、正则表达式_贪婪模式与非贪婪模式

    <script>
        // 正则描述：中文若干+数字若干
        // var reg = /(([\u4e00-\u9fa5]*)(\d*))/
        // var str = "你妹123"
        // console.log( reg.exec(str) );

        function testRegGreedy() {
            // 贪婪模式（.尽量多地匹配）
            var reg1 = /(.*)(\d+)/
            var str = "你妹1234567890"
            console.log(reg1.exec(str));
            console.log(reg1.exec(str)[1]);//贪婪=尽量多吃 .*=你妹123456789 尽量少地留给后人\d+=0
            console.log("\n");

            // 非贪婪模式（.尽量少地匹配）
            var reg2 = /(.*?)(\d+)/   
            console.log(reg2.exec(str));       
            // console.log(reg2.exec(str)[1]);//非贪婪=尽量少吃 .*=你妹 尽量多地留给后人\d+=1234567890
        }
        testRegGreedy()
    </script>