美文网首页
正则表达式

正则表达式

作者: charlotte2018 | 来源:发表于2017-11-21 15:04 被阅读14次

    正则概述

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<script>
    //正则定义。（1.内置对象法。  2.字面量）

    //1.对象定义法
    var reg1 = new RegExp(/abc/);

    //2.字面量[]{}/a/
    var reg2 = /def/;
    console.log(reg2);
    console.log(typeof reg2);


    //使用：test();正则表带是有一个方法，test，有一个返回值是bool类名，决定参数是否符合正则表达式

    console.log(reg1.test("abc"));
    console.log(/abc/.test("hjkl"));

</script>

</body>
</html>

    五大内部类

    预定义类

    50BBDFA4-A9CB-48BA-8583-32464F8781E7.png 
             //. [^\n\r] 除了换行和回车之外的任意字符(“”不行)
//        console.log(/./.test("\n\r"));   //false
//        console.log(/./.test("adsfadsgdfgdfg")); //true

          //\d [0-9] 数字字符   \D [^0-9] 非数字字符
//        console.log(/\d/.test(123)); //true
//        console.log(/\d/.test("adsfadsgdfgdfg")); //false
//
          //\s [ \t\n\x0B\f\r] 空白字符  \S [^ \t\n\x0B\f\r] 非空白字符
//        console.log(/\s/.test("     ")); //true
//        console.log(/\s/.test("asdfadsf")); //false

         //\w [a-zA-Z_0-9] 单词字符  \W [^a-zA-Z_0-9] 非单词字符
//        console.log(/\w/.test("$")); //false
//        console.log(/\w/.test("_")); //true

    简单类

       //必须是完整的，只多不能少
        console.log(/chaoge/.test("chaoge")); //true
        console.log(/chaoge/.test("chaogenihao")); //true
        console.log(/chaoge/.test("nihaochaoge")); //true
        console.log(/chaoge/.test("chaonihaoge")); //false
        console.log(/chaoge/.test("chao")); //false
//
          //只要包含里面的任何一个就可以
        console.log(/[chaoge]/.test("chaoge")); //true
        console.log(/[chaoge]/.test("chaogenihao"));//true
        console.log(/[chaoge]/.test("nihaochaoge"));//true
        console.log(/[chaoge]/.test("chaonihaoge"));//true
        console.log(/[chaoge]/.test("chao"));//true
        console.log(/[chaoge]/.test("a;ljr jglkrj grjgr"));//true
        console.log(/[chaoge]/.test("*"));//false

    负向类

             //不够和正好，返回 false;多了或者没有返回 true
//        console.log(/[^abc]/.test("iiii"));//true
//        console.log(/[^abc]/.test("aiiii"));//只有一部分睁一只眼闭一只眼true
//        console.log(/[^abc]/.test("abc"));//false
//        console.log(/[^abc]/.test("b"));//false
//        console.log(/[^abc]/.test("bcdef"));//只有一部分睁一只眼闭一只眼true
//        console.log(/[^abc]/.test("abcdef"));//只有一部分睁一只眼闭一只眼true

    范围类

    //        console.log(/[a-c]/.test("dghhj")); //false
//        console.log(/[a-c]/.test("b")); //true

    组合类

                 console.log(/[a-c1-6]/.test("dghhj")); //false
            console.log(/[a-c1-6]/.test("b")); //true
            console.log(/[a-c1-6]/.test(8)); //false
            console.log(/[a-c1-6]/.test(3)); //true
            console.log(/[a-c1-6]/.test("addddd")); //true

    正则边界

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        //边界必须是abc
        console.log(/^abc$/.test("abc")); //true
        console.log(/^abc$/.test("a")); //false
        console.log(/^abc$/.test("ac")); //false
        console.log(/^abc$/.test("abcabc")); //false



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

    量词

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        //量词  （   *+?   {}  ）

        //a的个数要 >=0
        console.log(/^a*$/.test("b")); //false
        console.log(/^a*$/.test(""));
        console.log(/^a*$/.test("a"));
        console.log(/^a*$/.test("aa"));
        console.log(/^a*$/.test("aaa"));
        console.log(/^a*$/.test("aaaa"));
        console.log(/^a*$/.test("aaaab")); //false


        //a的个数要 >=1
        console.log(/^a+$/.test("b")); //false
        console.log(/^a+$/.test("")); //false
        console.log(/^a+$/.test("a"));
        console.log(/^a+$/.test("aa"));
        console.log(/^a+$/.test("aaa"));
        console.log(/^a+$/.test("aaaa"));
        console.log(/^a+$/.test("aaaab")); //false


        //a的个数要么0，要么1；
        console.log(/^a?$/.test("b")); //false
        console.log(/^a?$/.test(""));  //true
        console.log(/^a?$/.test("a"));  //true
        console.log(/^a?$/.test("aa")); //false
        console.log(/^a?$/.test("aaa")); //false
        console.log(/^a?$/.test("aaaa")); //false
        console.log(/^a?$/.test("aaaab")); //false


        //{n} 一个参数，循环n次。
        //{n,} 一个参数，循环>=n次。
        //{n,m} 一个参数，循环n次到m次。
        console.log(/^a{1}$/.test("a"));
        console.log(/^a{1,}$/.test("aa"));
        console.log(/^a{1,4}$/.test("aaa"));
        console.log(/^a{1,4}$/.test("aaaa"));
        console.log(/^a{1,4}$/.test("aaaaa")); //false


        //括号提高运算优先级，| 前后有一个符合就可以
        console.log(/(abc)|(xyz)/.test("ab")); //false
        console.log(/(abc)|(xyz)/.test("abcd")); //true
        console.log(/(abc)|(xyz)/.test("xy")); //false
        console.log(/(abc)|(xyz)/.test("xyzaaa")); //true
        console.log(/(abc)|(xyz)/.test("abxy")); //false


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

    09-验证固定电话号.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="box">
        <input type="text"/>
        <span>请输入！</span>
    </div>

    <script>
        //需求：验证座机号！
        //直辖市：三位-八位（010-82935150）
        //普通市：四位-七位（0314-3160186）

        //步骤：
        //1.老三步。
        //2.判断input里面的 值，是否符合正则标准。
        //3.符合给一个样式，不符合给另外一个样式。


        //1.老三步。
        var inp = document.getElementsByTagName("input")[0];
        var span = inp.nextElementSibling || inp.nextSibling;

        inp.onblur = function () {
            //2.判断input里面的值，是否符合正则标准。
//            var reg1 = /^0\d{2}-8\d{7}$/;
//            var reg1 = /^0\d{3}-3\d{6}$/;
            //两个都要执行
            var reg1 = /(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/;

            if(reg1.test(inp.value)){
                //3.符合给一个样式，不符合给另外一个样式。
                span.style.color = "green";
                span.innerHTML = "恭喜您，输入正确！";
            }else{
                span.style.color = "red";
                span.innerHTML = "对不起，您输入的为非法字符！";
            }
        }



    </script>

</body>
</html>

    10-验证中文名字.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="box">
        <input type="text"/>
        <span>请输入！</span>
    </div>

    <script>

        //需求：输入名字，两位-四为。
        //原理: unicode（\u4e00-\u9fa5）编码{2,4}
        //步骤：
        //1.老三步
        //2.判断input中的value值是否符合正则标准
        //3.符合给一个样式，不符合给另外一个样式

        //1.老三步
        var inp = document.getElementsByTagName("input")[0];
        var span = inp.parentNode.children[1];

        inp.onblur = function () {
            //unicode（\u4e00-\u9fa5）编码{2,4}
            var reg = /^[\u4e00-\u9fa5]{2,4}$/;
            //2.判断input中的value值是否符合正则标准
            if(reg.test(this.value)){
                //3.符合给一个样式，不符合给另外一个样式
                span.style.color = "green";
                span.innerHTML = "恭喜您，输入正确！";
            }else{
                span.style.color = "red";
                span.innerHTML = "对不起，您输入的为非法字符！";
            }

        }


    </script>

</body>
</html>

    11-三个方法.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>

        //trim();去除前后的空格
//        var str = "     你好  我很好！     ";
//        console.log(str);
//        console.log(str.trim());

        //replace(); 替换和全局替换值。 i忽略大小写  g全部替换
//        var str = "Today is fine day,today is fine day!"
//        console.log(str);
//        console.log(str.replace(/today/ig,"tomorrow"));


        //search();  给字符差索引
        var str = "abcdefg";
        console.log(str.search(/bc/));
        console.log(str.indexOf("bc"));



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

    12-trim封装.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>

        var str = "     你好，我      很好！      ";
        console.log(str);
//        console.log(str.trim());
        console.log(trim(str));

        function trim(str){
            var aaa = str.replace(/(^\s+)|(\s+$)/g,"");
            return aaa;
        }


        //面向对象学习
//        String.prototype.aaa = function () {
//            var aaa = str.replace(/(^\s+)|(\s+$)/g,"");
//            return aaa;
//        }
//        console.log(str.aaa());
    </script>
</body>
</html>

    相关文章

      网友评论

          本文标题：正则表达式

          本文链接：https://www.haomeiwen.com/subject/ovuivxtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|正则表达式|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！