前端day21-JS正则表达式

原创

帅的一麻皮

修改于 2020-05-12 10:05:57

1.8K0

修改于 2020-05-12 10:05:57

文章被收录于专栏：前端与Java学习前端与Java学习

01-正则表达式（RegExp）介绍
1.什么是正则表达式
正则表达式是一个用于对字符串实现逻辑匹配运算的对象
2.正则表达式的作用
按照某种规则来匹配字符串，而正则表达式就是制定这个规则
3.如何使用正则表达式
(1)创建正则表达式对象
(2)开始匹配 `使用test()`方法
5.学习目标
1.可以使用正则表达式验证常用表单文本（手机、邮箱、qq、座机、姓名）
2.了解正则表达式在开发中的一些应用场景

正则表达式图形化网站：https://regexper.com/
- 正则表达式非常的晦涩难懂，使用图形可以更好的方便理解，正所谓一图胜千言

<script>
        /* 
        js内置对象 ： Math Date Array Object  String Number Boolean Evenets Fucntion RegExp

        RegExp ：（regular expression） 正则表达式
        */     

        /* 
        1.RegExp（正则表达式）作用 ：
            内置对象 ： 是一种数据类型，存储了一些属性与方法
            表达式 ：对字符串做逻辑运算的
            总结：正则表达式是一个对字符串进行逻辑匹配运算的对象
        2.如何使用？
            (1)创建正则表达式 ： new RegExp(/正则表达式/)
            (2)使用官方api ： test('字符串')
                * 检测这个字符串是否符合规则。 true：符合  false：不符合
        */
        
        var reg = new RegExp(/a/);
        console.log(reg.test('123456'));//false
        console.log(reg.test('abcdefg'));//true

        //3.正则直接量：   /正则表达式/
        console.log(/A/.test('abcd'));//false
        console.log(/A/.test('abcdA'));//true
        
    </script>

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

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

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('你好'));//false
          console.log(/真好/.test('天气真的好'));//false
          console.log(/真好/.test('天气，真好！'));//true

    </script>

1.2-字符类

1.字符类： /[abc]/ 含义：只要字符串中有 a 或者有 b 或者有 c 就满足条件

2.负向类(反向类)：/[^abc]/ 含义：只要有任何一个字符不是a或者b或者c，就满足条件


        //   /[abc]/ 含义：有a,b,c这三个字符任意一个即可
        console.log(/[abc]/.test('a1111')); //true
        console.log(/[abc]/.test('b22222')); //true
        console.log(/[abc]/.test('c33333')); //true
        console.log(/[abc]/.test('123456')); //false
        console.log(/[abc]/.test('abcdef')); //true

        console.log('----------------------------------');

        // /[^abc]/ 含有abc这三个字符以外的任意字符即可
        console.log(/[^abc]/.test('a1111')); //true      含有1
        console.log(/[^abc]/.test('b22222')); //true     含有2
        console.log(/[^abc]/.test('c33333')); //true     含有3
        console.log(/[^abc]/.test('abc123456')); //true  含有123456
        console.log(/[^abc]/.test('abcdef')); //true     含有def
        console.log(/[^abc]/.test('aaabbbccc')); //false 只有abc没有别的字符

1.3-范围类

如果我们想匹配字母或者数字使用字符类：（弊端：表达式冗余）

正则表达式: /[0123456789]/
正则表达式: /[abcdefg...........xyz]/

范围类：

/[0-9]/ 含义：有0到9之间的任意字符既满足条件
/[a-z]/ 含义：有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],程序会报错（正则语法错误）
- 例如[5-8]，检测有没有5678这四个数
- 例如[8-5]，程序报错，这是错误的正则语法
- 例如[8-90-5],检测是否含有89012345任意一个

        //1.1  /[0-9]/  有0到9之间的任意字符（数字） 既满足条件
        console.log(/[0-9]/.test("1acasdas")); //true  
        console.log(/[0-9]/.test("acasdas")); //false

        //1.2  /[a-z]/  有a到z之间的任意字符（字母） 既满足条件
        console.log(/[a-z]/.test("a6666ABC")); //true  
        console.log(/[a-z]/.test("6666ABC")); //false

        //1.3  /[A-Z]/  有A到Z之间的任意字符（字母） 既满足条件
        console.log(/[A-Z]/.test("Aa6666")); //true  
        console.log(/[A-Z]/.test("a6666")); //false

        console.log(/[0-9a-zA-Z]/.test('sb'));//true
        console.log(/[0-9a-zA-Z]/.test('奥利给'));//false

1.4-预定义类

正则表达式提供好的用来匹配常见的字符串（作者提前写好的正则，开发者可以直接使用）

预定义类等价类含义

. [^\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.5-边界

严格匹配: ^字符串$

例如： ^abc$ : 含义是，字符串必须以a开头，中间必须是b，结尾必须是c
- 满足该条件的只有一个字符串： abc

 <script>
        /*边界：正则表达式提供了几个常用的边界匹配字符
            边界字符            含义
            ^                  以xxxx开头
            $                  以xxxx结束
            \b                  单词边界
            \B                  非单词边界
        */

        /* 
            1.以xxx开头： /^abc/
                注意点：元字符含义不止一种
                /[^abc]/：反向类    有abc以外的任意字符既满足
                /^abc/：边界        以a开头后面马上接着bc
         */

        console.log(/^abc/.test('123abc')); //false  不是以a开头
        console.log(/^abc/.test('a1b1c1')); //false  以a开头但是后面没有跟bc
        console.log(/^abc/.test('abc123')); //true

        /* 
           2.以xxx结尾：/abc$/ 
               含义：ab+c(末尾处)
         */
        console.log(/abc$/.test('123abc')); //true
        console.log(/abc$/.test('123ab1c')); //false
        console.log(/abc$/.test('abc123')); //false


        /* 
            重点：严格匹配 ***
                /^abc$/ ：以a开头后面接bc，c在结尾处
                所以唯一满足的字符串只有：abc
         */
         console.log(/^abc$/.test('abc1'));//false
         console.log(/^abc$/.test('1abc'));//false
         console.log(/^abc$/.test('abcabc'));//false
         console.log(/^abc$/.test('abc'));//true

         /* 
            3. 边界：限制位置   单词：字母+数字+下划线
            \b      单词边界
            \B      非单词边界
          */
        var str1 = 'This is a boy'.replace(/\bis/,"X");//将是单词为is的替换为X
        console.log(str1);//This X a boy
        var str2 = 'This is a boy'.replace(/\Bis/,"X");//将不是单词的is替换为X
        console.log(str2);//ThX is a boy

1.6-量词（表示字符出现的数量）

需求：匹配一个连续出现10次数字的字符

正则表达式: /\d\d\d\d\d\d\d\d\d\d/

弊端：表达式冗余解决方案：使用量词

        /*
        量词                  含义
        ?                       出现零次或一次（最多出现一次）
        +                       出现一次或多次（至少出现一次）
        *                       出现零次或多次（任意次）
        {n}                     出现n次
        {n,m}                  出现n-m次
        {n,}                     出现至少n次（>=n）
         */

        //测试：test无法了解 量词之间的区别
        console.log(/\d?/.test("1234567"));//true
        console.log(/\d+/.test("1234567"));//true
        console.log(/\d*/.test("1234567"));//true
        console.log(/\d{5}/.test("1234567"));//true
        console.log(/\d{5,10}/.test("1234567"));//true
        console.log(/\d{5,}/.test("1234567"));//true

        //使用字符串replace方法：可以了解每一个量词的区别
        var str = 'a123456789';
        console.log(str.replace(/\d?/,'X'));//Xa123456789
        console.log(str.replace(/\d+/,'X'));//aX
        console.log(str.replace(/\d*/,'X'));//Xa123456789
        console.log(str.replace(/\d{5}/,'X'));//aX6789
        console.log(str.replace(/\d{5,10}/,'X'));//aX
        console.log(str.replace(/\d{5,}/,'X'));//aX
        console.log("a1234".replace(/\d{5,}/,'X'));//a1234

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

1.7-分组

1. () 这个元字符有三个含义

a.分组：使量词作用于分组
- * 量词只能作用于一个字符，如果想作用与多个字符，就要使用分组（将多个字符当成一组）
b.提升优先级：通常与元字符 | 一起使用
c.反向引用

2. |或

* | 默认作用于两边的所有字符，如果只想作用与指定字符，则可以使用() 来提升优先级

        /* 
            1.分组：将多个字符 分为一组(当做一个整体)
                默认量词只能用于一个字符，如果希望用于多个字符，则可以使用分组
         */

         //需求：匹配现需出现三次 love 的字符串
         // 错误写法：/love{3}/ 含义是 lov+e(出现三次)
         // 正确写法：/(love){3}/ 含义是 (love)出现三次

         console.log(/(love){3}/.test("lovelovelove"));//true
         console.log(/(love){3}/.test("loveeeeee"));//false


        /* 
            2.提升优先级
         */
        /* 
            需求：匹配 love 或者 live
            //错误写法：/lo|ive/ 含义是 有lo或者ive
            //正确写法：/l(o|i)ve/ 含义是 l+i或者o+ve
         */
        console.log(/l(o|i)ve/.test("my live"));//true


        /* 
            3.反向引用:正则表达式在进行匹配的时候，会存储小括号中匹配到的数据，放入静态成员中
                静态成员：RegExp.$1 - RegExp.$9
         */
        
        //需求：将日期格式为 yyyy-mm-dd的字符串 变成 mm/dd/yyyy 格式
        // 2020-03-01  改为 03/01/2020

        var str ='2020-03-01'.replace(/(\d{4})-(\d{2})-(\d{2})/,'$1/$2/$3');
        console.log(str);//2020/03/01
        console.log(RegExp.$1);//2020
        console.log(RegExp.$2);//03
        console.log(RegExp.$3);//01

1.8-修饰符

影响整个正则规则的特殊符号

i (intensity)：大小写不敏感（不区分大小写）
g (global) : 全局匹配
m(multiple) : 检测换行符，使用较少，主要影响字符串的开始^与结束$边界

        //1.不区分大小写 /a/i 
        console.log('123AAaaAA'.replace(/a/, "X")); //123AAXaAA
        console.log('123AAaaAA'.replace(/a/i, "X")); //123XAaaAA

        //2.   g：全局匹配  /a/g
        console.log('123AAaaAA'.replace(/a/, "X")); //123AAXaAA
        console.log('123AAaaAA'.replace(/a/g, "X")); //123AAXXAA

        /* 
           注意点：修饰符可以写多个
         */
        console.log('123AAaaAA'.replace(/a/gi, "X")); //123XXXXXX

        //3.检测换行符 /a/m   需要和边界一起使用才有结果
        var str = "我爱我学习\n我爱我学习\n我爱我学习";
        console.log(str);

        //需求：把每一行的开头的我 替换成 你
        // console.log(str.replace(/我/,'你'));//只能替换第一个我
        // console.log(str.replace(/我/g,'你'));//替换所有的我
        // console.log(str.replace(/^我/g,'你'));//字符串中每一行第一个其实是个\n换行符

        //所以我们要加上m
        console.log(str.replace(/^我/gm,'你'));

正则表达式test与exec方法介绍（了解）

    //正则表达式对象RegExp有两个常用方法： test    exec

    /*1.RegExp.prototype.text(str)
    作用：检测参数str是否满足正则表达式的匹配规则
    返回值：true 可以匹配   false：不能匹配
     */
    //示例：检测一个字符串中有没有单词字符
    console.log ( /\w/.test ( "a" ) );//true
    console.log ( /\w/.test ( "=" ) );//false

    /*1.RegExp.prototype.exec(str)
    作用：查看正则表达式匹配str的结果（是第几个字符满足匹配规则的，是哪个字符满足匹配规则等）
    返回值：null(无法匹配)   或者  数组（存放匹配信息）
        返回值数组
            特点：默认情况下，每一次调用exec只会返回第一个匹配的字符串信息，如果想要返回所有匹配信息
                a.需要设置正则表达式为全局匹配
                b.需要执行多次exec方法
           属性介绍
                index:匹配字符的下标
                下标：0：匹配字符
                        1-n：后面的下标只对()分组有效，没有分组则数组只有一个元素
     */

    //示例1：找出第一个匹配字符中包含  数字+单词 + 单词字符的内容
    //默认：只能找到第一个匹配的字符
    var str = "1aasjdg2bbjahsgd3cc";
    var reg = /\d\w\w/;
    var resArr = reg.exec ( str );
    console.log ( resArr );//["1aa", index: 0, input: "1aasjdg2bbjahsgd3cc", groups: undefined]

    //示例2：找出所有匹配字符中包含   数字+单词 + 单词字符的内容
    var str = "1absjdg2cdjahsgd3ef";
    var reg = /\d\w\w/g;//需要设置全局匹配

    var resArr = reg.exec ( str );
    // console.log ( resArr );//["1ab", index: 0, input: "1absjdg2cdjahsgd3ef", groups: undefined]
    // //每一次匹配之后，reg会记录当前已经匹配的字符，下一次再执行exec的时候就会往后面匹配
    // resArr = reg.exec(str);
    // console.log ( resArr );//["2cd", index: 0, input: "1absjdg2cdjahsgd3ef", groups: undefined]
    // resArr = reg.exec(str);
    // console.log ( resArr );//["3ef", index: 0, input: "1absjdg2cdjahsgd3ef", groups: undefined]

    //以上代码可以简写成
    while(resArr){//只要resArr存在，就继续执行exec
        console.log ( resArr );
        resArr = reg.exec(str);
    };

    //示例3：如果正则有分组，则数组从1下标开始获取分组对应的字符
    var reg1 = /\d(\w)(\w)/;
    console.log ( reg1.exec ( str ) );//["1ab", "a", "b", index: 0, input: "1absjdg2cdjahsgd3ef", groups: undefined]

正则表达式贪婪模式与非贪婪模式(了解)

    //贪婪模式与非贪婪模式一般用于量词

    //1.贪婪模式：正则表达式在匹配成功的前提下，尽可能多的匹配

    var reg = /\d{3,6}/;//匹配3-6位数字

    console.log ( "1234567890".replace ( reg, "X" ) );//X7890   (正则表达式会匹配6位数字)

    //2.非贪婪模式:正则表达式匹配成功的前提下，尽可能少的匹配
    //语法：在量词后面加上 ?

    var reg1 = /\d{3,6}?/;//匹配3-6位数字
    console.log ( "1234567890".replace ( reg1, "X" ) );//X4567890   (正则表达式会匹配3位数字)

常用正则表达式总结

传送门:https://www.cnblogs.com/fozero/p/7868687.html

比较常用

1.Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
2.手机号码：^(13[0-9]|14[57]|15[0-9]|17[067]|18[0-9])\d{8}$
3.国内电话号码(0511-4405222、021-87888822)：^0\d{2,3}[-]\d{7,8}$
4.身份证号( 位、位数字)：^\d{* }|\d{* }$
5.密码强度
- 只有大小写字母:^([a-z].*[A-Z])|([A-Z].*[a-z])$
- 大小写字母与数字：^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$
- 大小写字母+数字+下划线：^[A-Za-z0-9]+[_][A-Za-z0-9]*
6.电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)
- ^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$
7.域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,* }(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,* })+/.?
8.InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

可能会用到

禁止输入含有~的字符：~\x* + 三、特殊需求表达式
Email地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
域名：a-zA-Z0-9{0, }(/.a-zA-Z0-9{0, })+/.?
InternetURL：[a-zA-z]+://\s 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=])?$
手机号码：^( [0-9]| [5|7]| [0|1|2|3|5|6|7|8|9]| [0|1|2|3|5|6|7|8|9])\d{8}$
电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$
国内电话号码( - 2、 1- )：\d{3}-\d{8}|\d{4}-\d{7}
身份证号( 位、位数字)：^\d{ }|\d{ }$
短身份证号码(数字、字母x结尾)：^([0-9]){7, }(x|X)?$ 或 ^\d{8, }|[0-9x]{8, }|[0-9X]{8, }?$
帐号是否合法(字母开头，允许5- 字节，允许字母数字下划线)：^a-zA-Z{4, }$
密码(以字母开头，长度在6~ 之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5, }$
强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8- 之间)：^(?=.\d)(?=.[a-z])(?=.[A-Z]).{8,* }$
日期格式：^\d{4}-\d{1,2}-\d{1,2}
一年的 个月( ～ 和1～ )：^(0?[1-9]|1[0-2])$
一个月的天( ～ 和1～ )：^((0?[1-9])|((1|2)[0-9])| | )$
钱的输入格式：
1.有四种钱的表示形式我们可以接受:" 0. " 和 " , 0. ", 和没有 "分" 的 " 0" 和 " , 0"：^1-9*$
2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|1-9*)$
3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?1-9*)$
4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$
5.必须说明的是,小数点后面至少应该有1位数,所以" ."是不通过的,但是 " " 和 "* .2" 是通过的：^[0-9]+(.[0-9]{2})?$
6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$
7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
8.1到3个数字,后面跟着任意个逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+.x|X[l|L]$
中文字符的正则表达式：[\u4e* -\u9fa5]
双字节字符：\x* -\xff (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
空白行的正则表达式：\n\s*\r (可以用来删除空白行)
HTML标记的正则表达式：<(\S?)>>.?</\1>|<.? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
首尾空白字符的正则表达式：^\s|\s$或(^\s)|(\s$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
腾讯QQ号：1-9{4,} (腾讯QQ号从 0开始)
中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
IP地址：\d+.\d+.\d+.\d+ (提取IP地址时有用)
密码强度:
只有大小写字母
- ^([a-z].[A-Z])|([A-Z].[a-z])$
大小写字母和数字
- ^([a-z].[0-9])|([A-Z].[0-9])|[0-9].*[a-zA-Z]$
大小写字母、数字和下划线
- ^[A-Za-z0-9]+_*

思维导图：

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

正则表达式

编程算法

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

正则表达式

编程算法

登录后参与评论

0 条评论

热度