01-正则表达式语法介绍(了解)

 

1.1-正则表达式介绍

• • 5.学习目标
  • • 1.可以使用正则表达式验证常用表单文本（手机、邮箱、qq、座机、姓名）
    • 2.了解正则表达式在开发中的一些应用场景
• 正则表达式图形化网站：regexper.com/
• • 正则表达式非常的晦涩难懂，使用图形可以更好的方便理解，正所谓一图胜千言

 

 

        1.正则表达式 ：RegExp (regular expression)  是ECMAScript内置对象

        2.作用 ：对 字符串进行逻辑匹配 运算

        3.使用流程 ：

            (1)创建正则对象 :  new RegExp(/正则表达式/);

            (2)test('字符串') ： 对字符串进行逻辑匹配运算

     

 

        /* 

        1.正则表达式 ：是一个对 字符串进行逻辑匹配运算 的对象

            a. 正则是内置对象 ： 存储一些属性和方法

            b. 表达式 :  对字符串 进行逻辑匹配 运算

 

<script>
       
        
        2.使用流程 ：两个步骤
        */


        //(1)调用构造函数，创建正则对象
        let reg =  new RegExp(/a/);


        //(2)调用test方法，对字符串进行运算   true:符合规则   false:不符合
        console.log(  reg.test('abcdefg') );
        console.log(  reg.test('123456') );




        /* 了解： 正则表达式字面量写法  /正则表达式/ */


        console.log(  /a/.test('我爱你') );//false
    </script>

1.2-元字符与原义文本字符

        一个正则表达式主要由两部分组成

            1.原义文本字符 ： 就是字符本身的含义，千万别想多了

            2.元字符 ： 改变了字符串本身的含义 （相当于js的关键字）

                . \ | [ ] { } ( ) + ? * $ ^

     

   <script>
       
        //1.原义文本字符 ： 就是字符本身的含义，千万别想多了
        /*  /abc/ :  含义，就是检查字符串中有没有abc。 别想多了
                不是说有a或者有b或者有c，也不是说有a 和 b 和 c
        */


        console.log(/abc/.test('a123'));//false
        console.log(/abc/.test('ab123c'));//false
        console.log(/abc/.test('abc123'));//true

    console.log(/武汉/.test('胜之不武'))
    console.log(/武汉/.test('汉王胜之不武'))
    console.log(/武汉/.test('武汉黄鹤楼'))
        
    
    </script>

1.3-字符类

//1.一般情况下，正则表达式的一个字符就是对于字符串的一个字符，这样处理比较方便

    //例如：  /abc/  ： 含义就是匹配字符串 abc

 

    //2.有时候我们并不想只匹配一个字符，而是想要匹配符合某一类特征的字符，这时就可以使用字符类

 

/*2.创建简单字符类：  [ ]
        * 这里类指的是符合某些特征的对象，只是一个泛指，而不是指某个字符
        * 例如正则表达式：  /[abc]/ :把字符a或b或c归为一类，可以匹配这类的字符
        * /[abc]/ : 含义是，匹配字符串中只要有 a或者b或者c任何一个就是true
     */
    console.log ( /[abc]/.test ( "eeeeeeeffffffffff" ) );//false
    console.log ( /[abc]/.test ( "eaeeeeeeffffffffff" ) );//true
    console.log ( /[abc]/.test ( "ebeeeeeeffffffffff" ) );//true
    console.log ( /[abc]/.test ( "eceeeeeeffffffffff" ) );//true


    /*3.反向类（负向类）： ^
        * 反向类意思是不属于某类的内容
        * 例如正则表达式： [^abc] ：含义是:不是字符a或b或c的内容
     */
    //只要有任何一个字符不是a或者b或者c，就满足条件
    console.log ( /[^abc]/.test ( "1abacbc" ) );//true
    console.log ( /[^abc]/.test ( "aaaabbbbccccc" ) );//false
    console.log ( /[^abc]/.test ( "aaaabbbbccccce" ) );//true

1.4-范围类

//需求：使用字符类匹配数字

    // 正则表达式: [0123456789] : 含义是，有任何数字的内容

    //弊端：表达式冗余，假如我要匹配字母，那就要写 [abcdefg...........xyz],非常麻烦

    //如何解决冗余问题? ——使用范围类

console.log ( /[0123456789]/.test ( "1avcsvs" ) );//true

console.log ( /[0123456789]/.test ( "aaaaa" ) );//false

 

    /*1.范围类：   -

          [0-9] : 含义是， 0-9之间的任意字符

[a-z]: 含义是，a-z之间的任意字符

[A-Z]:含义是，A-Z之间的任意字符

     * 注意点

        a.范围类是一个闭区间，  [a-z]，这个范围包含字符a和z本身

        b.在[]内部是可以连写的， [0-9a-zA-Z] : 含义是，包含数字0-9，或者a-z，或者A-Z任意字符

        c. -右边一定要大于左边，例如 [5-8],这是合法的表示5-8之间的数字，不能写[8-5],程序会报错（正则语法错误）

     */

 

   //示例1
    console.log ( /[0-9]/.test ( "1acasdas" ) );//true  只要有数字就满足
    console.log ( /[0-9]/.test ( "acasdas" ) );//false
    //示例2
    console.log ( /[a-z]/.test ( "a6666ABC" ) );//true  只要有任何小写字母就满足
    console.log ( /[a-z]/.test ( "6666ABC" ) );//false
    //示例3
    console.log ( /[A-Z]/.test ( "Aa6666" ) );//true  只要有任何大写字母就满足
    console.log ( /[A-Z]/.test ( "a6666" ) );//false
    //示例4
    console.log ( /[0-9a-zA-Z]/.test ( "a.........[][]]" ) );//true  只要有任何字母字符或数字字符就满足
    console.log ( /[0-9a-zA-Z]/.test ( "+-*/......[]" ) );//false
    //示例5： 匹配数字 0-9 范围字符 或 - 字符
    //解决方案：在最后面写上 -
    console.log ( /[0-9-]/.test ( "-abcdefh" ) );//

1.5-预定义类 . /

/*预定义类： 正则表达式提供好的用来匹配常见的字符类

 

预定义类           等价类                                     含义**

.                 [^\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]              非单词字符

举个栗子

//1.  . 除了回车和换行之外的所有字符
    console.log ( /./.test ( "\r\n" ) );//false
    console.log ( /./.test ( "" ) );//false 空字符
    console.log ( /./.test ( " " ) );//true 空格字符
    console.log ( /./.test ( "\t爱你么么哒" ) );//true


    //2. \d   数字字符(只要有数字即可)
    console.log ( /\d/.test ( "123abc" ) );//true
    console.log ( /\d/.test ( "abc" ) );//false


    //3. \D  非数字字符（只要没有数字即可）
    console.log ( /\D/.test ( "123abc" ) );//true
    console.log ( /\D/.test ( "123" ) );//false


    //4.  \s   空白字符(只要有空白字符即可)
    console.log ( /\s/.test ( "\nabc" ) );//true
    console.log ( /\s/.test ( "abc" ) );//false


    //5.  \S  非空白字符（只要有非空白字符即可）
    console.log ( /\S/.test ( "\nabc" ) );//true
    console.log ( /\S/.test ( "abc" ) );//true
    console.log ( /\S/.test ( "" ) );//false
    console.log ( /\S/.test ( "\t\n" ) );//false


    //6  \w  单词字符（只要有字母、数字、下划线即可）
    console.log ( /\w/.test ( "abc123_中国" ) );//true
    console.log ( /\w/.test ( "中国" ) );//false


    //7  \W 非单词字符（只要有除字母、数字、下划线之外的任意字符即可）
    console.log ( /\W/.test ( "abc123_中国" ) );//true
    console.log ( /\W/.test ( "中国" ) );//true
    console.log ( /\W/.test ( "abc123_" ) );//false

1.6-边界

重点:严格匹配:  ^字符串$`

 

• 例如：  ^abc$ : 含义是，字符串必须以a开头，中间必须是b，结尾必须是c

  - 满足该条件的只有一个字符串： abc

 /*正则表达式元字符含义可能不止一种，会有多种含义。 （类似于js的 + ）

        

        /abc/ : 原义文本字符。 检测字符串有没有abc 

        /[abc]/ : 字符类。 检测字符串是否有 a或b或c 其中之一。

        /[^abc]/ : 反向类。 检测字符串是否有 不是a或 不是b或 不是c 任意字符。

            ^ 写在 [] 里面就是反向类

        /^abc/ : 开头边界。 检测字符串是不是a开头

            ^ 单独使用就是开头边界。 边界不是检测字符串，而是检测位置的。

        */

 

      /*边界：正则表达式提供了几个常用的边界匹配字符

            边界字符            含义

                ^               以xxxx开头

                $               以xxxx结束

        */

 

      //1.  开头边界，以xxx开头
      /*   
        /^abc/ 
            正确含义：  a(开头) + bc（a的后面一定要是bc）
            错误含义： 以abc开头 (虽然这个正则表面上必须是前面是abc的才符合，但是这个正则就不能理解为以abc开头)
        */


      console.log(/^abc/.test('a123abcabc')) //false
      console.log(/^abc/.test('a1b1c1')) //false
      console.log(/^abc/.test('abcabc')) //true


      //2. 结尾边界，以xxx结尾
      /* 
        /abc$/
            正确含义： ab + c(c结尾位置，前面是ab)
            错误含义： 以abc结尾（虽然这个正则表面上必须是abc在结尾位置才符合，但是这个正则就不能理解为以abc结尾）
      
      */
      console.log(/abc$/.test('a123abcabc')) //true
      console.log(/abc$/.test('ab123c')) //false
      console.log(/abc$/.test('abc123')) //false
      console.log(/abc$/.test('abcabc')) //true


      /*3.正则严格匹配 ： 同时添加开头边界与结尾边界 
        /^abc$/ 
            正确含义： a(开头) + b + c(结尾)
                * 世界上只有唯一的一个字符满足条件：  abc
            错误含义： 以abc开头 且 以abc结尾的字符
      */
      console.log(/^abc$/.test('a123abcabc')) //false
      console.log(/^abc$/.test('ab123c')) //false
      console.log(/^abc$/.test('abc123')) //false
      console.log(/^abc$/.test('abcabc')) //false
      console.log(/^abc$/.test('abc')) //true

1.7-量词

*/量词： 表示字符出现的数量

 

    量词                  含义

    ?                       出现零次或一次（最多出现一次）

    +                       出现一次或多次（至少出现一次）

    *                       出现零次或多次（任意次）

    {n}                     出现n次

    {n,m}                  出现n-m次

    {n,}                     出现至少n次（>=n）

   

 

/需求：匹配一个连续出现10次数字的字符
    //正则表达式:   /\d\d\d\d\d\d\d\d\d\d/
    //弊端：表达式冗余    解决方案：使用量词
    console.log ( /\d\d\d\d\d\d\d\d\d\d/.test ( "1234567abc" ) );//false
    console.log ( /\d\d\d\d\d\d\d\d\d\d/.test ( "1234567890abc" ) );//true

    //需求：匹配一个连续出现10次数字的字符
    console.log ( /\d{10}/.test ( "1234567abc" ) );//false
    console.log ( /\d{10}/.test ( "1234567890abc" ) );//true

1.8-分组

/* () 在正则中有两种含义

     1.分组 : 把多个字符归为一组，用于量词

     2.提升优先级 : 让 | 只匹配小括号内部的字符，提升|的优先级

     */

    /* 
    1.分组 : 把多个字符归为一组，用于量词
      需求：检测 三次 love
    /love{3}/ :  检测  lov + e出现3次
    /(love){3}/ :  检测  (love) 出现三次
    */


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


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


    /* 
    2.提升优先级 : 用于 |
      需求： 检测 love 或 live
    /lo|ive/ :  检测 lo 或 ive
    /l(o|i)ve/ :  检测 l + o或i + ve
    */


    console.log(/lo|ive/.test('lo123'))//true
    console.log(/lo|ive/.test('ive123'))//true
    console.log(/lo|ive/.test('love123'))//true
    console.log(/lo|ive/.test('live123'))//true


    console.log(/l(o|i)ve/.test('lo123'))//false
    console.log(/l(o|i)ve/.test('ive123'))//false
    console.log(/l(o|i)ve/.test('love123'))//true
    console.log(/l(o|i)ve/.test('live123'))//true

1.9-修饰符

/*修饰符：影响整个正则规则的特殊符号

        书写位置：  /pattern/modifiers(修饰符)

        i (intensity)：大小写不敏感（不区分大小写）

        g (global) : 全局匹配

     */

 

    //1.   i：不区分大小写
    var str = 'ABCabcdefgaaaAAA';
    console.log ( str.replace ( /a/, "X" ) );//ABCXbcdefgaaaAAA   //默认区分大小写
    console.log ( str.replace ( /a/i, "X" ) );//XBCabcdefgaaaAAA


    //2.  g:全局匹配
    var str = 'ABCabcdefgaaaAAA';
    console.log ( str.replace ( /a/, "X" ) );//ABCXbcdefgaaaAAA   //默认匹配第一个就停止
    console.log ( str.replace ( /a/g, "X" ) );//ABCXbcdefgXXXAAA   //默认匹配第一个就停止
    //修饰符可以同时使用多个
    console.log ( str.replace ( /a/ig, "X" ) );//XBCXbcdefgXXXXXX

02-常用正则表达式

/* 
        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+)?$/
   
        */