引言

正則運算式在各種編程語言中，都有廣泛的應用，在JavaScript中更是不可或缺，正則運算式通常被用來檢索、替換那些符合某個模式(規則)的文本，例如驗證表單：用戶名表單只能輸入英文字母、數字或者下劃線，昵稱輸入框中可以輸入中文，此外，正則運算式還常用于過濾掉頁面內容中的一些敏感詞(替換)，或從字串中獲取我們想要的特定部分(提取)等，本文從正則運算式的基本概念入手，講解了正則運算式的特點和組成，并且詳細講解了正則運算式在JavaScript中的使用，并給出了一些在實際開發中經常用到的實體，

引言

1 正則運算式

1.1 什么是正則運算式

1.2 正則運算式的作用

1.3 正則運算式的特點

1.4 正則運算式的組成

1.5 元字串

1.5.1 常用元字串

1.5.2 限定符

1.5.3 其它

2 常用正則運算式

3 在JavaScript 中使用正則運算式

3.1 創建正則運算式物件

3.1.1 方式1

3.1.2 方式2：

3.2 引數

3.3 正則運算式匹配

3.4 實體

3.4.1 驗證密碼強弱

3.4.2 驗證郵箱

3.4.3 驗證中文名字

3.5 正則運算式提取

3.6 正則運算式替換

4 案例

4.1 表單驗證案例

4.2 過濾敏感詞匯案例

5 總結

1 正則運算式

1.1 什么是正則運算式

正則運算式是用于匹配規律規則的運算式，它的“鼻祖”可一直追溯到科學家對人類神經系統的作業原理的早期研究，現在在各種編程語言中，正則運算式都有廣泛的應用，在JavaScript中，正則運算式也是物件，正則表通常被用來檢索、替換那些符合某個模式(規則)的文本，
正則運算式是對字串操作的一種邏輯公式，就是用事先定義好的一些特定字符、及這些特定字符的組合，組成一個“規則字串”，這個“規則字串”用來表達對字串的一種過濾邏輯，

1.2 正則運算式的作用

給定的字串是否符合正則運算式的過濾邏輯(匹配)，
可以通過正則運算式，從字串中獲取我們想要的特定部分(提取)，
強大的字串替換能力(替換)，

1.3 正則運算式的特點

靈活性、邏輯性和功能性非常的強
可以迅速地用極簡單的方式達到字串的復雜控制
對于剛接觸的人來說，比較晦澀難懂

1.4 正則運算式的組成

普通字符
特殊字符(元字符)：正則運算式中有特殊意義的字符

示例演示：

\d 匹配數字
ab\d 匹配 ab1、ab2

1.5 元字串

1.5.1 常用元字串

元字符	說明
\d	匹配數字
\D	匹配任意非數字的字符
\w	匹配字母或數字或下劃線
\W	匹配任意不是字母，數字，下劃線
\s	匹配任意的空白符
\S	匹配任意不是空白符的字符
.	匹配除換行符以外的任意單個字符
^	表示匹配行首的文本(以誰開始)
$	表示匹配行尾的文本(以誰結束)

1.5.2 限定符

限定符	說明
*	重復零次或更多次
+	重復一次或更多次
?	重復零次或一次
{n}	重復n次
{n,}	重復n次或更多次
{n,m}	重復n到m次

1.5.3 其它

1.[] 字串用中括號括起來，表示匹配其中的任一字符，相當于或的意思，
2.[^] 匹配中括號以外的內容，相當于非的意思，
3.\ 轉義符，
4.| 或者，選擇兩者中的一個，注意|將左右兩邊分為兩部分，而不管左右兩邊有多長多亂，
5.() 從兩個直接量中選擇一個，分組， eg：gr(a|e)y匹配gray和grey，
6.[\u4e00-\u9fa5] 匹配漢字，

2 常用正則運算式

驗證手機號：

^\d{11}$

驗證郵編：

^\d{6}$

驗證日期 2012-5-01：

^\d{4}-\d{1,2}-\d{1,2}$

驗證郵箱 xxx@qq.cn:

^\w+@\w+\.\w+$

驗證IP地址 192.168.1.10

^\d{1,3}\(.\d{1,3}){3}$

3 在JavaScript 中使用正則運算式

3.1 創建正則運算式物件

在 JavaScript 中，有兩種方式創建正則運算式物件，

3.1.1 方式1

var reg = new Regex('\d', 'i');
var reg = new Regex('\d', 'gi');

3.1.2 方式2

var reg = /\d/i;
var reg = /\d/gi;

3.2 引數

標志	說明
i	忽略大小寫
g	全域匹配
gi	全域匹配+忽略大小寫

3.3 正則運算式匹配

匹配日期：

//  匹配日期var dateStr = '2020-10-24';
var reg = /^\d{4}-\d{1,2}-\d{1,2}$/console.log(reg.test(dateStr)); // true

3.4 實體

3.4.1 驗證密碼強弱

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8">
                <title>密碼強弱：公眾號AlbertYang</title>
        </head>
        <style type="text/css">
                #dv {
                        width: 300px;
                        height: 200px;
                        position: absolute;
                        left: 300px;
                        top: 100px;
                }

                .strengthLv0 {
                        height: 6px;
                        width: 40px;
                        border: 1px solid #ccc;
                        padding: 2px;
                }

                .strengthLv1 {
                        background: red;
                        height: 6px;
                        width: 40px;
                        border: 1px solid #ccc;
                        padding: 2px;
                }

                .strengthLv2 {
                        background: orange;
                        height: 6px;
                        width: 80px;
                        border: 1px solid #ccc;
                        padding: 2px;
                }

                .strengthLv3 {
                        background: green;
                        height: 6px;
                        width: 120px;
                        border: 1px solid #ccc;
                        padding: 2px;
                }
        </style>
        <body>
                <div id="dv">
                        <label for="pwd">密碼</label>
                        <input type="text" id="pwd" maxlength="16">
                        <div>
                                <em>密碼強度：</em>
                                <span id="strength"></span>
                                <div id="strengthLevel" class="strengthLv0"></div>
                        </div>
                </div>
                <script>
                        // 獲取文本框注冊鍵盤抬起事件
                        document.getElementById("pwd").onkeyup = function() {
                                // 每次鍵盤抬起都要獲取文本框中的內容,驗證文本框中有什么東西,得到一個級別,然后下面的div顯示對應的顏色
                                // 如果密碼的長度是小于6的,不判斷
                                let level = getLvl(this.value),
                                        levelStr = "弱";
                                if (level === 2) {
                                        levelStr = "中等";
                                } else if (level === 3) {
                                        levelStr = "強";
                                }

                                if (this.value.length >= 6) {
                                        document.getElementById("strengthLevel").className = "strengthLv" + level;
                                        document.getElementById("strength").innerHTML = levelStr;
                                } else {
                                        document.getElementById("strengthLevel").className = "strengthLv0";
                                        document.getElementById("strength").innerHTML = "";
                                }

                        };

                        // 根據密碼回傳對應的級別
                        function getLvl(pwd) {
                                let lvl = 0; // 默認是0級
                                // 判斷密碼中是否有數字
                                if (/[0-9]/.test(pwd)) {
                                        lvl++;
                                }
                                // 判斷密碼中有沒有字母
                                if (/[a-zA-Z]/.test(pwd)) {
                                        lvl++;
                                }
                                // 判斷密碼中是否有特殊符號
                                if (/[^0-9a-zA-Z_]/.test(pwd)) {
                                        lvl++;
                                }
                                return lvl; // 最小值是1,最大值是3
                        }
                </script>
        </body>
</html>

3.4.2 驗證郵箱

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8">
                <title>驗證郵箱：微信公眾號：AlbertYang</title>
        </head>
        <body>
                請您輸入郵箱地址:<input type="text" value="" id="email" /> *<br />
                <script>
                        //如果輸入的是郵箱,那么背景顏色為綠色,否則為紅色
                        //獲取文本框,注冊失去焦點的事件
                        document.getElementById("email").onblur = function() {
                                //判斷這個文本框中輸入的是不是郵箱
                                let reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_-]+([.][a-zA-Z]+){1,2}$/;
                                if (reg.test(this.value)) {
                                        this.style.backgroundColor = "green";
                                } else {
                                        this.style.backgroundColor = "red";
                                }
                        };
                </script>

        </body>
</html>

3.4.3 驗證中文名字

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8">
                <title>驗證中文名字：微信公眾號AlbertYang</title>

        </head>
        <body>
                請輸入您的名字:<input type="text" value="" id="userName" />*<br />
                <script>
                        // 是中文名字,則綠色,否則紅色
                        document.getElementById("userName").onblur = function() {
                                var reg = /^[\u4e00-\u9fa5]{2,6}$/;
                                if (reg.test(this.value)) {
                                        this.style.backgroundColor = "green";
                                } else {
                                        this.style.backgroundColor = "pink";
                                }
                        };
                </script>

        </body>
</html>

3.5 正則運算式提取

// 提取年齡var str = "張三18，李四36，王五60";
var array = str.match(/\d+/g);
console.log(array);

// 提取email地址var str = "4645354@qq.com,fangfang@usa.cn 256469312@qq.com,28265432@qq.com";
var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
console.log(array);

// 分組提取  
// 提取日期中的年  2020-10-24var dateStr = '2020-10-24';
// 正則運算式中的()作為分組來使用，獲取分組匹配到的結果使用Regex.$1 $2 $3...
var reg = /(\d{4})-\d{1,2}-\d{1,2}/;
if (reg.test(dateStr)) {
  console.log(RegExp.$1);
}

// 提取郵件中的每一部分var reg = /(\w+)@(\w+)\.(\w+)(\.\w+)?/;
var str = "932errewerrw@126.com";
if (reg.test(str)) {
  console.log(RegExp.$1);
  console.log(RegExp.$2);
  console.log(RegExp.$3);
}

3.6 正則運算式替換

// 1.替換所有空白字符var str = "   reeed  asafdre56df   3rfereww  rtere ";
str = str.replace(/\s/g, "***");
console.log(str);

// 2.替換所有,或，var str = "abc,efg,123，abc,123，a";
str = str.replace(/,|，/g, ":");
console.log(str);

4 案例

4.1 表單驗證案例

演示地址：https://www.albertyy.com/2020/10/validate.html

<!DOCTYPE html><html>
        <head>
                <meta charset="utf-8">
                <title>表單驗證：微信公眾號AlbertYang</title>
                <style type="text/css">
                        body {
                                background: #ccc;
                        }

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

                        span {
                                color: red;
                        }

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

                        span {
                                margin-left: 30px;
                                font-size: 12px;
                        }

                        .wrong {
                                color: red
                        }

                        .right {
                                color: green;
                        }

                        .defau {
                                width: 200px;
                                height: 20px;
                        }

                        .de1 {
                                background-position: 0 -20px;
                        }
                </style>

        </head>

        <body>
                <div class="container" id="dv">
                        <label for="qq">Q Q</label><input type="text" id="qq"><span></span><br />
                        <label>手機</label><input type="text" id="phone"><span></span><br />
                        <label>郵箱</label><input type="text" id="e-mail"><span></span><br />
                        <label>座機</label><input type="text" id="telephone"><span></span><br />
                        <label>姓名</label><input type="text" id="fullName"><span></span><br />
                </div>
                <script>
                        // qq
                        checkInput(document.getElementById("qq"), /^\d{5,11}$/);
                        // 手機
                        checkInput(document.getElementById("phone"), /^\d{11}$/);
                        // 郵箱
                        checkInput(document.getElementById("e-mail"), /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
                        // 座機號碼
                        checkInput(document.getElementById("telephone"), /^\d{3,4}[-]\d{7,8}$/);
                        // 中文名字
                        checkInput(document.getElementById("fullName"), /^[\u4e00-\u9fa5]{2,6}$/);

                        // 根據文本框和這個文本框相應的正則運算式，驗證當前文本框中的值，與給出的正則運算式否匹配
                        function checkInput(input, reg) {
                                // 文本框失去焦點的事件
                                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>

4.2 過濾敏感詞匯案例

演示地址：https://www.albertyy.com/2020/10/filter.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>過濾敏感詞匯：公眾號AlbertYang</title>
	</head>
	<body>
		<textarea name="" id="message"></textarea> <button>提交</button>
		<div></div>
		<script>
			var text = document.querySelector('textarea');
			var btn = document.querySelector('button');
			var div = document.querySelector('div');
			btn.onclick = function() {
				div.innerHTML = text.value.replace(/激情|gay|AV/g, '**');
			}
		</script>
	</body>
</html>

5 總結

本文從正則運算式的基本概念入手，講解了正則運算式的特點和組成，并且詳細講解了正則運算式在JavaScript中的使用，并給出了一些在實際開發中經常用到的實體，對于剛接觸的人來說，正則運算式比較晦澀難懂，比如：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$，在實際開發中，我們一般都是在網上搜索好的正則運算式，能夠根據實際情況修改正則運算式即可，比如用戶名: /^[a-z0-9_-]{3,16}$/，

今天的學習就到這里了，由于本人能力和知識有限，如果有寫的不對的地方，還請各位大佬批評指正，如果想繼續學習提高，歡迎關注我，每天學習進步一點點，就是領先的開始，如果覺得本文對你有幫助的話，歡迎轉發，評論，點贊！！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/192410.html

標籤：其他

上一篇：flex（彈性盒子）：1的變化，以及flex對width的影響！

下一篇：vue專案實錄：下拉重繪組件的開發及slot的使用

JavaScript進階教程(7)-正則運算式

引言

1 正則運算式

1.1 什么是正則運算式

1.2 正則運算式的作用

1.3 正則運算式的特點

1.4 正則運算式的組成

1.5 元字串

1.5.1 常用元字串

1.5.2 限定符

1.5.3 其它

2 常用正則運算式

3 在JavaScript 中使用正則運算式

3.1 創建正則運算式物件

3.1.1 方式1

3.1.2 方式2

3.2 引數

3.3 正則運算式匹配

3.4 實體

3.4.1 驗證密碼強弱

3.4.2 驗證郵箱

3.4.3 驗證中文名字

3.5 正則運算式提取

3.6 正則運算式替換

4 案例

4.1 表單驗證案例

4.2 過濾敏感詞匯案例

5 總結