正则简单学习

浅拷贝----复制对象引用地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    /*浅拷贝:拷贝就是复制,就相当于把一个对象中的所有内容,复制一个给另一个对象,
    直接复制,或者说,就是吧一个对象的地址给了另一个对象,他们指向相同,两个对象
    之间的属性或者方法,都可以使用
    
    */
    var obj1 = {
        age:10,
        sex:'男',
        car:["奔驰","宝马","法拉利"]
    }
    var obj2 = {}
    //写一个函数,作用,将一个对象的属性赋值到另一个对象中,浅拷贝
    function extend(a,b){
       // 循环时,空对象的key直接使用key
        for(var key in a){
            b[key]=a[key];
        }
    }
    extend(obj1,obj2)
    console.dir(obj2);
    console.dir(obj1);
  
    </script>
</head>
<body>
    
</body>
</html>

深拷贝----开辟空间重新存储

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    var obj1 ={
        age:10,
        sex:"男",
        car:["兰博基尼","法拉利","比亚迪","吉利"],
        computer:{
            name:"dell",
            age:6,
            color:"黑白色"
        }
    };
    var obj2 ={};
    //通过函数实现,把对象a中的所有的数据深拷贝到对象b中
    function extend(a,b){
        for(var key in a){
            //先获取a对象中每个属性的值
            var item = a[key];
            if(item instanceof Array){
                //如果是数组,那么在b对象中添加一个新的属性,并且属性的值也是数组
                b[key]=[];
                //调用这个方法,吧a对象这个数组的属性一个一个复制到b对象的这个数组属性中
                extend(item,b[key]);
            }
            else if(item instanceof Object){
                b[key]={};
                extend(item,b[key]);
            }
            else{
                b[key]=item
            }
        }
    }
    extend(obj1,obj2);
    for(var i in obj2){
        console.log(obj2[i]);
    }
    
    </script>
</head>
<body>
    
</body>
</html>

正则

正则表达式:页脚规则表达式,按照一定的规则组成一个表达式,这个表达式的作用主要匹配字符串的

正则表达式:页脚规则表达式,按照一定的规则组成一个表达式,这个表达式的作用主要匹配字符串的

正则表达式的作用:匹配字符串的
大多编程语言都可以使用
正则表达式的组成:由元字符或者限定符组成的一个式子
元字符:
.表示的是:除了\n以外的任意的一个字符 "fdsf25";
[]表示的是:范围,[0-9]表示的是0-9之间任意的一个数字,“789"[0-9]
[a-z]表示的是:所有的小写的字母中的任意的一个
[A-Z]表示的是:所有的大写的字母中的任意的一个
[a-zA-Z]表示的是:所有的字母中的任意的一个
[0-9a-zA-z]表示的是:所有的数字或者字母中的一个
[]另一个函数:把正则表达式中元字符的意义干掉
[.]就是一个.
|或者 [0-9]|[a-z]表示的是要么是一个数字,要么是一个小写的字母
()分组 提升优先级 [0-9]|([a-z])|[A-Z] 先算中间的

  • 表示的是:前面的表达式出现了0次到多次
    [a-z][0-9]* 小写字母中的任意一个,后面是要么没有数字,要么是多个数的

都是元字符,但是也可以叫限定符,下面的这些

  • 表示的是:前面的表达式出现了1次到多次
    [a-z][9]+ 小写字母一个后面最少一个9,或者多个9
    ? 表达的是:前面的表达式出现了0次到1次,最少是0次,最多1次,另一个义:组织贪婪模式
    [4][a-z]? "1115544aj"
    限定符:限定前面的表达式出现的次数
    {0,} 表示的是前面的表达式出现了0次到多次,和*一样
    {1,} 表示的是前面的表达式出现了1次到多次,和+一样
    {0,1} 表示的是前面的表达式出现了0次到1次,和?一样
    {5,10} 表示的是前面的表达式出现了5次到10次
    ^表示的是以什么开始,或者是取非 [1]以数字开头
    [^0-9]取反,非数字
    [^a-z]取反,非小写字母
    [^a-zA-Z]
    $ 表示已什么结束 [0-9][a-z]$必须以小写字母结束
    \d 数字中的任意一个
    \D 非数字中的一个
    \s 空白符的一个
    \S 非空白符的一个
    \w 非特殊符号 _
    \W 特殊符号
    \b 单词的边界

简单例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    /*
    经验:1、找规律 2、不要追求完美
    身份证的正则表达式
    15位或者18位
    ([1-9][0-9]{14})|([1-9][0-9]{16}[0-9Xx])
    ([1-9][0-9]{14})([0-9]{2}[0-9Xx])?
    1、座机号码正则表达式
    010-1984555
    5075-5635555
    [0-9]{3,4}[-][0-9]{8}
    \d{3,4}[-]\d{8}
    2、QQ号的正则表达式
    [1-9][0-9]{4,11}
    \d{5,11}
    3.手机号码的正则表达式
    ([1][358][0-9][0-9]{8})|([1][4][0-9]{8})
    4.邮箱的正则表达式
    [0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+[.]([a-zA-Z]+){1,2}
    */
    
    </script>
</head>
<body>
    
</body>
</html>

验证密码强度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .slevel0{
        margin-left: 80px;
        width: 120px;
        height: 14px;
        border: 1px solid #CCC;
    }
    .slevel1{
        margin-left: 80px;
        width: 50px;
        height: 14px;
        background-color: red;
    }
    .slevel2{
        margin-left: 80px;
        width: 100px;
        height: 14px;
        background-color: orange;
    }
    .slevel3{
        margin-left: 80px;
        width: 150px;
        height: 14px;
        background-color: green;
    }
    </style>
</head>
<body>
    <label for="">请输入密码</label>
    <input type="text" id="password">
    <br/>
    <label for="">密码强度</label>

    <div id="slevel" class="slevel0"></div>
    <script>
        window.onload=function(){
            function my$(id){
            return document.getElementById(id);
            }
            /*
            思路:  
            1、先定义一个方法获取输入的密码级别
            2、对键盘抬起进行级别判断
            3、给相应的密码强度

            密码强度:数字 字母 特殊符号
            1 数字| 字母 |特殊符号
            2 数字 字母|字母 特殊符号|数字特殊符号
            3 数字 字母 特殊符号
            */
            //获取文本框键盘注册键盘抬起事件 
             my$("password").onkeyup=function(){
                 //优化代码----因为返回的级别对应class的级别,所以
                 if(this.value.length>=6){
                     var levl = getLevl(this.value);
                     my$("slevel").className = "slevel"+levl;
                 }else{
                    my$("slevel").className = "slevel0"
                 }
                 //---更加优化
              //   my$("slevel").className = "slevel"+(this.value.length>=6?getLevl(this.value):0)   ;
            //     //每次键盘抬起都要获取文本框的内容,验证文本框中的内容,根据内容显示级别
            //     if(this.value.length>=6){
            //         var levl = getLevl(this.value);
            //         if(levl==1){
            //             //弱
            //             my$("slevel").className = "slevel1";
            //         }
            //         else if(levl==2){
            //             my$("slevel").className = "slevel2";
            //         }
            //         else if(levl==3){
            //             my$("slevel").className = "slevel3";
            //         }
            //     }else{
            //         my$("slevel").className = "slevel0";
            //     }
               

             }

         
            
            
            //给我密码 ,我返回对应的级别
            function getLevl(pwd){
                //默认级别
                var levl = 0;
                //判断密码中是否有数字|字母|特殊符号
                if(/[0-9]/.test(pwd)){
                    levl++;
                }
                //判断密码中有没有字母
                if(/[a-zA-Z]/.test(pwd)){
                    levl++;
                }
                //判断密码中是否有特殊符号
                if(/[^0-9a-zA-Z_]/.test(pwd)){
                    levl++;
                }
                return levl;
            }
        }
        
    </script>
</body>
</html>

验证用户输入的是不是邮箱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
   
</head>
<body>
    请您输入邮箱地址:<input type="text" value="" id="email">
    <script>
    //获取文本框,注册失焦事件
    document.getElementById("email").onblur=function(){
       var reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
        if(reg.test(this.value)){
            this.style.backgroundColor = "pink";
        }
        else{
            this.style.backgroundColor = "red";
        }
    }
    </script>
</body>
</html>

验证用户输入的是不是中文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    请输入名字:
    <input type="text" id="name">
    <script>
        //escape()
     document.getElementById("name").onblur=function(){
        var reg = /^[\u4e00-\u9fa5]+$/;
        if(reg.test(this.value)){
            this.style.backgroundColor= "red";
        }else{
            this.style.backgroundColor= "yellow";
        }
     }
    </script>
</body>
</html>

注册的案例验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <label for="">QQ</label><input type="text" id="qq"><span></span><br/>
    <label for="">手机</label><input type="text" id="e_phone"><span></span><br/>
    <label for="">邮箱</label><input type="text" id="e_Email"><span></span><br/>
    <label for="">座机</label><input type="text" id="e_temlete"><span></span><br/>
    <label for="">姓名</label><input type="text" id="e_name"><span></span><br/>
    <script>
    //
    function my$(id){
        return document.getElementById(id);
    }
    //qq
    checkInput(my$("qq"),/^\d{5,9}$/) ;
    //手机
    checkInput(my$("e_phone"),/^\d{11}$/) ;
    //邮箱
    checkInput(my$("e_Email"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/) ;
    //座机
    checkInput(my$("e_temlete"),/^\d{3,4}[-]\d{7,8}$/) ;
    //
    checkInput(my$("e_name"),/^[\u4e00-\u9fa5]+$/) ;

    
    //定义一个方法 传如input的id和正则表达式
    function checkInput(input,reg){
        //为input注册失焦事件
        input.onblur=function(){
            if(reg.test(this.value)){
                this.nextElementSibling.innerText = "正确了";   
                this.nextElementSibling.style.color ="green";
            }
            else{
                this.nextElementSibling.innerText = "错误了";   
                this.nextElementSibling.style.color ="red";
            }
        }
    }
    </script>
</body>
</html>

正则的其他方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //正则表示中,/g表示全局
        //  /i表示忽略大小写
    var str = "中国移动:10086,中国联通10010,中国电信10000";
    var att = str.match(/\d{5}/g);
    console.log(att);
    //提取这里的日
    var str1 = "2019-01-03";
    var arr = str1.match(/(\d{4})[-](\d{2})[-](\d{2})/g);
    //自动提取
    console.log(RegExp.$3);
    //替换
    var str2 = "小航好帅哦,真的是太帅了,帅,就是真帅";
    str2 = str2.replace(/帅/g,"猥琐");
    console.log(str2);
    //删除空白符
    var str3 = "哦嘛噶     ,好开心啊   啊啊啊 ";
    str3 = str3.replace(/\s+/g,"");
    console.log(str3);
    //所有的h都替换成S   /ig
    var str4 = "Hhpph";
    str4 = str4.replace(/[h]/ig,"S");
    console.log(str4);
    //exec方法
    var str6 = "中国移动:10086,中国联通10010,中国电信10000";
    //var att = str.match(/\d{5}/g);
    var reg = /\d{5}/g;
    var arr5 = reg.exec(str6);
    while(arr5!=null){
        console.log(arr5[0]);
        arr5=reg.exec(str6)
    }
    console.log(arr5);
    </script>
</head>
<body>
    
</body>
</html>

真数组和伪数组的区别

//伪数组和数组的区别
    //真数组的长度可变的
    //伪数组的长度不可变
    //真数组的可以使用数组中的方法
    //伪数组的不可以使用数组中的方法
    var arr = [10,20,30];
    var obj = {
        0:10,
        1:20,
        2:30
    }
    //遍历数组
    arr.forEach(function(item){
        console.log(item)
    })
    for(var i = 0; i < arr.length; i++){
        console.log(arr[i]);
    }
    </script>

  1. 0-9 ↩︎

posted @ 2019-01-24 16:31  傻狍子  阅读(266)  评论(0编辑  收藏  举报