day13 正則表達式

時間 2021-01-14

標籤 javascript html 前端 java 正則表達式 express 數組安全服務器函數欄目正則表達式简体版

原文原文鏈接

1. 正則表達式

正則表達式 (regular expression) 是一個描述字符規則的對象。如：只能出現字母，只能出現數字，前三個必須是數字等。javascript

前端每每有大量的表單數據校驗的工做，採用正則表達式會使得數據校驗的工做量大大減輕，如郵箱驗證，手機號碼，等等。比起用字符串的函數來判斷，更簡單易用。html

正則表達式的組成：普通字符或者特殊字符。前端

定義：

（1）字面量java

var reg = /普通字符或者特殊字符/【修飾符】正則表達式

var reg = /a/;//至少包含一個a
console.log(reg.test('ab'));//true

（2）構造方法express

var reg = new RegExp("普通字符或者特殊字符",【修飾符】);數組

規則：

普通字符:看起來是啥就是啥；
特殊字符:具備特殊含義的字符；安全
- a.單個字符
^：正則開始服務器
- $ : 正則結束函數
  - ^$同時存在表明只能
- . : 元字符, 表示任意一個字符
- 反斜槓: 表示轉義字符反斜槓.表示.
  - 轉義字符:對於沒有超能力的字符，賦予能力
  - 對於有超能力的字符，取消能力
- +：表示其前面緊挨着的字符至少出現1次等價{1,}
- 星號：表示其前面出現的字符至少出現過0次等價{0,}
- ?: 表示其前面出現的字符至少出現過0次，至多1次等價{0,1}
- | : 表示或者

b.各類括號
- {m,n}表示括號前面緊挨着的字符至少出現m個，至多出現n個
  - 以b開頭至少3個a 至多5個a /^ba{3,5}&/
- {m}表示括號前面緊挨着的字符只能出現m個
- {m,}表示括號前面緊挨着的字符至少出現m個
- [] 表示括號內的任意一個字符
- [a-z]表示任意一個小寫字母 [a-zA-Z0-9]
¹表示非括號內的任意一個字符
- ()通常與或連用表示優先級
[u4e00-u9fa5] 任意一箇中文字符
c.組合字符
- d: 0-9之間的任意一個數字 d只佔一個位置
- D: 除了d
- w: 數字，字母，下劃線 0-9 a-z A-Z _
- W: 除了w
- s: 空格或者空白等
- S: 除了s

注意：

轉義字符:對於沒有超能力的字符，賦予能力；對於有超能力的字符，取消能力；
[ ]另外一種或內部的內容被去掉超能力；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text"/>
        <button type="button">測試</button>
    </body>
</html>
<script type="text/javascript">
    var oBtn = document.querySelector('button');
    var oText = document.querySelector('input');
    oBtn.onclick = function(){
        var reg= /a/;//至少包含一個a
        reg= /asd/;//至少包含一個asd
        
        // 只能包含一個a
        reg = /^a$/;
        
        //以b開頭  至少3個a  至多5個a
        reg = /^ba{3,5}$/;
        
        // 6個5 
        reg = /^5{6}$/;
        
        //郵編   6位數字
        reg = /^\d{6}$/;
        
        //定義一個由字母或數字或下劃線組成的用戶名   範圍在6,18之間 
        reg= /^\w{6,18}$/;
        //定義一個由字母或數字或下劃線組成的用戶名  開頭不能是數字   範圍在6,18之間
        reg= /^\D\w{5,17}$/;
        //定義一個密碼  至少6位
        reg=  /^.{6,}$/;
        
        //  www.baidu.com
        reg = /^www.baidu.com$/;//此處的.能夠是任意字符
        
        //轉義字符\:對於沒有超能力的字符，賦予能力
        //          對於有超能力的字符，取消能力
        reg = /^www\.baidu\.com$/;//\.表示真正的點
        reg = /^3\+5$/;// //3+5 斜槓+表明真正的+
        
        //以 13 或 15 或17 開頭的11位的手機號
        reg = /^1(3|5|7)\d{9}$/;
        reg = /^(13|15|17)\d{9}$/;
        //[]另外一種或 去掉超能力
        reg = /^[a1,b3+.]$/;//中括號裏的點沒有超能力 a或1或逗號或b或3或+或點
        reg = /^[0-9A-Za-z]$/;//數字或字母  0-9表明0到9
        reg = /^1[357]\d{9}$/;
        
        //兩個中文
        reg = /^[\u4e00-\u9fa5]{2}$/;
        
        // 空格
        reg = /^ $/;
        
        //[^  ]表示非括號內的任意一個字符
        reg = /^[^1ab3]$/;//方括號裏的^表明非
        
        console.log(reg.test(oText.value));
    }
</script>

表單驗證

action:提交的服務器文件
method:提交的方式
- get 默認爲get 效率高安全性低五菱宏光
- post 效率低安全性高武裝押運

<form action="ok.html" method="get">
</form>

onsubmit做爲submit按鈕的提交事件，返回值爲布爾，決定是否提交數據。true爲提交 false爲不提交。
焦點驗證: onblur 失去焦點

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="ok.html" method="get">
            ID:<input type="text"/><span></span><br>
            PWD:<input type="text"/><span></span><br>
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>
<script type="text/javascript">
    var regId = /^\D\w{5,17}/;
    var regPwd = /^.{6,}$/;
    var oInputs = document.querySelectorAll('input');
    var oF = document.querySelector('form');
    var flagId = false;
    var flagPwd = false;
    oInputs[0].onblur = function(){
        if(regId.test(this.value)){
            this.nextElementSibling.innerHTML = 'ID格式正確';
            flagId = true;
        }else{
            this.nextElementSibling.innerHTML = 'ID格式錯誤';
            flagId = false;
        }
    }
    oInputs[1].onblur = function(){
        if(regPwd.test(this.value)){
            this.nextElementSibling.innerHTML = 'PWD格式正確';
            flagPwd = true;
        }else{
            this.nextElementSibling.innerHTML = 'PWD格式錯誤';
            flagPwd = false;
        }
    }
    oF.onsubmit = function(){
        if(flagId && flagPwd){
            return true;
        }else {
            return false;
        }
            
    }    
</script>

正則中的相關方法和屬性

方法：

test()
- 檢驗一個字符串是否符合某一個正則規範，若是符合返回true,不然返回false
- 用法: reg.test(str)
exec()
- 根據正則表達式查找，結果知足,會返回一個長度爲1的數組（數組只有一個值）
- reg.exec(str)
- g全局屬性

var reg = /\d/g;
    var arr = reg.exec('1a2b3c')
    console.log(arr[0]);//1
    arr = reg.exec('1a2b3c')
    console.log(arr[0]);//2  全局屬性g

正則中相關字符串的方法:

search方法
- 返回與正則表達式查找內容匹配的第一個子字符串的位置
- 用法: str.search(reg)
- i 忽略字母大小寫

var str = "wo shi ge bi de lao wang";
    var reg1 =/sh/;
    console.log(str.search(reg1));//3
    var reg2 = /GE/i;//i忽略大小寫
    console.log(str.search(reg2));//7

match 方法
- 使用正則表達式模式對字符串執行查找，並將包含查找的結果做爲數組返回。
- 用法：str.match(rgExp)

var reg = /\d+/g;
    var str = "123a4356a987";
    console.log(str.match(reg)[0]);//123
    console.log(str.match(reg)[1]);//4356
    console.log(str.match(reg)[2]);//987

replace 方法
- 返回根據正則表達式進行文字替換後的字符串的複製。
- 用法：stringObj.replace(rgExp,replaceText)

var reg = /laowang/g;
    var str = "laowang的隔壁也住着laowang";
    console.log(str.replace(reg,"dahuang"));//dahuang的隔壁也住着dahuang

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。