一.正则表达式（Regular expression）是什么:

对字符串进行逻辑匹配运算的内置对象

表达式 : 运算作用, 对字符串进行运算

内置对象:存储一些属性和方法

二.正则表达式作用

字符串格式校验
对字符串进行逻辑匹配运算
检查表单中字符串格式(手机号,验证码,账户名,密码)

三.正则表达式使用流程 :

(1)创建正则对象 : let reg = new RegExp('正则')

 简写:let reg = /正则/

(2)调用正则对象的test方法： reg.test('需要校验的字符串')

 true : 校验通过
 false : 校验不通过

案例：检测字符串中有没有a

        // (1)创建正则对象
        let reg = new RegExp('a')
        // (2)调用test()方法
        console.log(reg.test('abc'))//true  校验通过
        console.log(reg.test('bbc'))//false  校验不通过
        console.log(reg.test('123'))//false  校验不通过

四.元字符与原义文本字符

正则表达式语法由两部分组成

  1.原义文本字符 : 字符串本身的含义
      * PS : 别多想，写什么就是什么。想的越多，错的越离谱

  2.元字符 ： 改变了字符串本身的含义， 类似于js中的关键字
      []  {}  ()  .  \ + ? * ^ $ |

      // /abc/:含义,检测字符串中有没有abc
      console.log(/abc/.test('a1b2c3'))//false
      console.log(/abc/.test('a123'))//false
      console.log(/abc/.test('abc123'))//true
      
    //  /前端/:含义,检测字符串中有没有前端
     console.log(/前端/.test('前面的路'))//false

     console.log(/前端/.test('我端着一碗水'))//false
     console.log(/前端/.test('热爱前端'))//true

五.字符类

  1.原义文本字符 ： 字符串本身含义
      /abc/ : 检测字符串中有没有 abc 

  2.元字符 ： 改变字符串含义
    []  {}  ()  .  \ + ? * ^ $ |

/abc/ : 原义文本字符。检测字符串中有没有 abc,不是有a且有b且有c,也不是有a或有b或有c,就是abc本身

/[abc]/  : 字符类。 将a 或 b 或 c归为一类，满足任意一个即可.

  说人话： 检测字符串中有没有 a 或 b 或 c
  
/[^abc]/ : 反向类。 将不是a 或 不是b 或 不是c的归为一类，满足任意一个即可。

  说人话： 检测字符串中有没有除 abc之外的任意字符

    console.log(/[abc]/.test('a1b2c3'))//true
    console.log(/[abc]/.test('a123'))//true
    console.log(/[abc]/.test('abc123'))//true
    console.log(/[abc]/.test('123456'))//false

    console.log(/[^abc]/.test('a1b2c3'))//true
    console.log(/[^abc]/.test('a123'))//true
    console.log(/[^abc]/.test('abc123'))//true
    console.log(/[^abc]/.test('123456'))//true
    console.log(/[^abc]/.test('abcabc'))//false

六.范围类

    1.范围类 :    /[0-9]/ : 检测有没有数字
        
        /[a-z]/ : 检测有没有小写字母
        
        /[A-Z]/ : 检测有没有大写字母


    2.范围类特点
        2.1 范围类是一个闭区间 :  /[5-8]/ : 包含5，也包含8
        2.2 范围类可以连写:  /[0-9a-zA-Z]/ : 大小写字母+数字
        2.3 范围类一定是 右边 > 左边 （依据ASCII码）
            [5-8] : 正确
            [8-5] : 报错

       console.log(/[5-8]/.test('5aaaa'))//true
       console.log(/[5-8]/.test('8aaaa'))//true
       console.log(/[5-8]/.test('9aaaa'))//false

七.预定义类

  /*预定义类： 正则表达式提供好的用来匹配常见的字符类
     预定义类           等价类                                     含义
         .                 [^\r\n]                   除了回车和换行之外的所有字符
       \d                 [0-9]                      数字字符
       \D                 [^0-9]                     非数字字符
       \s                 [\f\n\r\t\v]               空白字符
       \S                 [^\f\n\r\t\v]              非空白字符
       \w                 [a-zA-Z_0-9]               单词字符（字母、下划线、数字）
       \W                 [^a-zA-Z_0-9]              非单词字符
    */

        //   /\d/ : 检测有没有数字   与 /[0-9]/ 等价
        console.log( /\d/.test('abc123') )//true
        console.log( /\d/.test('abc') )//false

        //   /\w/ : 单词字符   /[0-9a-zA-Z_]/
        console.log( /\w/.test('abc_') )//true
        console.log( /\w/.test('+-*/[]()') )//false

八.边界

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <script>
    /* 
    原义文本字符： /abc/    检测字符串abc
    字符类     :   /[abc]/  检测a或b或c任意字符
    反向类     :   /[^abc]/  检测不是 a或b或c任意字符
    边界       :   /^abc$/    在正则中，有时候一个元字符可能有两种含义(类似于js的+)
    */

    /*边界 
    1.开头边界: /^abc/   
      正确含义： 检测 以a开头 +  bc的字符串   （^只对a检测）
      错误含义： 检测 以abc开头的字符串    (^把abc当做整体)
    */

    console.log(/^abc/.test('a1b2c3'))//false
    console.log(/^abc/.test('abc123'))//true
    console.log(/^abc/.test('456abc'))//false
    console.log(/^abc/.test('abc123abc'))//true
    console.log(/^abc/.test('abcabc'))//true

    /* 
    2.结尾边界: /abc$/
      正确含义 :   ab + 以c结尾的字符串   （$只对c检测）
      错误含义:    以abc结尾   ($把abc当做整体)
    */

    console.log(/abc$/.test('a1b2c3'))//false
    console.log(/abc$/.test('abc123'))//false
    console.log(/abc$/.test('456abc'))//true
    console.log(/abc$/.test('abc123abc'))//true
    console.log(/abc$/.test('abcabc'))//true


    /* ***3.严格匹配： 开头边界与结尾边界同时使用
    /^abc$/   : 只有唯一答案 ，就是abc本身
      正确含义 :  以a开头 + b + 以c结尾   (^检测a开头, $检测c结尾)
      错误含义 :  以abc开头，以abc结尾
    */


    console.log(/^abc$/.test('a1b2c3'))//false
    console.log(/^abc$/.test('abc123'))//false
    console.log(/^abc$/.test('456abc'))//false
    console.log(/^abc$/.test('abc123abc'))//false
    console.log(/^abc$/.test('abcabc'))//false
    console.log(/^abc$/.test('abc'))//true



  </script>
</body>

</html>

九.量词

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 为什么要有量词
        需求：检测一个字符串有没有11个数字
            /\d\d\d\d\d\d\d\d\d\d\d/ : 检测11个数字
        */

      /* 
        量词作用： 检测字符出现的次数
            ?                       出现零次或一次（最多出现一次 <=1）
            +                       出现一次或多次（至少出现一次 >=1）
            *                       出现零次或多次（任意次）
            {n}                     出现n次
            {n,m}                   出现n-m次
            {n,}                    出现至少n次（>=n）
        */

      // ?和+区别
      console.log('123456789'.replace(/\d?/,'X'))//X23456789
      console.log('123456789'.replace(/\d+/,'X'))//X

      // +和*区别
      console.log('a123456789'.replace(/\d+/,'X'))//aX
      console.log('a123456789'.replace(/\d*/,'X'))//Xa123456789

      // {5}  {5,8}  {5,}
      console.log('a123456789'.replace(/\d{5}/,'X'))//aX6789
      console.log('a123456789'.replace(/\d{5,8}/,'X'))//aX9
      console.log('a123456789'.replace(/\d{5,}/,'X'))//aX

    </script>
  </body>
</html>

十.分组

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 元字符
      []  \ .  ^ $  ? + * {} | ()
      */

       /* () 在正则中有两种含义
        1.分组 : 把多个字符归为一组，用于量词
        2.提升优先级 : 让 | 只匹配小括号内部的字符，提升|的优先级
        需求:检测字符串中有没有  love或live
        /lo|ive/: 检测 lo或ive
        /l(o|i)ve/: 检测  l + o或i + ve

        */
        
        // 需求:检测字符串中出现三次  love
        // /love{3}/ :含义  lov + e出现三次
        // /(love){3}/: 含义  (love)出现三次

        // 分组
        console.log(/love{3}/.test('loveeeeee123456'))//true
        console.log(/love{3}/.test('lovelovelove'))//false

        console.log(/(love){3}/.test('loveeeeee123456'))//false
        console.log(/(love){3}/.test('lovelovelove'))//true

        // 提升优先级
        console.log(/lo|ive/.test('lo123'))//true
        console.log(/lo|ive/.test('live'))//true

        console.log(/l(o|i)ve/.test('lo123'))//false
        console.log(/l(o|i)ve/.test('live'))//true
    </script>
  </body>
</html>

十一.修饰符

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <script>
    /* 
    1.修饰符 ： 对正则表达式起到修饰的作用
        g : global,全局匹配
        i : intensity, 不区分大小写
    2.修饰符语法：  /正则表达式/修饰符
        * new RegExp('正则','修饰符')
    */

    // g:global  全局匹配
    // (1)/a/:默认情况下,正则只能匹配第一个字符
    console.log('a123456aaAA'.replace(/a/, 'X'))//X123456aaAA
    // (2)/a/g:匹配所有的a
    console.log('a123456aaAA'.replace(/a/g, 'X'))//X123456XXAA


    // i: intensity  不区分大小写
      // (1) / A /: 默认情况下, 正则区分大小写
    console.log('a123456aaAA'.replace(/A/, 'X'))//a123456aaXA
      // (2) / A / i: 不区分大小写, a和A都可以
    console.log('a123456aaAA'.replace(/A/i, 'X'))//X123456aaAA

    // 修饰符是可以同时使用的
      // / a / ig: 不区分大小写 + 全局匹配
    console.log('a123456aaAA'.replace(/A/ig, 'X'))// X123456XXXX


  </script>
</body>

</html>

十二.常用正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <input type="text" placeholder="请输入手机号">
    <script>
        /* 
        1.手机号正则
            /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        */    

        /* 2.验证码
            /^\d{6}$/
         */

        /* 3.账号密码 6-20位： 大小写字母, 下划线_ 
            /^\w{6,20}$/
        */

        /* 4.邮箱
            /^\w+[@]\w+\.\w+(\.\w+)?$/
        */
    </script>
</body>
</html>

十三.总结

正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑.

正则表达式相关介绍