正则、转义符、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键字,关键词">
    <meta name="Description" content="描述和简介">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
        a{text-decoration:none;}
        img{border:none;}
        ol,ul{list-style:none;}
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        /*
        * 正则表达式: 规则,给计算机读取的规则,用来匹配字符串
        *
        * */
        var str = "1234bf56789gf00";
        var arr = [],s = "";

        for(var i = 0; i < str.length; i++){
            if( !isNaN(str.charAt(i)) ){//原本是数字,判断为false,所以取反
                s += str.charAt(i);
                //console.log("===="+s);
            }else{
                if(s){
                   arr.push(s);
                   s = "";
                   //console.log(s);
                }
            };
        };

        if(s){
            arr.push(s);
            s = "";
        };
        console.log(arr);
/*
        var arr = str.match(/\d+/g);
        console.log(arr);*/

        /*
        * 正则相当于规则
        *   1: 定义变量等于双斜杠
        *   2: 正则在双斜杠中间
        *
        * */
       /* var str = "瓜皮吃瓜皮";
        var reg = /瓜/;
        console.log(reg.test(str));//匹配成功就是true , 失败是false

*/
/*     var num = "121121abcde333";
       var x = "abcde";
       var reg1 = /x/;//错误,会被当成需要匹配的字符
       var reg2 = new RegExp(x);
       console.log(reg2.test(num));*/

        /*
        * 转义符: \
        *   所有在正则里面有特殊意义的字符,需要匹配这些字符的时候要转义
        *
        * */
/*        var str1 = /\\/; // \
        var str2 = /\//;  //  /
        var str3 = "因为老师说:\"不认真听课的就会被打屁股\"";  // ""*/

        /*
        * 转义符加上一些特定的字母,有特定的意思
        *   \d  数字
        *   \D  非数字
        *
        *   \s  空格
        *   \S  非空格
        *
        *   \w  字符(字母 数字 下划线)
        *   \W  非字符
        *
        *   \b  独立的部分
        *   \B  非独立部分
        *
        * */
/*        var str = "121立定,瓜皮";
        var r = /\d/; //匹配数字
        alert(r.test(str));*/
/*
        var str1 = "121 立定";
        var r = /\s/;
        alert(r.test(str1));*/

/*        var str = "hot-dog_hahahah";//匹配连词符,前后都有中划线(除了下划线之外),或者前后独立(有空格)
        var r = /\bdog\b/;
        alert(r.test(str));*/

    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键字,关键词">
    <meta name="Description" content="描述和简介">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
        a{text-decoration:none;}
        img{border:none;}
        ol,ul{list-style:none;}
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        /*
        * 标识:
        *   i   不区分大小写
        *   g   全局匹配
        *   m   换行匹配
        * */
/*      var str = "ABCDefg";
        var r = /Abc/i;
        alert(r.test(str));*/
/*
        var str = "对面有个哑巴,手里捏着蛤蟆...哑巴";
        var r = /哑巴/g;//全部都匹配上
        console.log(r.test(str));*/

/*      var  str = "哈哈哈哈哈哈嘿哈哈哈哈哈";
        var r = /嘿/m;
        alert(r.test(str));*/

        /*
        * 方法:
        *   字符串.match(正则);匹配成功返回数组,否则返回null
        *   字符串.search(正则);匹配成功,返回对应第一次出现的下标,失败返回-1
        * */


/*        var str = "哈哈哈凌薇专治不听话的瓜皮,凌薇不打好瓜皮";
        var r1 = /凌薇/; //匹配一个凌薇
        var r2 = /凌薇/g;//匹配所有的凌薇
        console.log(str.search(r2))*/

        /*
        * 量词:
        *   个数不确定的时候,用量词 {}
        *   {2,6} 2<=n<=6  最少2  最多6
        *   {2}     n=2 必须等于2
        *   {1,}    n >= 1 大于等于1
        *
        * */
/*        var str = "1步23333步1444步233步,是魔鬼的步伐";
        var r = /\d{1,3}/g;
        console.log(str.match(r));*/

        /*
        * 几个特殊的量词有专门的符号表示
        *   {1,} + 最少一位,没有上限
        *   {0,1} ? 没有或者只有一位
        *   {0,} * 有没有都可以
        *
        * */

/*        var str = "123hahahah456heheheh";
        //var r = /\d+/g;
        //var r = /\d?/g;
        var r = /\d* /g;
        console.log(str.match(r));*/

        /*
        * 字符集
        *   代表一个范围: [a-z] [A-Z] [0-9] 还有汉字范围
        * */

/*       var str = "9090g";
         //var r = /[ab]/; //a 或者 b
         //var r = /[a-h]/; //匹配在这个范围之内的
         alert(r.test(str));*/

        /*
        * 除了....之外 [^]
        *
        * */

/*      var str = "hahahah  demo";
        var r = /[^hahahah]/;//除了hahahah(在开头)之外,搜索为true
        alert(r.test(str));*/

        /*
        * 子项 ()  将一个字符串拆分,展示多个子项,括号对本身没有什么影响
        *
        * 全局或者 |
        *
        * 子项或者  (将或者控制在子项之内)
        * */

/*          var str = "大家说:凌薇温柔大方!";
            var r = /(温柔)/;
            console.log(str.match(r));*/

            /*var str = "凌薇";
            var r = /凌薇老师|凌薇/;//匹配 凌薇老师 或者 凌薇
            console.log(str.match(r))*/

            var str = "宝宝呀";
            var r = /宝宝(老师|呀)/;
            console.log(str.match(r))

    </script>
</body>
</html>

. 是匹配所有字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键字,关键词">
    <meta name="Description" content="描述和简介">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
        a{text-decoration:none;}
        img{border:none;}
        ol,ul{list-style:none;}
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        /*
        * 补充:
        *   标识
        *   转义
        * */
/*
        var str = "abcdef";
        var r1 = /abc/i;
        var r2 = new RegExp("abc" , "i");//第二个参数为标识
        alert(r2.test(str));
*/
/*        var r = /\d/;
        var r2 = /\\d/;
        var r3 = new RegExp("\\d");//里面两个反斜杠,一个斜杠本身就是在做转义
        var a = "\\d";
        var r4 = new RegExp(a);*/

        /*
        * 有特殊意义的符号
        *   ^   起始位置
        *   $   结束位置
        *   .   匹配所有的字符(不匹配 \n \r)
        * */
        /*
        * 例: 验证QQ 是否正确,条件: 第一位不能为0,只能是数字组成,长度在5-10
        *
        * */
/*        var str = "23456789";
        //var r = /^[^0]\d{4,9}/;//排除了0以外的其他字符都是true
        var r = /^[1-9]\d{4,9}$/;
        console.log(r.test(str));*/

/*    var str = "哈哈哈哈哈哈.gh.";
    var r = /\./;
    alert(r.test(str));*/

    /*
    * 总结:
    *   转义: \ /
    *   量词: {} + * ?
    *   字符集: [^ -]  ^ $ .
    *   子项: ( | )
    *   或者: |
    *
    * */


    /*
    * replace:
    *   在字符串中用一些字符替换另一些字符,或者替换一个与正则表达式匹配的子串
    *
    * */
/*    var str = "大白同学很棒!国东同学很瓜皮";
    var r = /大白/g;
    var r2 = /国东/;
    //alert(str.replace(r , "刘智"));
    alert(str.replace(r2 , "lweiwei"));*/

    /*
    * split
    *   按照指定的字符(串)或者正则去分割某个字符串,结果以字符串数组的形式返回
    * */
/*
    var str = "曾凯同学22,你的蛙回来了吗?44曾凯?";
    var  r = /曾凯/g;
    //console.log(str.split(r));
    //console.log(str.split(/曾凯/));
    //console.log(str.split(/\d/));
*/
    </script>
</body>
</html>

脏字检查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键字,关键词">
    <meta name="Description" content="描述和简介">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
        a{text-decoration:none;}
        img{border:none;}
        ol,ul{list-style:none;}
        .wrap{
            width: 400px;
            height: 400px;
            background: pink;
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="text" id="inp">
        <input type="button" id="btn" value="发送">
        <div class="wrap"></div>
    </div>

    <script>
        var oInp = document.getElementById("inp");
        var oBtn = document.getElementById("btn");
        var oWrap = document.querySelector("#box .wrap");
        //var r = /sb|傻逼|你算哪块小饼干|卧槽/;
        var r = /s.{0,2}b|傻.{0,2}逼|卧.{0,2}槽/g;

        oBtn.onclick = function (){
            var val = oInp.value;
            if(val){
                /*val = val.replace(r , "**");
                //console.log(val);*/
                val = val.replace(r , function (s){
                    //console.log(s);//s表示匹配的脏话
                    var xx = "";
                    for(var i = 0; i < s.length; i++){
                        xx += "*";
                    };
                    return xx;
                })
            };
            var oP = document.createElement("p");
            oP.innerHTML = val;
            oWrap.appendChild(oP);
            oInp.value = "";

        };
    </script>
</body>
</html>

常用的正则匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键字,关键词">
    <meta name="Description" content="描述和简介">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
        a{text-decoration:none;}
        img{border:none;}
        ol,ul{list-style:none;}
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        var reg = {
            qq : /^[1-9]\d{4,9}$]/,//第一位非0的数字,除了第一位,还有4-9位
            tel : /^1[3-8]\d{9}$/,//第一位是1,第二位是3至8之间的数字,除了第一位和第二位,还有9位
            mail : /\w+@[\da-z]{2,}(\.[a-z]{2,}){1,3}$/i,
            IDCard : /^[1-9]\d{16}[\dxX]$/,
            user : /^[a-z_]\w{5,17}$/i,
            pwd : /^[\w!@#\$%\^&\*\(\)_\+\}\{\|":\?><\\\.\]]\/]{6,18}$/
        };
        var str = "431022199911170029";
        alert(reg.IDCard.test(str));

    </script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值