带你走近js正则

89 阅读4分钟

正则

一、正则基础使用

1.1 字符串扩展方法

   let str = "\u4e00";
        console.log(str);


        // let str="abcde";
//        判断字符串中是否有该字符,返回true或者false
//        console.log(str.includes("c"));
//        判断字符串中是否该字符在头部,返回true或者false
//        console.log(str.startsWith("ab"));
//        判断字符串中是否该字符在尾部,返回true或者false
//        console.log(str.endsWith("de"));

//        将字符重复多少次返回
//        console.log(str.repeat(3));
//        let a=Math.floor(Math.random()*1000).toString();
//        判断该字符串的长度是否是几位,如果不足几位在前面补足前导字符
//       a=a.padStart(3,"0");
//        判断该字符串的长度是否是几位,如果不足几位在后面补足字符
//       a=a.padEnd(3,"0");
//       console.log(a);



//        let age=30;
//        let a="今年张明"+age+"岁";
//        let b=`今年张明${age}岁了`;
//        console.log(b);

        // let div=document.querySelector("div");
        // let str1=`<ul>`;
        // for(let i=0;i<10;i++){
        //     str1+=`<li class="li0">${i}</li>`;
        // }
        // str1+=`</ul>`;
        // div.innerHTML=str1;

        // let li=document.querySelectorAll(".li0");
        // console.log(li);

//        let div=ce("div");
//
//        function ce(type) {
//            return document.createElement(type);
//        }



//        alert `你好`;

//
//        function fn(a) {
//            console.log(a);
//        }
//
//        fn `3`;//字符串


//         function fn(a,b,c,...arg) {
// //            ...arg是传入后续的所有内容组成的数组
//             console.log(a,b,c,arg);
//         }

//         fn(3,4,5,6,7,8,9)

1.2 正则表达式

 //构造函数创建
//        var reg=new RegExp("a","修饰符")

//        /正则内容/修饰符
//        var reg=/a/i;


//        修饰符
//          i   不区分大小写
//          g  全局匹配
//        m  多行匹配

//        var str="abcdafabf";
//        str=str.replace( /a/g,"0");
//        console.log(str);





        /*
        *   正则表达式.test(字符串)
        *   判断字符串中有没有符合正则表达式需求的内容,返回布尔值
        *
        *   正则表达式.exec(字符串)
        *   判断字符串中符合正则表达式的内容,生成一个数组
        *   仅能找到第一个符合条件内容,index就是找到的下标
        *
        * */


//        var reg=/a/i;

        //       var bool=reg.test("abcde");
        //       var bool=reg.test("bAcde");
        //       var bool=reg.test("becde");
        //       console.log(bool);



//        var reg=/a/g;
//        var obj=reg.exec("bacdea");
//        console.log(obj);




        /*
        *  replace   替换
        *  match   查找  查找正则匹配,并且返回被查找到元素,
        *           如果仅查到一个,和正则exec方法相同
        *           如果查找到多个,就会返回一个数组,返回被查到的元素,但是不返回下标
        *  search  查找  查找正则匹配,并且返回第一个被查找到的下标,一般不用全局匹配
        *  split  切割成数组
        *
        *
        *
        *
        * */

        var str="abcade";
//        console.log(str.match(/a/));
//        console.log(str.search(/a/g));
//        console.log(str.split(/[bd]/g));


//        B
//        str=str.replace(/a/g,function (item,index) {
////            console.log(item,index);
////            return "0"
//            if(index===0) return "$";
//            return "&";
//        });
//        console.log(str);

1.3 元字符

//        console.log("abcde".match(/bcd/));//按照顺序依次匹配,完全匹配后返回
//        console.log("bcbdbe".match(/bd/g));

/*
*    .   可以匹配任意一个字符
*  \.   将.这个通配符转换字符.的含义
*     \字符    转义字符  转变原来的含义
*
* */
//        console.log("bcbdbe".match(/b./g));
//        console.log("bcb.be".match(/b\./g));
//        console.log("bc\\b.be".match(/b\./g));
//
//        console.log("bc\\b.be".match(/c\\/))

//        /^(?=\D\d)(?=.*[a-z])(?=.*[A-Z])\w{8,16}$/

        /*
        *   字符类
        *  []里面的字符可以表示任意一个字符
        *  [0-9]  匹配任何一个数字
        *  [a-z] 匹配任何一个小写字母
        *  [A-Z] 匹配任何一个大写字母
        *  [a-zA-Z0-9] 匹配任何一个英文字母或者数字
        *[a-zA-Z0-9_]
        * */

//        console.log("bcbdbebfba".match(/b[acd]/g));//[]内的内容任选其一
//        /[1-31]/
//        console.log("aaabvde".match(/[A-z]/));//错误的

//        console.log("abc\\cde".match(/c[\\d]/));// c\  cd
//        console.log("[a][b]".match(/[\[\]]/g));// 查找[  ]

//        console.log("aabcdcaa".match(/[aabbcda]/));//[abcd]

//        console.log("a.bcad".match(/a[.d]/g));  //如果.在[]中,失去了通配符的作用变成字符.


//        /[012][0-9][0-9][0-9]-[01][0-9]-[0-3][0-9]/

        /*
        *   ^   反义   必须在[]里的第一个位置
        *   在[]中加入^,表示除了这个中括号里面的内容以外的字符
        *   如果^不在第一位,表示的是一个^的字符
        *
        * */

//        console.log("abacadaeaf".match(/a[^def]/g));//ab  ac
//        console.log("abacadaeaf".match(/a[\^def]/g));//这里将^转义为字符^
//        console.log("abacadaeaf".match(/a[d^ef]/g));//ad  a^ ae af
//        /[^^]/  除了^字符以外


        /*
        *   \w     [0-9a-zA-Z_]  相同
        *   \W     [^0-9a-zA-Z_]  相同,除了0-9a-zA-Z_之外的所有字符
        *   \d     [0-9] 相同
        *   \D     [^0-9]  相同  除了数字以外的其他字符
        *   \s    空白字符
        *   \S    除了空白字符之外的其他字符
        *
        *
        *
        *
        * */

        
       /* var divs=document.querySelectorAll("div");
        removeClass(divs[0],"div1");


        function addClass(elem,className) {
          var arr=elem.className.trim().split(/\s/);
            if(arr.indexOf(className)>-1) return;
            arr.push(className);
//            arr=Array.from(new Set(arr));
            arr=arr.filter(function (t) { return t!=="" });
            elem.className=arr.join(" ");
        }
        function removeClass(elem,className) {
            var arr=elem.className.trim().split(/\s/);
            if(arr.indexOf(className)<0) return;
            arr.splice(arr.indexOf(className),1);
            arr=arr.filter(function (t) { return t!=="" });
            elem.className=arr.join(" ");
        }

*/

1.4 重复

//        /[0-9][0-9][0-9][0-9]-[0-9][0-9]-[0-9][0-9]/;
//        /\d\d\d\d-\d\d-\d\d/
//      /\d{4}(-\d{2}){2}/

//       console.log("bbacaacc".match(/a{2}/));
//       console.log("bbacaacc".match(/a{5}/));
//       console.log("bbacaacc".match(/a{0}/g));//所有字符{0} 都表示""
//        "a"+""+"b"="ab"
//        /[{}]/

//        console.log("aaaaaaaaa".match(/a{2,5}/g));//贪婪重复,重复2-5次
//        console.log("aaaaaaaaa".match(/a{1,3}/g));
//        console.log("aaaaaaaaa".match(/a{0,3}/g));//最后一个空字符串,0次就是最少匹配一个""
//        console.log("aaaaaaaa".match(/a{0,6}/g));
//        console.log("aaaaaaaa".match(/a{0,}/g));//匹配最少0个,重复最大   2个
//        console.log("aaaaaaaa".match(/a*/g));//匹配最少0个,重复最大   2个
//        console.log("aaaaaaaa".match(/a+/g));//匹配最少1个,重复最大   1个

//        console.log("colour".match(/colou{0,1}r/));//匹配u存在或者不存在都行
//        console.log("colour".match(/colou?r/));//匹配u存在或者不存在都行

//            var div=document.querySelector("div");
//            div.innerHTML=div.innerHTML.replace(/things{0,1}/,"<span class='redFont'>thing</span>")

        //{0,1}   ?
        //{1,}    +
        //{0,}   *


//        .*?    最少匹配一个""字符串(优先匹配最少的)   (.{0,}){0,1}
//            console.log("<div><><span></span></div>".match(/<.*?>/g));


//            在重复的次数后面增加{0,1}重复或者?  就表示非贪婪重复


//        console.log("aaaaaaaaa".match(/a{2,5}?/g));//非贪婪匹配
//        console.log("aaaaaaaaa".match(/a{2}/g));//非贪婪匹配
//        console.log("<div><><span></span></div>".match(/<[^<>]{4,}?>/g));//用于两个字符直接查找最少内容

//        var str="上口径阿斯利康大家啊恐龙当家第0章按实际打开了四大皆空垃圾是的徕卡四季豆第1034章奥斯卡来得及阿斯加大款来得及";
//        str=str.replace(/第\d+?章/g,"<p></p>第0章<p></p>");
//        console.log(str);


        var str='asdasd"asdasd"asdasd"asdasd"asdas"'

1.5 选择和起始结束

  /*
        *   |    使用一个|  叫做或者
        *   选择是有顺序的,先后顺序
        *
        * */
//        console.log("catdog".match(/cat||dog/g));//  cat|""|dog/g
//        console.log("catdog".match(/|cat|dog/g));//   /""|cat|dog/g;
//        console.log("catdog".match(/cat|dog|/g));//   /cat|dog|""/g;

//        var div=document.querySelector("div");
//        div.innerHTML=div.innerHTML.replace(/(things?|fears?)/g,"<span class='redFont'>$1</span>")
//        div.innerHTML=div.innerHTML.replace(/(thing|fear)s?/g,"<span class='redFont'>$1</span>")

        /*
        *   ^   起始符
        *   $   结束符
        *
        *
        *
        * */

//        console.log("catdog".match(/^cat$/g));

        var input,span;
        var ids=0;
        init();
        function init() {
            input=document.querySelector("input");
            span=document.querySelector("span");
            input.addEventListener("input",inputHandler);
        }

        function inputHandler(e) {
            if(ids) return;
            ids=setTimeout(testStringHandler,500);
        }

        function testStringHandler() {
            clearTimeout(ids);
            ids=0;
            if(/^[1-9]$|^[12]\d$|^3[01]$/.test(input.value)){
                span.textContent="正确";
                span.style.color="green";
            }else{
                span.textContent="错误"
                span.style.color="red";
            }
        }

1.6 分组和紧随其后

   /*
        *   ()  分组
        *   纯()查找  表示查找空字符
        *
        *   主要用于replace
        *
        * */

//        console.log("aaaaaaaba".match(/(a+?)/g))
//        console.log("aaaaaaaba".match(/()/g))
//        console.log("catdog".match(/(ca(t))|(dog)/g));
//        console.log("catdog".match(/ca(t?)/g));

//        var str="<西游记><水浒><三国演义><红楼梦>";
//        str=str.replace(/<(.*?)>/g,"《$1》");
//        console.log(str);


//        var tel="18616532457";
//        console.log(tel.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3"));


//        $1-$9   先前后,再外内
//        console.log("2019-12-05".replace(/(\d{4})((-\d{2}){2})/,"$1$3"))


//        ?=n 紧随其后条件
//        console.log("abcacdaef".replace(/a(?=cd)/g,"0"))


//        ?!n
//        console.log("abcacdaef".replace(/a(?!cd)/g,"0"));


//        /^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,16}$/;
//        /[\u4e00-\u9fa5]*/  匹配所有任意中文字符    

//        console.log(/^\w+@\w{2,}.\w{2,}(.\w{2,})?$/.test("x@163.com"));
//        /^\d{17}(\d|X)$/    //身份证号码验证

二、正则扩展

截屏2022-08-26 00.21.27.png

三、正则ppt

截屏2022-08-26 上午12.01.43.png image.png image.png image.png 截屏2022-08-25 下午11.43.09.png 截屏2022-08-25 下午11.43.40.png 截屏2022-08-25 下午11.43.54.png 截屏2022-08-25 下午11.44.07.png 截屏2022-08-25 下午11.44.38.png 截屏2022-08-25 下午11.44.50.png 截屏2022-08-25 下午11.45.04.png 截屏2022-08-25 下午11.45.42.png 截屏2022-08-25 下午11.45.55.png 截屏2022-08-25 下午11.46.03.png 截屏2022-08-25 下午11.46.16.png 截屏2022-08-25 下午11.46.32.png 截屏2022-08-25 下午11.47.00.png 截屏2022-08-25 下午11.47.49.png 截屏2022-08-25 下午11.48.36.png 截屏2022-08-25 下午11.48.51.png 截屏2022-08-25 下午11.49.24.png 截屏2022-08-25 下午11.49.33.png 截屏2022-08-25 下午11.49.56.png 截屏2022-08-25 下午11.51.11.png 截屏2022-08-25 下午11.50.16.png 截屏2022-08-25 下午11.52.03.png 截屏2022-08-25 下午11.53.28.png 截屏2022-08-25 下午11.53.54.png 截屏2022-08-25 下午11.54.13.png 截屏2022-08-25 下午11.54.21.png 截屏2022-08-25 下午11.54.55.png 截屏2022-08-25 下午11.55.03.png 截屏2022-08-25 下午11.55.33.png 截屏2022-08-25 下午11.55.48.png 截屏2022-08-25 下午11.56.18.png 截屏2022-08-25 下午11.56.32.png 截屏2022-08-25 下午11.56.40.png 截屏2022-08-25 下午11.56.51.png 截屏2022-08-25 下午11.56.58.png 截屏2022-08-25 下午11.57.14.png 截屏2022-08-25 下午11.57.21.png 截屏2022-08-25 下午11.58.08.png 截屏2022-08-25 下午11.58.19.png 截屏2022-08-25 下午11.58.26.png 截屏2022-08-25 下午11.58.47.png 截屏2022-08-25 下午11.58.55.png 截屏2022-08-25 下午11.59.14.png 截屏2022-08-25 下午11.59.21.png 截屏2022-08-25 下午11.59.30.png 截屏2022-08-25 下午11.59.37.png 截屏2022-08-25 下午11.59.45.png 截屏2022-08-26 上午12.00.03.png 截屏2022-08-26 上午12.00.13.png 截屏2022-08-26 上午12.00.43.png 截屏2022-08-26 上午12.00.50.png 截屏2022-08-26 上午12.00.56.png 截屏2022-08-26 上午12.01.02.png 截屏2022-08-26 上午12.01.08.png 截屏2022-08-26 上午12.01.16.png