Web前端-JavaScript--正则表达式

最新推荐文章于 2022-10-04 15:22:09 发布

yanghainan0318

最新推荐文章于 2022-10-04 15:22:09 发布

阅读量158

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/yanghainan0318/article/details/105809260

版权

web前端专栏收录该内容

49 篇文章 1 订阅

订阅专栏

正则表达式

正则表达式:

常规表达式 Regular Expression

能够检查字符串是否符合一个指定的规范

正则表达式的组成: 普通字符和元字符组成正则表达式的对象创建:

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

2.new对象创建方式 var regex=new RegExp(/a/);

正则五大类

预定类

regex=/\d/; //数字字符 //只要出现数字就行

regex=/\D/; //非数字字符 //只要出现非数字就行

regex=/\s/; //空白字符 //只要出现空白字符就行

regex=/\S/; //非空白字符 //只要出现非空白就行

regex=/\w/; //单词字符数字字母(大小写)下划线 //只要出现就行

regex=/\W/; //非单词字符 //只要出现

简单类

regex=/[abc]/; //一个中括号表示一个字符位 //abc其中只要出现一个就行

负向类

regex=/[^abc]/; //除了abc其他出现任意就行

范围类

regex=/[a-z]/; //小写字母出现一个就行

组合类

regex=/[a-hm-x]/; //a-h或者m-x之间只要出现一个就行

正则的量词:

*: 任意多个 reg=/^[abc]*$/;

+:1个到多个 reg=/^[abc]+$/; //至少一次

?:0个到1个 reg=/^[abc]?$/;

{n}:恰好n个 reg=/^[abc]{3}$/;

{n,}:至少n个 reg=/^[abc]{3,}$/; //至少3次

{n,m}:n到m个包含m reg=/^[abc]{3,6}$/; //3到6次

字符串调用macth

匹配正则从而检查字符串是否正确

能够实现用正则去字符串中部分查找

类似于 indexOf

但是indexOf只能固定匹配

而不能模糊匹配字符串的match匹配正则可以模糊匹配

一般match 不会加正则的边界因为需要字符串中部分查找

找到以后返回第一个找到匹配的字符串

如果加上//g 全局查找

则把找到的所有字符串放到数组的每一个元素里面

 console.log("abc".match(/[a-z]/g));//模糊匹配

    //模糊替换
    console.log("He5llo3Wo7rld".replace(/\d/g,"哈哈"));

trim方法在IE8及以下不能使用

解决问题

str.replace(/^ +| +$/g,"")

密码强度案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    body {
        background: #ccc;
    }

    label {
        width: 40px;
        display: inline-block;
    }

    .container {
        margin: 100px auto;
        width: 400px;
        padding: 50px;
        line-height: 40px;
        border: 1px solid #999;
        background: #efefef;
    }

    span {
        margin-left: 30px;
        font-size: 12px;
        padding: 2px 20px 0;
        color: #ccc;
    }

    .wrong {

        color: red;
        background: url(images/error.png) no-repeat;

    }

    .right {
        color: green;
        background: url(images/right.png) no-repeat;
    }

    .pwd {
        width: 220px;
        height: 20px;
        background: url("images/strong.jpg") no-repeat;
    }

    .str1 {
        background-position: 0 -20px;
    }

    .str2 {
        background-position: 0 -40px;
    }

    .str3 {
        background-position: 0 -60px;
    }

    .str4 {
        background-position: 0 -80px;
    }
</style>
<body>




<div class="container">
    <label for="inp1">QQ</label><input type="text" id="inp1"><span >输入正确的QQ号码</span><br>
    <label for="inp2">手机</label><input type="text" id="inp2"><span>输入11位手机号码</span><br>
    <label for="inp3">邮箱</label><input type="text" id="inp3"><span>输入正确邮箱</span><br>
    <label for="inp4">座机</label><input type="text" id="inp4"><span>输入您的座机</span><br>
    <label for="inp5">账号</label><input type="text" id="inp5"><span>亲输入您的账号</span><br>
    <label for="inp6">密码</label><input type="text" id="inp6"><span >请输入您的密码</span><br>
    <div id="password" class="pwd"></div>
</div>
<script>
    /*
    *   需求:
    *       挨个输入框进行格式检查

    *
    * */
    var inp1=document.getElementById("inp1");
    var inp2=document.getElementById("inp2");
    var inp3=document.getElementById("inp3");
    var inp4=document.getElementById("inp4");
    var inp5=document.getElementById("inp5");
    var inp6=document.getElementById("inp6");
    var password=document.getElementById("password")


//    QQ号码的检查
    inp1.oninput=function () {
        var val=this.value;

        if(/^[1-9]\d{4,11}$/.test(val)){

            setRight(this,"QQ号码格式正确");


        }else{

            setWrong(this,"请输入正确QQ号")
        }

    }
//    手机号的检查
    inp2.oninput=function () {
        var val=this.value;
        if(/^1[3-9]\d{9}$/.test(val)){
            setRight(this,"手机号格式正确")

        }else{
            setWrong(this,"手机号格式错误!")
        }

    }
//    邮箱检查
    inp3.oninput=function () {
        var val=this.value;
        if(/^[\w\-]{6,}\@[\w]+[\w\.]{2,}$/.test(val)){
            setRight(this,"邮箱格式正确")
        }else{
            setWrong(this,"邮箱格式错误")
        }


    }
//    座机号匹配
    inp4.oninput=function () {
        var val=this.value;
        if(/^0[12]\d-\d{8}$|^0\d{3}-\d{7}$/.test(val)){
            setRight(this,"座机格式正确")
        }else{
            setWrong(this,"座机格式错误")
        }
    }
    inp5.oninput=function () {
        var val=this.value;
        if(/^[a-zA-Z_]{2,}[\w\-]{4,14}$/.test(val)){
            setRight(this,"账号格式正确")
        }else{
            setWrong(this,"账号格式错误")
        }


    }
    var level;
    inp6.oninput=function () {
        var val=this.value;
        if(/^[\$\w\-]{6,18}$/.test(val)){
            setRight(this,"密码格式正确")
            level=1;
            if(val.match(/[a-z]/g)){
               level++;

            }
            if(val.match(/[A-Z]/g)){
                level++;
                
            }
            if(val.match(/[\$\_]/g)){
                level++;
                
            }
            /*var arr=["低","中","高","强"];
            console.log("密码强度为:"+arr[level]);*/

            password.setAttribute("class","pwd str"+level);


        }else{
            setWrong(this,"密码格式错误")
            password.setAttribute("class","pwd");
        }

        
    }
    


//    关于正确和错误时 显示文本样式的步骤封装

    function setRight(inp,msg) {
        var next=inp.nextElementSibling ||inp.nextSibling;
        next.innerHTML=msg;
        next.setAttribute("class","right");

    }

    function setWrong(inp,msg) {
        var next=inp.nextElementSibling ||inp.nextSibling;
        next.innerHTML=msg;
        next.setAttribute("class","wrong");

    }



</script>


</body>
</html>

yanghainan0318

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端-JavaScript--正则表达式

正则表达式正则表达式:常规表达式 Regular Expression能够检查字符串是否符合一个指定的规范正则表达式的组成: 普通字符和元字符组成正则表达式的对象创建:1.字面量创建 var regex=/a/;2.new对象创建方式 var regex=new RegExp(/a/);正则五大类预定类regex=/\d/; //数字字符 //只要出现数...
复制链接

扫一扫