Day12-JavaScript

前端拓海

已于 2023-12-02 15:12:32 修改

阅读量403

点赞数 14

文章标签： javascript 开发语言 ecmascript

于 2023-11-30 16:58:38 首次发布

本文链接：https://blog.csdn.net/Spirs/article/details/134716604

版权

一.创建正则

 <script>

        // RegExp js的内置对象
        // js内置对象：Number  String  Boolean  Math  Date  Array  RegExp


        // 创建一个正则表达式(自定义一个匹配规则)

        // 1.字面量创建
        // var reg = /a/;

        // 2.使用new 调用RegExp 构造函数
        var reg = new RegExp(/book/);
        console.log(reg);
        console.dir(reg)

 </script>

二.测试正则表达式

<script>

        // 创建一个匹配规则
        // var reg = /nice/;

        var reg = /nice/i;
        var str = "today is Nice day";

        var reg2 = /a/g;
        var str2 = "aaaaaaaaaaa";

        // 验证 字符串
        // test 返回值是一个布尔值
        console.log(reg.test(str));
        console.log(reg2.test(str2));

        // i  忽略大小写
        // g  全局匹配
        // gi 全局匹配+忽略大小写

        // exec() 方法用于检索字符串中的正则表达式的匹配。如果字符串中有匹配的值返回该匹配值，否则返回 null。
        // 如果匹配成功，exec() 方法返回一个数组，并更新正则表达式对象的 lastIndex 属性
        console.log(reg2.exec(str2))
        console.log(reg2.exec(str2))
        console.log(reg2.exec(str2))
        console.log(reg2.exec(str2))

    </script>

三.边界符

<script>

        // ^ 以谁开始
        // $ 以谁结束

        // var reg = /^abc/
        // var reg = /abc$/
        var reg = /^abc$/;

        var str = "abcdefghijklmnopqrstuvwxyz";
        var str2 = "defghijklmnopqrstuvwxyzabc";
        var str3 = "abcdefghijklmnopqrstuvwxyzabc";
        var str4 = 'abc'
        // console.log(reg.test(str));
        // console.log(reg.test(str2));
        // console.log(reg.test(str2));
        console.log(reg.test(str3));
        console.log(reg.test(str4));

 </script>

四.中括号

<script>

        // [] 表示匹配其中任意一项
        var reg = /[abc]/;
        console.log(reg.test('a'));
        console.log(reg.test('b'));
        console.log(reg.test('c'));
        console.log(reg.test('d'));

        var reg2 = /[a-z|A-Z|0-9]/
        console.log(reg2.test("G"));
        console.log(reg2.test("5"));
        console.log(reg2.test("S5"));
 
</script>

五.量词符

 <script>

        // * 出现0次或更多次
        // + 出现一次或更多次
        // ? 出现0次或1次
        // {n}  出现n次 n:程序员指定次数
        // {n,} 出现n次或更多次
        // {n,m} 出现n到m次

        // var reg = /a*/;
        // var reg = /a+/;
        // var reg = /a?/
        // var reg = /^a{6}$/;
        // var reg = /^a{6,}$/;
        var reg = /^[a-z]{6,18}$/;

        console.log(reg.test("avvvvvvvvvvvv"));
        console.log(reg.test(""));
        console.log(reg.test("a"));
        console.log(reg.test("aaaaaaaaaaa"));
        console.log(reg.test("adminqwertyu"));

        // 用户名验证
        var userReg = /^[a-z|A-Z|0-9|_]{8,16}$/;
        // 只能输入以数字字母下划线 8-16位字符
        console.log(userReg.test("_zhang188"));

 </script>

六.正则提取

<script>

        // 创建正则
        var reg = /good/i;
        // String对象的match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
        var str = "today is good day,good good study,day day up";

        // 根据正则表达式 提取字符串中的内容
        console.log(str.match(reg));

        // 取消字符串中的空格
        // console.log(str.split(' ').join(''));

</script>

七.replace

<script>

        // str.replace(targetStr,newStr);
        var str = "today is good day,good good study,day day up";

        // 第一个参数可以修改为正则
        console.log(str.replace('good',"GOOD"));
        console.log(str.replace(/good/g,"GOOD"));
        // 这个时候 如果想让原字符串修改 必须要多一步  赋值
        str = str.replace(/good/g,"GOOD");
        console.log(str);

</script>

八.案例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .submit {
            width: 100px;
            height: 30px;
            background-image: linear-gradient(to right bottom, pink, skyblue);
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 10px;
        }
        img{
            width: 100px;
            height: 100px;
            display: none;
        }
    </style>
</head>

<body>

    <form action="">
        <div>
            用户名: <input type="text" class="username"><img class="hint" alt="">
        </div>
        <div>
            密码: <input type="password" class="pwd">
        </div>
        <div>
            手机号: <input type="tel" class="tel"><img class="hinttel" alt="">
        </div>
        <div>
            邮箱: <input type="email" class="email">
        </div>
        <div class="submit">
            提交
        </div>
    </form>

    <script>

        var username = document.getElementsByClassName("username")[0];
        var pwd = document.getElementsByClassName("pwd")[0];
        var tel = document.getElementsByClassName("tel")[0];
        var email = document.getElementsByClassName("email")[0];
        var submit = document.getElementsByClassName("submit")[0];
        var hint = document.getElementsByClassName("hint")[0];
        var hinttel = document.getElementsByClassName("hinttel")[0];

        // 1.事件源
        // 2.事件类型
        // 3.事件处理程序
        var userReg = /^[a-zA-Z0-9_]{6,18}$/;
        username.oninput = function () {
            // this 在事件绑定中 指向事件源
            console.log(this.value);
            // 拿正则表达式验证用户输入的值
            console.log(userReg.test(this.value));
            
            hint.style.display = "inline-block";
            if (userReg.test(this.value)) {
                
                hint.src = "https://n.sinaimg.cn/sinacn18/242/w634h408/20180608/54fd-hcscwxa6333205.png"
            } else {
                hint.src = "https://img0.baidu.com/it/u=4204695701,1693707332&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            }
        }

        var telReg = /^1[3|5|7|8|9][0-9]{9}$/
        tel.oninput = function () {
            // this 在事件绑定中 指向事件源
            console.log(this.value);
            // 拿正则表达式验证用户输入的值
            
            hinttel.style.display = "inline-block";
            if (telReg.test(this.value)) {
                
                hinttel.src = "https://n.sinaimg.cn/sinacn18/242/w634h408/20180608/54fd-hcscwxa6333205.png"
            } else {
                hinttel.src = "https://img0.baidu.com/it/u=4204695701,1693707332&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            }
        }

    </script>

</body>

</html>