如何快速入門VUE3.0：進入學習
相關推薦：javascript教學
正規表示式（ Regular Expression，簡稱regexp ）
應用：在專案開發中，手機號碼指定位數的隱藏、資料收集、敏感字的過濾以及表單的驗證等功能，都可以利用正規表示式來實現。
適用領域：在作業系統（Unix、Linux等）、程式語言（C、C++、Java、PHP、Python、JavaScript等）。
舉例：以文字查找為例，若在大量的文字中找出符合某個特徵的字串（如手機號碼），就將這個特徵按照正規表示式的語法寫出來，形成一個電腦程式辨識的模式（ Pattern），然後電腦程式就會根據這個模式到文字中進行匹配，找出符合規則的字串。
正規表示式的發展史
正規表示式的表現形式
在開發中，經常需要根據正規匹配模式完成指定字串的搜尋和匹配。
String物件中的match()方法除了可在字串內檢索指定的值外，還可以在目標字串中根據正則匹配出所有符合要求的內容，匹配成功後將其保存到數組中，匹配失敗則回傳false。
在JavaScript應用程式中，使用正規表示式之前首先需要建立正規物件。除了前面講解過的字面量方式創建外，還可以透過RegExp物件的建構函數的方式來創建。
為了讓讀者更好的理解正規物件的獲取，以符合特殊字元「^」、「$」、「*」、「.」和「」為例進行對比講解。
注意
構造函數方式與字面量方式創建的正則對象，雖然在功能上完全一致，但它們在語法實現上有一定的區別，前者的pattern在使用時需要對反斜杠（）進行轉義。而後者的pattern在編寫時，要放在定界符“/”內，flags標記則放在結尾定界符之外
好處：有效的使用字符類別可以使正則表達式更加簡潔，便於閱讀。
舉例1：大寫字母、小寫字母和數字可以使用「w」直接表示。
案例2：若要符合0到9之間的數字可以使用“d”表示。
以下為了方便讀者理解字元類別的使用，以「.」和「s」為例進行示範.
字元集合的表示方式：「[]」可以實作一個字元集合。
字元範圍：與連字符“-”一起使用時，表示符合指定範圍內的字元。
反義字元：元字元“^”與“[]”一起使用時，稱為反義字元。
不在某個範圍內： “^”與“[]”一起使用，表示匹配不在指定字元範圍內的字元。
以字串'get好TB6'.match(/pattern/g) 為例示範其常見的用法。
注意
字符“-”在通常情況下只表示一個普通字符，只有在表示字符範圍時才
作為元字符來使用。 「-」連字符表示的範圍遵循字元編碼的順序，如「aZ」、「za」、「a-9」都是不合法的範圍。
【案例】限定輸入內容
程式碼實現想法：
寫HTML，設定一個年（份）和月（份）的文字框，以及一個查詢按鈕。
取得操作的元素對象，並對表單的提交進行驗證。
驗證年份， 正規：/^d{4}/ 。 驗證月份， 正規： / ( ( 0 ? [ 1 − 9 ] ) ∣ ( 1 [ 012 ] ) ) /。
文字方塊取得焦點，去除提示框的顏色。文字方塊失去焦點，去除輸入內容的兩端的空白，並進行驗證。
程式碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>限定輸入內容</title>
<style>
input[type=text]{width: 40px;border-color: #bbb;height: 25px;font-size: 14px;border-radius: 2px;outline: 0;border: #ccc 1px solid;padding: 0 10px; -webkit-transition: box-shadow .5s;margin-bottom: 15px;}
input[type=text]:hover, input[type=text]:focus,input[type=submit]:hover{border: 1px solid #56b4ef; box-shadow: inset 0 1px 3px rgba(0,0,0, .05),0 0 8px rgba(82,168,236,.6); -webkit-transition: box-shadow .5s;}
input::-webkit-input-placeholder {color: #999; -webkit-transition: color .5s;}
input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {color: #c2c2c2; -webkit-transition: color .5s;}
input[type=submit]{height: 30px; width: 80px; background: #4393C9; border:1px solid #fff;color: #fff;font:14px bolder; }
</style>
</head>
<body>
<form id="form">
年份<input type="text" name="year">
月份<input type="text" name="month">
<input type="submit" value="查詢">
</form>
<p id="result"></p>
<script>
function checkYear(obj) {
if (!obj.value.match(/^d{4}$/)) {
obj.style.borderColor = 'red';
result.innerHTML = '輸入錯誤，年份為4位數字表示';
return false;
}
result.innerHTML = '';
return true;
}
function checkMonth(obj) {
if (!obj.value.match(/^((0?[1-9])|(1[012]))$/)) {
obj.style.borderColor = 'red';
result.innerHTML = '輸入錯誤，月份為1~12之間';
return false;
}
result.innerHTML = '';
return true;
}
var form = document.getElementById('form'); // <form>元素物件var result = document.getElementById('result'); // <p>元素物件var inputs = document.getElementsByTagName('input'); // <input>元素集form.onsubmit = function() {
return checkYear(inputs.year) && checkMonth(inputs.month);
};
inputs.year.onfocus = function() {
this.style.borderColor = '';
};
inputs.month.onfocus = function() {
this.style.borderColor = '';
};
if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^[suFEFFxA0]+|[suFEFFxA0]+$/g, '');
// uFEFF位元組順序標記；xA0不換行空白 };
}
inputs.year.onblur = function() {
this.value = this.value.trim();
checkYear(this);
};
inputs.month.onblur = function() {
this.value = this.value.trim();
checkMonth(this);
};
</script>
</body>
</html> test()方法：偵測正規表示式是否與指定的字串相符。
當匹配成功時，test()方法的回傳值為true，否則傳回false。
偵測正規物件的模式修飾符
RegExp類別中還有一些屬性，用於偵測目前正規物件使用的模式修飾符，以及指定下一次符合的起始索引等。
下面為了讀者更好的理解這些屬性的使用，以實現空格的匹配為例進行演示。
search()方法：可以傳回指定模式的子字串在字串首次出現的位置，相對於indexOf()方法來說功能更強大。
split()方法：用於根據指定的分隔符號將一個字串分割成字串數組，其分割後的字串陣列中不包括分隔符號。
當分隔符號不只一個時，需要定義正規物件才能夠完成字串的分割操作。
注意
當字串為空時，split()方法傳回的是一個包含一個空字串的陣列“[“”]”，如果字串和分隔符號都是空字串，則傳回一個空數組“[] 」。
動手實作
密碼強度驗證
密碼強度驗證條件：
① 長度<6位，無密碼強度。
②長度>6位，而且包含數字、字母或其他字元中的一種，密碼強度為「低」。
③長度>6位，而且包含數字、字母或其他字元中的二種，密碼強度為「中」。
④長度>6位，而且包含數字、字母或其他字元中的三種及以上，密碼強度為「高」。
提出問題：匹配一個連續出現的字符，如6個連續出現的數字“458925”。
解決方案1：正規物件/dddddd/gi。
存在的問題：重複出現的「d」既不便於閱讀，書寫又繁瑣。
解法2：使用限定符（?、+、*、{ }）完成某個字元連續出現的符合。正規物件/d{6}/gi。
當點字元（.）和限定符連用時，可以實現符合指定數量範圍的任意字元。
正規在實現指定數量範圍的任意字元匹配時，支援貪婪匹配和惰性匹配兩種方式。
在正規表示式中，被括號字元「()」括起來的內容，稱為「子表達式」。
小括號實現了匹配catch和cater，如果不使用小括號，則變成了catch和er
未分組時，表示符合2個c字元；而分組後，表示符合2個「bc」字串。
捕獲：將子表達式匹配到的內容儲存到系統的快取區的過程。
非捕獲：不將子表達式的匹配內容存放到系統的快取中，使用(?:x)實作。
String物件的replace()方法，可直接利用$n（n是大於0的正整數）取得捕獲內容，完成對子表達式捕獲的內容進行替換的操作。
可以使用”(?:x)”的方式實作非捕獲匹配
在編寫正規表示式時，若要在正規表示式中，取得存放在快取區內的子運算式的擷取內容，則可以使用「n」（n是大於0的正整數）的方式引用，這個過程就是「反向引用」。
零寬斷言：指的是一種零寬度的子表達式匹配，用於查找子表達式匹配的內容之前或之後是否含有特定的字元集。
分類：分為正向預查和反向預查，但在JavaScript中僅支援正向預查，即匹配含有或不含有捕獲內容之前的數據，匹配的結果中不含捕獲的內容。
表示式中的運算子有很多。在實際應用時，各種運算子會遵循優先順序進行比對。正規表示式中常用運算子優先級，由高到低的順序如下表。
【案例】內容查找與替換
程式碼實現想法：
程式碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>內容尋找與替換</title>
<style>
p{float:left;}
input{margin:0 20px;}
</style>
</head>
<body>
<p>過濾前內容:<br>
<textarea id="pre" rows="10" cols="40"></textarea>
<input id="btn" type="button" value="過濾">
</p>
<p>過濾後內容:<br>
<textarea id="res" rows="10" cols="40"></textarea>
</p>
<script>
document.getElementById('btn').onclick = function () {
// 定義找出並需要取代的內容規則，[u4e00-u9fa5]表示符合任意中文字元 var reg = /(bad)|[u4e00-u9fa5]/gi;
var str = document.getElementById('pre').value;
var newstr = str.replace(reg, '*');
document.getElementById('res').innerHTML = newstr;
};
</script>
</body>
</html>相關推薦：javascript學習教學
以上就是JavaScript正規表示式，這篇就夠了的詳細內容，更多請關注php中文網其它相關文章！
