javascript
JavaScript从入门到放弃 -（六）正则表达式
正則表達式
- 1. 正則表達式概述
- 1.1 什么是正則表達式
- 1.2 正則表達式的特點
- 2. 正則表達式在JavaScript中的使用
- 2.1 創建正則表達式
- 2.1.1 通過調用 RegExp 對象的構造函數創建
- 2.1.2 通過字面量創建
- 2.2 test測試正則表達式
- 3. 正則表達式中的特殊字符
- 3.1 正則表達式的組成
- 3.2 邊界符
- 3.3 字符類
- 3.3.1 [ ] 方括號
- 3.3.2 [ - ] 方括號（內部） 范圍符-
- 3.3.3 字符組合
- 3.3.4 [ ^ ] 方括號（內部） 取反符^
- 3.4 量詞符
- 案例：用戶名驗證
- 3.5 括號總結及正則驗證工具
- 3.5.1 中括號
- 3.5.2 大括號
- 3.5.3 小括號
- 3.5.4 正則表達式在線驗證-菜鳥工具
- 3.6 預定義類及座機號碼、表單驗證案例
- 3.6.1 預定義類（也稱元字符）
- 3.6.2 座機號碼驗證案例
- 3.6.3 表單驗證案例
- 4. 正則表達式中的替換及敏感詞過濾案例
- 4.1 replace 替換
- 4.2 正則表達式參數
- 5. 常用正則表達式
- 5.1 數字校驗
- 5.2 字符校驗
- 5.3 特殊需求處理
學習目標
- 了解正則表達式的作用；
- 能夠寫出簡單的正則表達式；
- 能夠使用正則表達式對表單進行驗證；
- 能夠使用正則表達式替換內容。
學習內容：
1. 正則表達式概述
1.1 什么是正則表達式
正則表達式（Regular Expression）是用于匹配字符串中字符組合的模式。在JavaScript中，正則表達式也是對象(是作為對象的形式存在的)。
正則表達式通常被用來檢索、替換那些符合某個模式（規則）的文本。
例如驗證表單：用戶名表單只能輸入英文字母、數字或者下劃線， 昵稱輸入框中可以輸入中文(匹配)。此外，正則表達式還常用于過濾 掉頁面內容中的一些敏感詞(替換)，或從字符串中獲取我們想要的特定部分(提取)等 。
其他語言也會使用正則表達式，本節內容主要學習如何利用 JavaScript 正則表達式完成表單驗證。
1.2 正則表達式的特點
2. 正則表達式在JavaScript中的使用
2.1 創建正則表達式
在 JavaScript 中，可以通過兩種方式創建一個正則表達式。
2.1.1 通過調用 RegExp 對象的構造函數創建
1). 語法格式：
var 變量名 = new RegExp(/表達式/);2). 應用示例：
var regexp = new RegExp(/123/); // 要求必須輸入 “123”如果正則表達式將會改變，或者它將會從用戶輸入等來源中動態地產生，就需要使用構造函數來創建正則表達式。
2.1.2 通過字面量創建
1) 語法格式：
var 變量名 = /表達式/;2) 應用示例:
Var rg = /123/如果該正則表達式是始終保持不變的，使用字面量創建正則可獲得更好的性能。
通常采用字面量創建，這樣代碼更簡潔。
2.2 test測試正則表達式
test() 正則對象方法（正則表達式的專門方法），用于檢測字符串是否符合該規則，該對象會返回 true 或 false，其參數是測試字符串。
1）語法規范：
regexObj.test(str)2）應用示例：
var rg = /123/; console.log(rg.test(123)); // 返回true3. 正則表達式中的特殊字符
3.1 正則表達式的組成
一個正則表達式可以由簡單的字符構成，比如 /abc/，也可以是“簡單”+“特殊字符”的組合，比如 /ab*c/ 。其中特殊字符也被稱為元字符，是在正則表達式中具有特殊意義的專用符號，如 ^ 、$、+ 等。
更多特殊字符請參考：
- MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
- jQuery API手冊： 正則表達式；
- 正則測試工具： https://tool.oschina.net/regex
下面把元字符劃分為幾類進行學習
3.2 邊界符
正則表達式中的邊界符（位置符）用來提示字符所處的位置，主要有兩個字符。
| ^ | 表示匹配行首的文本（以誰開始） |
| $ | 表示匹配行尾的文本（以誰結束） |
應用示例：
示例一
// 邊界符 ^ $ var rg = /abc/; // 正則表達式里不需要加引號，不論其是何種數據類型 console.log(rg.test('abc')); // 返回 true console.log(rg.test('aabc')); // 返回 true console.log(rg.test('abcc')); // 返回 true解釋：/abc/ 只要包含有abc這個字符串，返回的都是true。
注：它僅能匹配 “abc” 字符按照順序同時出現的情況。
示例二
var reg = /^abc/; // 表示以 abc 開頭的 console.log(rg.test('abc')); // 返回 true console.log(rg.test('aabc')); // 返回 false，沒有以abc開頭 console.log(rg.test('abcc')); // 返回 true示例三
var reg = /^abc$/; // 精確匹配，必須是abc才符合規范（全字匹配） console.log(rg.test('abc')); // 返回 true console.log(rg.test('abcabc')); // 返回 false console.log(rg.test('aabc')); // 返回 false console.log(rg.test('abcc')); // 返回 false3.3 字符類
字符類表示有一系列字符可供選擇，只要匹配其中一個就可以了。所有可供選擇的字符都放在方括號內。
3.3.1 [ ] 方括號
示例一
var rg = /[abc]/; console.log(rg.test('black')) // 返回 true console.log(rg.test('color')) // 返回 true console.log(rg.test('red')) // 返回 false解釋： 字符串中，只要包含 abc 中任意一個字符，都返回 true 。
示例二
var rg = /^[abc]$/; // 三選一：只有是 a 或 b 或 c 才返回 true console.log(rg.test('aa')) // 返回 false console.log(rg.test('a')) // 返回 true3.3.2 [ - ] 方括號（內部） 范圍符-
方括號內部加上 - （短橫線）， 連接的意思，表示范圍。
應用示例：
a 到 z 26個英文字母（小寫）都可以輸入
3.3.3 字符組合
應用示例：
示例一：
26個英文字母（不區分大、小寫）都可以輸入
示例二：
數字和字母（不區分大、小寫）都可以輸入
3.3.4 [ ^ ] 方括號（內部） 取反符^
如果方括號內部加上 ^ 表示取反，只要包含方括號內的字符，都返回 false 。
注意和邊界符 ^ 的區別，邊界符是寫到方括號外面。
示例：
var reg1 = /^[^a-zA-Z0-9_-]$/; // 中括號內的 ^ 表示取反 console.log(rg.test(5)); // 返回 false console.log(rg.test('!')); // 返回 true3.4 量詞符
量詞符用來設定某個模式出現的次數。
| * | 重復 0 次 或 更多次 （相當于 >=0） |
| + | 重復 1 次 或 更多次（相當于 >=1） |
| ? | 重復 0 次 或 1 次（相當于 1 或 0） |
| { n } | 重復 n 次 |
| { n, } | 重復 n 次 或 更多次 |
| { n,m } | 重復 n 到 m 次 |
上表中的量詞符可劃分為符號和花括號兩大組。花括號這組要重點掌握。
示例一：
var reg = /^a$/;a 后面添加 * （相當于 >= 0 ）：
var reg = /^a*$/; console.log(reg.test('')); // 返回 true console.log(reg.test('a')); // 返回 true console.log(reg.test('aaa')); // 返回 true解釋： * 的意思，就是前一項出現零次或者多次。
示例二：
a 后面添加 + （相當于 >= 1 ）：
+ ：匹配前面一個表達式 1 次或者多次。等價于 {1,}
示例三：
a 后面添加 ? （相當于 0 || 1）：
var reg = /^a?$/; console.log(reg.test('')); // 返回 true，出現了 0 次 console.log(reg.test('a')); // 返回 true，出現了 1 次 console.log(reg.test('aaa')); // 返回 false，出現了多次匹配前面一個表達式 0 次或者 1 次。等價于 {0,1}。
示例四：
{ 3 } 重復 3 次
var reg = /^a{3}$/; // 讓花括號前面的 a 只能出現 3 次 console.log(reg.test('')); // 返回 false，出現了 0 次 console.log(reg.test('a')); // 返回 false，出現了 1 次 console.log(reg.test('aaa')); // 返回 true，重復了 3 次 console.log(reg.test('aaaa')); // 返回 false，重復了4 次示例五：
{ 3, } 大于等于 3
示例六：
{ 3, 6} 大于等于 3，并且 小于等于6
{n,m} ：n 和 m 都是整數。匹配前面的字符至少n次，最多m次。如果 n 或者 m 的值是0， 這個值被忽略。
注意：{3,6} 花括號內，量詞之間 不能有空格，否則沒有效果。
案例：用戶名驗證
功能需求：
- 如果用戶名輸入合法, 則后面提示信息為 : 用戶名合法,并且顏色為綠色;
- 如果用戶名輸入不合法, 則后面提示信息為: 用戶名不符合規范, 并且顏色為綠色。
- 用戶名只能為英文字母,數字,下劃線或者短橫線組成, 并且用戶名長度為 6~16位.；
分析：
HTML結構
<input type="text" class="uname"><span>請輸入用戶名</span>CSS樣式
<style>span {color: #aaa;font-size: 14px;} .right {color: green;} .wrong {color: red;} </style>JavaScript代碼
<script>// 量詞是設定某個模式出現的次數var reg = /^[a-zA-Z0-9_-]{6,16}$/;var uname = document.querySelector('.uname');var span = document.querySelector('span');// 失去焦點時觸發uname.onblur = function() {if (reg.test(this.value)) {span.className = 'right';span.innerHTML = '用戶名格式正確！'} else {span.className = 'wrong';span.innerHTML = '用戶名格式錯誤！'}} </script>【onblur 事件】：請參閱 w3cschool 文檔
3.5 括號總結及正則驗證工具
3.5.1 中括號
// 多選 1 ，表示 a || b || c var reg=/^[abc]$/多選 1 ，表示 a || b || c
3.5.2 大括號
// 表示只讓 c 重復 3 次 abccc 結果為 true var reg = /^abc{3}$/; console.log(reg.test('aabbccc')); // false console.log(reg.test('abccc')); // true解釋： 大括號的量詞限定只對靠近它的左邊第一個字符起作用。
3.5.3 小括號
// 表示讓 abc 重復 3 次 var reg = /^(abc){3}$/; console.log(reg.test('aabbccc')); // false console.log(reg.test('abccc')); // false console.log(reg.test('abcabcabc')); // true解釋： 小括號，表示優先級，把括號中的當做一個整體參與運算。
3.5.4 正則表達式在線驗證-菜鳥工具
由于本地測試，需要通過不同的log來打印比較麻煩，其實可以借助于在線工具來完成
正則表達式在線測試： https://c.runoob.com/front-end/854
注意，此工具的表達式輸入框中，表達式兩邊不要輸入斜杠 “ / ”
3.6 預定義類及座機號碼、表單驗證案例
3.6.1 預定義類（也稱元字符）
指某些常見模式的簡寫方式。
| \d | 數字。匹配0-9之間的任意數字，相當于[ 0-9 ] |
| \D | 非數字。匹配0-9以外的字符，相當于[ ^0-9 ] |
| \w | 匹配任意的字母、數字和下劃線，相當于[a-zA-Z0-9_] |
| \W | 除所有字母、數字和下劃線以外的字符，相當于[ ^a-zA-Z0-9_] |
| \s | 驗證是否為空：匹配空格（包括換行符、制表符、空格符等），相當于[\t\r\n\v\f] |
| \S | 匹配非空格的字符，相當于[ ^\t\r\n\v\f] |
3.6.2 座機號碼驗證案例
全國座機號碼，三種格式：010-12345678、0760-1234567、0755-12345678
var reg = /^\d{3}-\d{8}|\d{4}-\d{7,8}$/; //或 var reg = /^\d{3,4}-\d{7,8}$/;上面兩種正則的效果相同。第一種用了或 “|” 的表示方法。
注意，在正則里，“或” 用單豎線 “|” 表示。
3.6.3 表單驗證案例
分析：
- 手機號碼正則： /^1[3|4|5|7|8]\d{9}$/
- QQ: [1-9][0-9]{4,} (騰訊QQ號從10000開始)
- 昵稱是中文： ^[\u4e00-\u9fa5]{2,8}$
{4,}：至少出現4次
4. 正則表達式中的替換及敏感詞過濾案例
4.1 replace 替換
replace() 方法可以實現替換字符串操作，用來替換的參數可以是一個字符串或是一個正則表達式。
語法結構：
stringObject.replace(regexp/substr,replacement)參數說明：
regexp/substr：被替換的字符串，或者正則表達式；
replacement：替換為的字符串；
返回值：是一個替換完畢的新字符串。
應用示例：
示例一： 普通替換
var str='andy和red'; var newStr = str.replace('andy','baby') console.log(newStr) // 打印輸出 baby和red示例二：正則式替換（敏感詞過濾）
HTML結構：
<textarea name="" id="message"></textarea> <button>提交</button> <div></div>CSS樣式：
<style>textarea {width: 300px;height: 100px;border: 1px solid #ccc;} </style>JavaScript 代碼：
<script>var text = document.querySelector('textarea');var btn = document.querySelector('button');var div = document.querySelector('div');btn.onclick = function() {div.innerHTML = text.value.replace(/激情/,'**');} </script>
注意：一般情況下，replace只能替換第一個滿足條件的字符串。這時，就要利用到正則表達式的參數
4.2 正則表達式參數
語法規范：
/表達式/[switch]參數switch(也稱為修飾符) 用來限定按照什么樣的模式來匹配。它有三種值：
- g：全局匹配（global 的縮寫）；
- i：忽略大小寫（ignore 的縮寫）；
- gi：全局匹配 + 忽略大小寫。
因此，對上面敏感詞替換的代碼添加 g ，最終完善如下：
這樣，對于文本中多次出現的敏感詞均能替換，彌補了replace本身的不足。
5. 常用正則表達式
5.1 數字校驗
數字：
^[0-9]*$n位的數字：
^\d{n}$至少n位的數字：
^\d{n,}$m-n 位的數字：
^\d{m,n}$零和非零開頭的數字：
^(0|[1-9][0-9]*)$非零開頭的最多帶兩位小數的數字：
^([1-9][0-9]*)+(.[0-9]{1,2})?$帶1-2位小數的正數或負數：
^(\-)?\d+(\.\d{1,2})?$正數、負數、和小數：
^(\-|\+)?\d+(\.\d+)?$有2位小數的正實數：
^[0-9]+(.[0-9]{2})?$有1~3位小數的正實數：
^[0-9]+(.[0-9]{1,3})?$非零的正整數：
^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$非零的負整數：
^\-[1-9][]0-9″*$ 或 ^-[1-9]\d*$非負整數：
^\d+$ 或 ^[1-9]\d*|0$非正整數：
^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$非負浮點數：
^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$非正浮點數：
^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$正浮點數：
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$負浮點數：
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$浮點數：
^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$5.2 字符校驗
漢字：
^[\u4e00-\u9fa5]{0,}$英文和數字：
^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$長度為3-20的所有字符：
^.{3,20}$由26個英文字母組成的字符串：
^[A-Za-z]+$由26個大寫英文字母組成的字符串：
^[A-Z]+$由26個小寫英文字母組成的字符串：
^[a-z]+$由數字和26個英文字母組成的字符串：
^[A-Za-z0-9]+$由數字、26個英文字母或者下劃線組成的字符串：
^\w+$ 或 ^\w{3,20}$中文、英文、數字包括下劃線：
^[\u4E00-\u9FA5A-Za-z0-9_]+$中文、英文、數字但不包括下劃線等符號：
^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$可以輸入含有^%&’,;=?$\”等字符：
[^%&',;=?$\x22]+5.3 特殊需求處理
Email 地址：
^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$域名：
[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?InternetURL：
[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$手機號碼：
^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$電話號碼（“XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-XXXXXXXX”、”XXXXXXX”和”XXXXXXXX）：
^($$\d{3,4}-)|\d{3.4}-)?\d{7,8}$國內電話號碼（0511-4405222、021-87888822）：
\d{3}-\d{8}|\d{4}-\d{7}身份證號（15位、18位數字）：
^\d{15}|\d{18}$短身份證號碼（數字、字母x結尾）：
^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$帳號是否合法（字母開頭，允許5-16字節，允許字母數字下劃線）：
^[a-zA-Z][a-zA-Z0-9_]{4,15}$密碼（以字母開頭，長度在6~18之間，只能包含字母、數字和下劃線）：
區分大小寫，匹配字符串的開頭，示例如下：
上一篇：JavaScript從入門到放棄 -（五）函數進階（高級用法）
下一篇：JavaScript從入門到放棄 -（七）ES6
總結
以上是生活随笔為你收集整理的JavaScript从入门到放弃 -（六）正则表达式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Node.js 入门详解 （三）
- 下一篇： JavaScript-操作DOM对象-删