正则匹配---案例及函数的节流

 

^　　单独使用不再【】中表示一个边界的开始  /^a/  匹配以a开头的字符串而在【】中表示非[^1]不匹配1

$　　表示匹配一个边界的结束 /b$/ 就是要以b结尾的字符串 如 tbaleb 第一个b不会被匹配，只会匹配最后一个b

*　　匹配前面字符0次或多次 /ba*/ 匹配  b ba baa baaa 这里的a是0次或者是多次 等同于 /ba{0,}

+　　匹配前面字符最少一次或多次 /ba+/=/ba{1,}　　 匹配 ba baa baaa

？　　匹配前面字符0次或1次 /ba?/=/ba{0,1}/ ba 匹配 b  ba

x|y　　匹配x或者y

{n}　　精准匹配那次

{n，}　　最少n次最多没有限制

{n，m}　　最少n次，最多m次

[xyz]　　字符集匹配这个集合中任意一个字符

[^xyz]　　不匹配字符中的任意字符

\d　　匹配一个数字 /\d/=/[0-9]/

\D　　匹配一个非数字字符　　/\D/=/^[0-9]/

()　　分组匹配组中的字符　/\d{4}-\d{2}-\d{2}/  可以简写 /\d{4}(-\d{2}){2}/  把-\d 看成一组

　　案例：电话号码中间4位显示为****

    <script>
        //使用replace 替换电话号码中间4位 其中$1 为分组1不变  $s分组2替换**** $3分组3不变
        console.log("13166856811".replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3"));
    </script>

[\b]　　匹配一个退格符

\b　　匹配单词的边界

\B　　匹配单词的非边界

\n　　匹配换行符

\r　　匹配回车符

\t　　匹配制表符

\s　　匹配一个空白字符　　如\t \v \n \r等

\S　　匹配一个非空白字符　[^\n\f\r\v\t]等

正则中有两个方法

 

失去焦点与节流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <input type="text" id="texts"><span></span>

    <script>
        // var texts=document.querySelector("input");
        // texts.addEventListener("input",inputHandler);
        // function inputHandler(e){
        //     if(/\d\d\d\d-\d\d-\d\d/.test(texts.value)){
        //         texts.nextElementSibling.textContent="输入正确";
        //         texts.nextElementSibling.style.color="green";
        //         return;
        //     }
        //     texts.nextElementSibling.textContent="输入错误";
        //     texts.nextElementSibling.style.color="red";


        // }

        //函数节流
        //阻止一个函数在很短时间间隔内联系调用
            var texts=document.getElementById("texts");
            texts.addEventListener("blur",blurHandler);

            //创建一个变量来接收setinterval的id
            var id;
            function blurHandler(e){
                //判断id为true时  跳出该函数blurHandler
                if(id)return;
                id=setInterval(function (){
                    //清空id
                    clearInterval(id);
                    //这里如果id不设置为0，那么下次在失去焦点的时候 id为1 就会跳出失焦函数blurHandler
                    id=0;
                if(/\d\d\d\d-\d\d-\d\d/.test(texts.value)){
                        texts.nextElementSibling.textContent="输入正确";
                        texts.nextElementSibling.style.color="green";
                        return;
                    }
                    texts.nextElementSibling.textContent="输入错误";
                    texts.nextElementSibling.style.color="red";
                    },100);
               
            }
    </script>
</body>
</html>

input中只能输入数字

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="texts">

    <script>
        var texts=document.getElementById("texts");
        texts.addEventListener("input",inputHandler);

        function inputHandler(e){
                //如果非数字替换成空并且赋值给texts
                texts.value=texts.value.replace(/[^0-9]/g,"");
        }
    </script>
</body>
</html>

 

posted @ 2020-10-17 13:13  WhiteSpace  阅读(150)  评论(0)    收藏  举报