正则表达式

一个小案例:为何要学习正则

{
    let str = "asldkfjal123s23sdfs11";
    let arr = [];
    // 找到所有的数字,并且放在一个数组里面[123,23,11];
    {
        function getNumber(str) {
            let arr = [];
            let temp = "";
            for (let i = 0; i < str.length; i++) {
                if (!isNaN(str[i])) {
                    temp += str[i];
                } else {
                    if (temp !== "")
                        arr.push(parseInt(temp));
                    temp = "";
                }
            }
            if (temp !== "") {
                arr.push(parseInt(temp));
                temp = "";
            }
            return arr;
        }
        // console.log(getNumber(str));
    }
    {
        // 正则匹配如下:
        let reg = /\d+/g;
        let arr = str.match(reg);
        // console.log(arr);
    }
}

正则表达式的两种创建方式

{
    /* 
        正则的创建
    */
    // 两种创建方式
    {
        // 1.字面量创建
        // 两个杠直线就是 正则表达式里面的内容;
        // /g 全局匹配,找到结果之后继续查找 -> 默认的reg是查找到一个就停止查找;
        // + 一次或者多次 -> 1次以上
        {
            // \d 模糊匹配
            let str = "abc135778sdsdf31";
            let reg = /\d+/g;
            let res = str.match(reg);
            // console.log(res);
        }
        {
            // 精确匹配 : 一般情况下,精确匹配是比较少的..
            let str = "abc135778sdsdf31";
            let reg = /abc/g;
            // 注: abc只能是字符串 在字面量中不能是变量
            let res = str.match(reg);
            // console.log(res);
        }
    }
    {
        // 2.构造函数创建
        // 两个参数 1.正则表达式内容 2.修饰符
        // 1.带\的需要多层转义 -> \d \\d
        {
            // 模糊匹配
            let str = "abc135778sdsdf31";
            let reg = new RegExp("\\d+", "g");
            let res = str.match(reg);
            // console.log(res);
        }
        {
            // 精确匹配
            let str = "abc135778sdsdf31";
            let reg = new RegExp("abc", "g");
            let res = str.match(reg);
            // console.log(res);
        }
        {
            // 变量匹配
            let str = "abc135778sdsdf31";
            let abc = "1357"
            let reg = new RegExp(abc, "g");
            let res = str.match(reg);
            // console.log(res);
        }
    }
}

正则匹配的一些方法

{
    /* 
        正则的匹配方法
        正则对象的方法:
            test();
                reg.test(str)
                返还布尔值;
            exec();
                可以多次匹配,基于上次结果来匹配
                console.log(reg.exec(str));//135778
                console.log(reg.exec(str));//31
                关于(依次)与lastIndex有关系:
                    通过索引进行 匹配
        字符串方法:
            split();
            search();
            march();
            replace();
    */
    {
        let str = "abc135778sdsdf31";
        let reg = /\d+/g;
        // console.log(reg.test(str));//返还布尔值
    }
    {
        let str = "abc135778sdsdf31";
        let reg = /\d+/g;
        // console.log(reg.lastIndex);//0
        // console.log(reg.exec(str));//135778
        // console.log(reg.exec(str));//31
    }
    {
        // split
        let str = "abc135778sd1sdf31";
        {
            //通过数字进行分割 -> 精确数组
            let arr = str.split(1)
            // console.log(arr);
        }
        {
            // 通过数字进行分割 -> 正则
            let arr = str.split(/\d+/);
            // console.log(arr);
        }
    }
    {
        // search
        // 返回查找的索引值; -> 符合正则匹配找到的第一个索引值,会忽略全局匹配 -> 不论匹配到多少个,都回去返还第一个索引值
        let str = "abcdefghiejk";
        {
            let reg = /e/g;
            // console.log(str.search(reg));//4
        }
        {
            let reg = /ss/;
            // console.log(str.search(reg));//找不到 -1;
        }
    }
    {
        // march
        let str = "abc135778sdsdf31";
        {
            // 非全局匹配
            let reg = /\d+/;
            // console.log(str.match(reg));//135778
        }
        {
            // 全局匹配
            let reg = /\d+/g;
            // console.log(str.match(reg));//"135778", "31"
        }
    }
    {
        // replace -> 替换
        let str = "abc135778sdsdf31";
        {
            // 将所有数字改成 ***
            let reg = /\d/g;
            // console.log(str.replace(reg,"*"));//abc******sdsdf**
        }
        {
            let reg = /\d/g;
            let res = str.replace(reg,function(arg){//参数 : 字符串; 后面还有很多参数,但一般就只需使用一个参数
                // console.log(arg);
                return "*";
            });
            // console.log(res);//abc******sdsdf**
        }
    }
}

正则表达式的元字符

{
    /* 
        正则表达式的 元字符
            有特殊含义的非字母字符
        1.字符相关
        2.数量相关
        3.位置相关
        4.括号相关
    */
    {
        // 字符相关:
        // \w \W \d \D \s \S .
        {
            // \w: 数字、字母、下划线
            let str = "s_s1";
            let reg = /\w+/g;
            // console.log( reg.test(str) );//true;
        }
        {
            // \W: 非数字、字母、下划线
            let str = "~";
            let reg = /\W+/g;
            // console.log( reg.test(str) );//true;
        }
        {
            // \d 数字
            let str = "123";
            let reg = /\d+/g;
            // console.log(reg.test(str));
        }
        {
            // \D 数字
            let str = "sdfsdf";
            let reg = /\D/;
            // console.log(reg.test(str));
        }
        {
            // \s 空格
            let str = "ab c";
            let reg = /\s+/g;
            // console.log(reg.test(str));
        }
        {
            // \S 非空格
            let str = 'abc';
            let reg = /\S+/g;
            // console.log(reg.test(str));
        }
        {
            // . : 非 \n \r \u2028 \u2029; 非回车、换行、编码为(u2028,u2029);
            // let str = "sdlkfjlsdjf";
            let str = `a
        b`;
            let reg = /a.b/;
            // console.log(reg.test(str));
        }
    }
    {
        // 数量相关
        // {} ? + *
        {
            // {}
            let str = "abceeeffd";
            // let reg = /ceeef/g;
            // let reg = /ce{3}f/g;
            // let reg = /ce{3,4}f/g;//3次到4次
            let reg = /ce{1,}f/g;//1次以上
            // console.log(reg.test(str));
        }
        {
            // ? -> 0到1 -> {0,1}
            // + -> 1到无数 -> {1,}
            // * -> 0到无数 -> {0,}
            let str = "my name is JackAfan";
            let reg = /my\s+name/;//my name必须有空格
            // console.log(reg.test(str));
        }
        {
            {
                let str = '123456789';
                let reg = /\d{2,4}/g;//贪婪匹配 -> 执行最多的匹配
                let res = str.match(reg);
                // console.log(res);//"1234", "5678"
            }
            {
                let str = '123456789';
                let reg = /\d{2,4}?/g;//惰性匹配 -> 执行最少的匹配
                let res = str.match(reg);
                // console.log(res);//"12", "34", "56", "78"
            }
        }
    }

    {
        // 位置相关
        // ^ $ \b \B;
        {
            // ^ 开头
            let str = "abcdef";
            let reg = /^\w/g;
            let res = str.replace(reg, "*");
            // console.log(res);//*bcdef
        }
        {
            // $ 结尾
            let str = "abcdef";
            let reg = /\w$/g;
            let res = str.replace(reg, "*");
            // console.log(res);//abcde*
        }
        {
            // \b 边界符
            // 边界: 非\w都是边界; 非数字、字母、下划线
            let str = "this is Afan";
            let reg = /\bis\b/g;
            let res = str.match(reg);
            // console.log(res);
        }
        {
            // \B 非边界符
            // 非边界: \w都是非边界; 数字、字母、下划线
            let str = "this is Afan";
            let reg = /\B\w{2}\b/g;
            let res = str.match(reg);
            // console.log(res);//"is", "an"
        }
    }
    {
        // 括号相关
        // () [] {}
        {
            // (): 分组
            {
                let str = "abababsfaab";
                // let reg = /ababab/g;
                let reg = /(ab){3}/g;
                // console.log(reg.test(str));
            }
            // (): 提取值
            {
                let str = "2020-03-08";
                let reg = /(\d{4})-(\d{2})-(\d{2})/;
                // console.log(str.match(reg));

                // str.match(reg);
                // console.log(RegExp.$1)
                // console.log(RegExp.$2)
                // console.log(RegExp.$3)
            }
            // 替换
            {
                let str = "2020-03-08";
                let reg = /(\d{4})-(\d{2})-(\d{2})/;
                // let res = str.replace(reg,"$2/$3/$1");
                let res = str.replace(reg,function(arg,year,mouth,date){
                    return mouth+"/"+date+"/"+year;
                })
                // console.log(res);//03/08/2020
            }
            // 反向引用
            let className = "news-container-nav";//news_container_nav
            // let reg = /\w{4}(-|_)\w{9}(-|_)\w{3}/;
            let reg = /\w{4}(-|_)\w{9}(\1)\w{3}/;// \1 前面用啥,后面匹配也是一样 -> _ _ | - -
            // console.log(reg.test(className));
        }
        {
            // []: 字符集合
            {
                let str = "my name 1 is Afan";
                // let reg = /(A|a)fan/g;
                // let reg = /[Aa]fan/;
                // [0-9] [A-Z] [a-z]
                let reg = /[0-9]/g;
                // console.log(reg.test(str));
                // [^0-9] ^ -> 非数字;
                // \d [0-9] \w[a-zA-Z0-9_]
            }
        }
    }
}

匹配模式

{
    // 匹配模式
    // g i m s u y;
    {
        // g : 全局匹配
        let str = 'sadlf1312adf54';
        // let reg = /\d+/;
        let reg = /\d+/g;
        let res = str.match(reg);
        // console.log(res);
    }
    {
        // i : 忽略大小写
        let str = "abcABc";
        let reg = /ABC/i;
        // console.log(reg.test(str));
    }
    {
        // m 多行模式
        let str = `abc
        efg
        hij
        `;
        let reg = /^\w/gm;//注意也不能有 tab
        let res = str.replace(reg,"*");
        // console.log(res);
    }
    {
        // s : 让"."支持换行;
        let str = `abce
        fg`;
        let reg = /^a.*g/gs;
        // console.log(reg.test(str));
    }
    {
        // u:匹配unicode编码;
        let str = "a";
        let reg = /\u{61}/gu;
        // console.log(reg.test(str));
    }
    {
        // y:粘贴模式
        let str = "12sdf657464";
        let reg = /\d/gy;
        // console.log(reg.exec(str));
        // console.log(reg.exec(str));
        // console.log(reg.exec(str));
    }
}

命名分组与零宽断言

{
    // 命名分组;
    {
        let str = "2020-02-02";
        // let reg = /(\d{4})-(\d{2})-(\d{2})/;
        let reg = /(?<year>\d{4})-(?<month>\d{2})-(?<date>\d{2})/;//groups
        // console.log(str.match(reg));
    }
    // 零宽断言
    {
        // 正向肯定零宽断言
        let str = "iphone3iphone4iphone5iphonenumber";
        let reg = /iphone(?=\d)/g;
        let res = str.replace(reg,"苹果");
        // console.log(res);//苹果3苹果4苹果5iphonenumber
    }
    {
        // 正向否定零宽断言
        let str = "iphone3iphone4iphone5iphonenumber";
        let reg = /iphone(?!\d)/g;
        let res = str.replace(reg,"苹果");
        // console.log(res);//iphone3iphone4iphone5苹果number
    }
    {
        // 负向肯定零宽断言
        let str = "10px20px30pxipx";
        let reg = /(?<=\d+)px/g;
        let res = str.replace(reg,"像素");
        console.log(res);//10像素20像素30像素ipx
    }
    {
        // 负向否定零宽断言
        let str = "10px20px30pxipx";
        let reg = /(?<!\d+)px/g;
        let res = str.replace(reg,"像素");
        console.log(res);//10px20px30pxi像素
    }
}