JS 正则表达式基础知识详解与回顾

前言

---

之前学习正则的过程都快忘记了，通过这次复习重新回顾下。

---

正文

场景：
有一个字符串，其中包含字母和数字，找出所有的数字

function findNumber(){
            var str = "222gfdf33asd44ery5sad44";
            var arr = [];
            var temp = ""

            for (var i = 0; i < str.length; i++) {
                var singleStr = str.charAt(i);      //拿到每个字符

                if (singleStr >="0" && singleStr<="9") {    //判断当前字符是否是数字
                    temp += singleStr;
                }else if(temp !=="") {
                    arr.push(temp);
                    temp = "";
                }   
                /*最后的数字找不到，其原有是循环已经结束*/
                if (i === str.length-1) {
                    arr.push(temp)
                    //将数组返回
                    return arr
                }
            }   
        }

        console.log(findNumber())

那么通过正则怎么表达呢？

var str = "222gfdf33asd44ery55rwer";
        function regExp(){
            return str.match(/\d+/g);
        }
        console.log(regExp())

很明显正则表达式可以大量减少我们的代码使用量，那么我们应该如何去理解并且熟练使用呢？

---

| g | global | 代表全文搜索 |
| i | ignore case | 忽略大小写，默认大小写敏感 |
| m | multiple lines | 多行搜索 |

| test() | 检测 |
| exec() | 执行计算 |

var str = "8asdfadsfq_gfds";
    //定义的正则表达式
    var reg = /(a+)/;
    //通过正则条件去匹配字符串，匹配成功返回true，否则你懂得。。
    console.log(reg.test(str))
    //返回匹配项数组，index属性是指第一个匹配项，所在字符串中的位置
    //从0开始，input属性代表的就是原字符串
    console.log(reg.exec(str))

    <script type="text/javascript">
        //macth方法 --字符串的方法
        var str = "22dsf33sdfew33ggre"
        var reg = /33/g;    //g匹配全局
        console.log(str.match(reg));
        /*
            match:

                非全局： 获取第一个符合条件的数组
                全局： 获取所有符合条件的数组
        */

        //search 方法
        var str = "22dABCBCAsf33sdfew33ggre";
        var reg = /abc/;    //i或略大小写
        console.log(str.search(reg))    //第一个小标2
        /*
            search: 匹配成功发挥第一个结果的下标，匹配失败返回-1
        */

        //replace方法
        var str = "22dABCBCAsf33sdfew33ggre";
        var reg = /33/g;
        console.log(str.replace(reg,'5566'))
        /*
            replace
                参数1：匹配规则
                参数2：替换内容
        */
        console.log(str.replace(reg,function(){
            return 5*5
        }))

匹配规则

正则表达式由两种基本字符类型组成的

1.原义文本字符 a = a 1 = 1 /abc/

2.元字符 有特殊含义的非字母字符
* + ? $ ^ . | \ () {} []

t 水平制表符
v 垂直制表符
n 换行符
r 回车符
0 空字符
s 空白字符
f 换页符

    //元字符 - 点字符
        var str = "abcde";
        var reg = /c.e/;
        console.log(str.match(reg));
        //["cde", index: 2, input: "abcde"]

        //元字符 - 位置字符
        var str = "aaa bbb ccc";
        var reg = /^aaa/;
        console.log(str.match(reg));
        //["aaa", index: 0, input: "aaa bbb ccc"]

        var str = "aaa bbb ccc";
        var reg = /ccc$/;
        console.log(str.match(reg));
        //["ccc", index: 8, input: "aaa bbb ccc"]

        var str = "abc";
        var reg = /^abc$/;
        console.log(str.match(reg));
        //["abc", index: 0, input: "abc"]

        //元字符 - 竖线字符
        var str = "22334455";
        var reg = /22|33/;
        console.log(str.match(reg));
        //["22", index: 0, input: "22334455"]


        /*
            . : 代表的任意一个字符

            ^ : 开头必须是***

            $ : 结尾必须是***

        */

字符类

我们可以使用元字符[],来构建一个简单的类

表达式[abc]，把字符a|b|c归为一类，表达式可以匹配其中的字符

字符类取反

使用元字符^创建 反向类

[^bac]表示不是字符a|b|c

//字符类 -脱字符
        var str = "aaab6556bbccc";
        var reg = /[^abc]/g;
        console.log(reg.test(str));
        //true

        var str = "aaab1236556bbccc";
        var reg = /[1]/;
        console.log(reg.test(str));
        //true

        //字符类 - 连接符（-）
        var str = "1234567897651321549";
        var reg = /[^0-9]/g;
        console.log(reg.test(str));
        //false

        //匹配字符
        var str = "sdfgtyf24534dfaefaryw"
        var reg = /[a-z]/gi;
        var reg2 = /[a-zA-Z_0-9]/g;
        console.log(str.match(reg2))
        //["s", "d", "f", "g", "t", "y", "f", "2", "4", "5", "3", "4", "d", "f", "a", "e", "f", "a", "r", "y", "w"]

        //匹配汉字
        var str = "sdfawefsdfew牛涛fses54654";
        var reg = /[\u4e00-\u9fa5]+/;
        console.log(str.match(reg))
        //["牛涛", index: 12, input: "sdfawefsdfew牛涛fses54654"]

        /*
            ^abc: 在调用test方法时，会将字符串中的所有abc干掉，如果字符串仍有内容，那么返回true，否则false.

            - : 操作范围 0-9 为1 2 3 4 5 6 7 8 9

            匹配汉字： 使用Unicode编码

        */

量词：

{n}: 出现n次

{n,m} :出现n 到 m次

{n,} : 至少出现n次

？ : 出现0次或1次（最多出现一次）
+ : 出现0次或多次（最少出现一次）
* : 出现0次或多次（任意次）

//重复类
        var str = "2111111565426"
        var reg = /1{6}/;   //要刚好6次，否则返回null
        console.log(str.match(reg));

        var str = "200000555"
        var reg = /0{2,}/;  //至少两次，多了没关系，直到不重复为止
        console.log(str.match(reg)) ;

        var str = "2111115"
        var reg = /1{1,2}/; //最少一个 最多两个 
        console.log(str.match(reg));

        //?
        var str = "112115"
        var reg = /1?/g;
        console.log(str.match(reg));
        //?问号等同于{0,1}

        //*
        var str = "208";
        var reg = /1*/;
        console.log(reg.test(str));
        //*星号等同于{0,n}


        //+
        var str = "206"
        var reg = /1+/;
        console.log(reg.test(str));
        //+加号等同与{1,n}

预定义类
\d = [0-9] 匹配所有的数字 digital

\D = [^0-9] 非数字

\w = [a-zA-Z] 匹配所有字母 word

\W = [^a-zA-Z] 非字母

\s = [\n\t] 空白符 space

\S = [^\n\t] 非空白符

console.log(/\d/.test("1234566796547654556"));
        console.log(/\D/.test("1234566796547654556"));

        console.log(/\w/.test("123sdfasdf4566796547654556_23423")); 
        //字母数字下划线都可以⬆️
        console.log(/\W/.test("123sdfasdf4566796547654556_23423")); 

        console.log(/\s\w/.exec("hello world"));
        console.log(/\S\w/.exec("hello world"));
        console.log("hello world".match(/\S\w/))

---

结束语 如果你能看完相信会有一定的收获，当然你下拉到这，估计我也会下拉到这- -！，知识点较多~