正則簡單學習

時間 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>