正则简单学习

时间 2019-12-14

原文原文链接

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

<!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>

正则

正则表达式：页脚规则表达式，按照必定的规则组成一个表达式，这个表达式的做用主要匹配字符串的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次
^表示的是以什么开始，或者是取非 ^[0-9]以数字开头
[^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>
    /*
    经验：一、找规律 二、不要追求完美
    身份证的正则表达式
    15位或者18位
    ([1-9][0-9]{14})|([1-9][0-9]{16}[0-9Xx])
    ([1-9][0-9]{14})([0-9]{2}[0-9Xx])?
    一、座机号码正则表达式
    010-1984555
    5075-5635555
    [0-9]{3,4}[-][0-9]{8}
    \d{3,4}[-]\d{8}
    二、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 数字 字母 特殊符号
            */
            //获取文本框键盘注册键盘抬起事件 
             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>