學習筆記整理-正則表達式-01-認識正則

一、基本認識

1. 什么是正則表達式

正則表達式(regular expression)描述了字符串"構成模式"，經常被用于檢查字符串是否符合預定的格式要求。
用一個例子快速演示正則表達式基本使用方法：檢查某個字符串是否是6位數字
```
   // 要檢查的字符串var str = '456789';// 正則表達式規則var regexp = /^\d{6}$/; // 檢查if (regexp.test(str)) {alert('符合規則'); } else {alert('不符合規則'); }
```
- /^\d{6}$/就是正則表達式，它描述了字符串必須是"6位數字"的構成規則。
- 正則表達式可以調用test()方法，檢查某字符串是否符合正則表達式規定的規則。
正則表達式"按位"描述規則
- 正則表達式"按位"描述規則，是指它是一位一位的描述字符串的構成形式。
- 比如檢查字符串是不是這樣的：以字母m開頭，然后是3個數字，最后以字母n結尾。
```
    // ^表示開頭，$表示結尾，\d 表示數字 \d\d\d也可以寫作\d{3}/^m\d\d\dn$/
```

二、基本使用

1. 正則表達式的創建

使用/內容/的語法形式，可以快速創建正則表達式。
也可以使用new RegExp('內容')的形式，創建正則表達式。

使用typeof運算符檢查正則表達式的類型，結果是object。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 創建正則表達式方法1var regexp1 = /^\d{6}$/;// 創建正則表達式方法2var regexp2 = new RegExp('^\\d{6}$');var str = '555666';console.log(regexp1.test(str));     // trueconsole.log(regexp2.test(str));     // trueconsole.log(typeof regexp1);        // objectconsole.log(typeof regexp2);        // object</script>
</body>
</html>

2. 元字符

"元字符"是指一位指定類型的字符

元字符	功能
`\d`	匹配一個數字
`\D`	匹配一個非數字字符
`\w`	匹配一個單字字符(字母、數字或者下劃線)
`\W`	匹配一個非單字字符
`\s`	匹配一個空白字符，包括空格、制表符和換行符
`.`	任意字符

開頭和結尾

元字符功能
^ 匹配開頭
$ 匹配結尾
元字符注意事項
- 如果使用new RegExp()寫法，反斜杠需要多寫一個。
- 比如/^\d$/和new RegExp('^\\d$')是相同的意思
元字符使用舉例
- 某快遞公司運單號形式是這樣的:123-4567-890，請使用正則表達式檢查某字符串是否符合此格式
- 某產品的驗證秘鑰形式是這樣的:□□□-□□□□-□□□，其中□表示字母數字或者下劃線，請使用正則表達式檢查某字符串是否符合此格式
字符的轉義
- 在特殊字符之前的反斜杠\表示下一個字符不是特殊字符，應該按照字面理解。
  /^.$/：檢查字符串是不是任意字符
  /^\.$/：檢查字符串是不是一個點
  /^\\$/：檢查字符串是不是一個反斜杠
- 不管一個符號有沒有特殊意義，都可以在其之前加上一個\以確保它表達的是這個符號本身。
- 舉例：某產品批號形式為：123.45^67#89，請使用正則表達式檢查某字符串是否符合此格式

元字符	功能
`^`	匹配開頭
`$`	匹配結尾

代碼演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 題目1：某快遞公司運單號形式是這樣的：123-4567-890，請使用正則表達式檢查某字符串是否符合此格式// 正則表達式var regexp1 = /^\d\d\d-\d\d\d\d-\d\d\d$/;// 待測試的字符串var str1 = '444-5555-000';console.log(regexp1.test(str1));// 題目2：某產品的驗證秘鑰形式是這樣的：□□□-□□□□-□□□，其中□表示字母數字或者下劃線，請使用正則表達式檢查某字符串是否符合此格式// 正則表達式var regexp2 = /^\w\w\w-\w\w\w\w-\w\w\w$/;// 待測試的字符串var str2 = 'abc-__ab-123';console.log(regexp2.test(str2));// 題目3：某產品批號形式為：123.45^67#89，請使用正則表達式檢查某字符串是否符合此格式var regexp3 = /^\d\d\d\.\d\d\^\d\d\#\d\d$/;// 待測試的字符串var str3 = '666.66^66#66';console.log(regexp3.test(str3));</script>
</body>
</html>

3. 方括號表示法

使用方括號，比如[xyz]，可以創建一個字符集合，表示匹配方括號中的任意字符。
比如某學校的學號規定：第1位是一個字母，b表示本科生，y表示研究生，后面是7位數字，用正則表示為：
```
  /^[by]\d{7}$/
```
可以使用短橫-來指定一個字符范圍，^表示否定

元字符等價的方括號表示法
\d [0-9]
\D [^0-9]
\w [A-Za-z0-9]
\W [^A-Za-z0-9]

元字符	等價的方括號表示法
`\d`	[0-9]
`\D`	[^0-9]
`\w`	[A-Za-z0-9]
`\W`	[^A-Za-z0-9]

方括號表示法小題目

題目1：請驗證某字符串是否是5位字母，大小寫均可
題目2：請驗證某字符串是否是5位，且僅有小寫字母、點構成

題目3：請驗證某字符串是否是4位小寫字母，且最后一位不能是m字母

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 某學校的學號規定：第1位是一個字母，b表示本科生，y表示研究生，后面是7位數字，用正則表示為：// 學號字符串var str1 = 'm4444555';// 用正則表達式進行檢查console.log(/^[by]\d{7}$/.test(str1));// *******************************************// 題目1：請驗證某字符串是否是5位字母，大小寫均可var str2 = 'abcde';var str3 = 'abcd5';console.log(/^[a-zA-Z]{5}$/.test(str2));console.log(/^[a-zA-Z]{5}$/.test(str3));// 題目2：請驗證某字符串是否是5位，且僅由小寫字母、點構成var str4 = 'mnp..';var str5 = 'mnp.#';console.log(/^[a-z\.]{5}$/.test(str4));console.log(/^[a-z\.]{5}$/.test(str5));// 題目3：請驗證某字符串是否是4位小寫字母，且最后一位不能是m字母var str6 = 'abcd';var str7 = 'abcm';var str8 = 'ab1c';console.log(/^[a-z]{3}[a-ln-z]$/.test(str6));console.log(/^[a-z]{3}[a-ln-z]$/.test(str7));console.log(/^[a-z]{3}[a-ln-z]$/.test(str8));</script>
</body></html>

4. 量詞

量詞	意義
`*`	匹配前一個表達式0次或多次。等價于{0,}
`+`	匹配前面一個表達式1次或者多次。等價于{1,}
`?`	匹配前面一個表達式0次或者1次。等價于{0,1}
`{n}`	n是一個正整數，匹配了前面一個字符剛好出現了n次
`{n,}`	n是一個正整數，匹配前一個字符至少出現了n次
`{n, m}`	n和m都是整數。匹配前面的字符至少n次，最多m次

量詞小題目

題目1：請驗證字符串是否符合手機號碼的規則：11位數字，并且肯定以1開頭。
題目2：請驗證某字符串是否是這樣的：以字母開頭，中間是任意位數字(最少1位)構成，并以字母結尾。

題目3：請驗證某字符串是否符合網址規則：以www.開頭，中間是任意位的字符(字母數字下劃線)，最后以.com結尾，也可以以.com.cn結尾

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 題目1：請驗證字符串是否符合手機號碼的規則：11位數字，并且肯定以1開頭var str1 = '13812345678';var str2 = '138123456789';var str3 = '38123456789';var regexp1 = /^1\d{10}$/;console.log(regexp1.test(str1));console.log(regexp1.test(str2));console.log(regexp1.test(str3));// 題目2：請驗證某字符串是否是這樣的：以字母開頭，中間是任意位數字（最少1位）構成，并以字母結尾var str4 = 'a123123123b';var str5 = 'abcd';var str6 = 'a1b';var regexp2 = /^[a-zA-Z]\d+[a-zA-Z]$/;console.log(regexp2.test(str4));console.log(regexp2.test(str5));console.log(regexp2.test(str6));// 題目3：請驗證某字符串是否符合網址規則：以www.開頭，中間是任意位的字符（字母數字下劃線，最少一位），最后以.com結尾，也可以以.com.cn結尾var str7 = 'www.imooc.com';var str8 = 'www.sina.com.cn';var str9 = 'www.news.cn';var regexp3 = /^www\.\w+\.com(\.cn)?$/;console.log(regexp3.test(str7));console.log(regexp3.test(str8));console.log(regexp3.test(str9));</script>
</body>
</html>

5. 修飾符

修飾符也叫作標志(flags)，用于使用正則表達式實現高級搜索

修飾符意義
i 不區分大小寫搜索
g 全局搜索
修飾符的使用
```
  var re = /m/gi;var re = new RegExp('m', 'gi');
```
- 在正則表達式的第二個/后面寫修飾符，可以多個連寫。
- new RegExp()形式的正則表達式，以字符串形式寫在第二個參數

修飾符	意義
`i`	不區分大小寫搜索
`g`	全局搜索

三、相關方法

1. 正則表達式可以"打點"調用哪些方法呢?

方法	簡介
`test()`	測試某字符串是否匹配正則表達式，返回布爾值
`exec()`	根據正則表達式，在字符串中進行查找，返回結果數組或者null

test()方法
- 正則表達式的test()方法用來測試某字符串是否匹配此正則表達式，它返回true或false
```
  /^[a-z]{3}[a-ln-z]$/.test('abcd')
```

exec()方法

exec()方法功能是：在一個指定字符串中執行一個搜索匹配查找，返回一個結果數組或null
```
   var str = 'abc123def456ghi789';var regexp = /\d+/;var result1 = regexp.exec(str);
```

exec()方法的逐條遍歷

exec()方法最有趣的是，有"g"修飾符的正則表達式將自動成為"有狀態"的，
這意味著可以對單個字符串中的多次匹配結果進行逐條的遍歷。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>var str = 'abc123def456ghi789';var regexp = /\d+/g;    // +表示貪婪的，盡可能多的匹配var result1 = regexp.exec(str);var result2 = regexp.exec(str);var result3 = regexp.exec(str);var result4 = regexp.exec(str);console.log(result1);console.log(result2);console.log(result3);console.log(result4);// 使用循環語句來循環執行exec，尋找所有的匹配結果var result;while (result = regexp.exec(str)) {console.log(result);}</script>
</body></html>

字符串的相關方法

方法	簡介
`search()`	在字符串中根據正則表達式進行查找匹配，返回首次匹配到的位置索引，測試不到則返回-1
`match()`	在字符串中根據正則表達式進行查找匹配，返回一個數組，找不到則返回null
`replace()`	使用替換字符串替換掉匹配到的子字符串，可以使用正則表達式
`split()`	分隔字符串為數組，可以使用正則表達式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var str = 'abc123def4567ghi89';// search()方法，很像indexOf()，返回查找到的第一個下標，如果找不到就是-1var result1 = str.search(/\d+/g);var result2 = str.search(/m/g);console.log(result1);       // 3console.log(result2);       // -1// match()方法，返回查找到的數組，找不到就是nullvar result3 = str.match(/\d+/g);console.log(result3);       // ["123", "4567", "89"]// replace()方法，進行替換var result4 = str.replace(/[a-z]+/g, '*');      // 注意+表示貪婪的，盡可能多的連續匹配小寫字母console.log(result4);       // *123*4567*89// split()方法，進行字符串拆為數組var result5 = str.split(/\d+/g);console.log(result5);       // ["abc", "def", "ghi", ""]</script>
</body>
</html>

四、應用

用正則表達式進行表單驗證

用正則表達式進行表單驗證是正則表達式最重要的實際應用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.warning {color: red;display: none;}</style>
</head><body><div><p>請輸入中文姓名：<input type="text" id="nameField"><span class="warning" id="nameWarning">輸入的姓名不合法</span></p><p>請輸入手機號碼：<input type="text" id="telField"><span class="warning" id="telWarning">輸入的手機號碼不合法</span></p><p>請輸入Email：<input type="text" id="emailField"><span class="warning" id="emailWarning">輸入的Email不合法</span></p></div><script>var nameField = document.getElementById('nameField');var telField = document.getElementById('telField');var emailField = document.getElementById('emailField');var nameWarning = document.getElementById('nameWarning');var telWarning = document.getElementById('telWarning');var emailWarning = document.getElementById('emailWarning');// 當文本框失去焦點，就是光標不在文本框中了nameField.onblur = function () {// 得到姓名var name = nameField.value;if (/^[\u4E00-\u9FA5]{2,4}$/.test(name)) {// 如果通過校驗nameWarning.style.display = 'none';} else {// 如果沒有通過校驗nameWarning.style.display = 'inline';}};telField.onblur = function () {// 得到電話var tel = telField.value;if (/^1\d{10}$/.test(tel)) {// 如果通過校驗telWarning.style.display = 'none';} else {// 如果沒有通過校驗telWarning.style.display = 'inline';}};emailField.onblur = function () {// 得到emailvar email = emailField.value;// 合法的email都是abc_def123@abc.netif (/^\w{2,}\@\w{2,}\.[a-z]{2,4}(\.[a-z]{2,4})?$/.test(email)) {// 如果通過校驗emailWarning.style.display = 'none';} else {// 如果沒有通過校驗emailWarning.style.display = 'inline';}};</script>
</body></html>