因為前端學習和工作的時候常用到正則,是以總結了一下正規表達式的基礎文法和JavaScript怎麼去使用正則
一、作用
正則的作用
1）對表單域項目(使用者名、密碼、郵箱、qq号碼、手機等等)進行驗證
2）網絡爬蟲(一個網站到另一個網站的頁面上去擷取對方的相關資訊)
3）内容替換、擷取
最最最常用：表單驗證(js最初的作用就是表單驗證)
應用場景:
手機号替換：替換前：12345678910 替換後 123****8910
敏感詞替換：
原字元串：發達國家中國在釣魚島進行軍事演習
替換後： 發達國家**在***進行軍事演習
二、正規表達式文法
正則字元類
| 元字元 | 說明 |
|---|---|
| [a-z] | 比對a-z任意一個字元 |
| [A-Z] | 比對A-Z任意一個字元 |
| [a-zA-Z] | 比對26個英文字母（大小寫） |
| [0-9] | 比對一個數字 |
| [0-9a-zA-Z_] | 比對一個字元可以是數字和字母 |
| [^0-9] | 比對非數字 |
| [^a-zA-Z] | 比對非字母 |
多學一招： 如果需要取反在第一個“[”後面添加“^”符号即可
常用字元類
| 元字元 | 說明 |
|---|---|
| \d | 比對數字，相當于：[0-9] |
| \D | 比對非數字,相當于:[^0-9] |
| \w | 比對數字、字母、下劃線，相當于：[0-9a-zA-Z_] |
| \W | 比對非數字、字母、下劃線，相當于：[^0-9a-zA-Z_] |
| \s | 比對空白字元串（空格） |
| \S | 比對非空白字元串 |
| . | 比對所有字元 |
重複字元
| 元字元 | 說明 |
|---|---|
| * | 指重複0到多次 |
| + | 指重複1到多次,至少出現一次 , 如:/a+/ |
| ？ | 指重複0到1次,最多一次 |
| {n} | 指比對n次 , 如：{8} 比對8次 /a{8}/ |
| {n, m} | 指比對n到m次，如：{1,8} 比對1~8次 /a{1,8}/ |
| {n, } | 指比對至少n次，如：{1，} 比對至少1次 /a{1,}/ |
常用定位符
| 元字元 | 說明 |
|---|---|
| ^ | 限定行首資料 |
| $ | 限定行尾資料 |
正規表達式修飾符
| 元字元 | 說明 |
|---|---|
| i | 執行對大小寫不敏感的比對 |
| g | 執行全局比對（查找所有比對而非在找到第一個比對後停止） |
| m | 執行多行比對 |
三、JavaScript正則的建立
字面量建立
文法：var regexp = /正規表達式/修飾符;
注意: //不需要加引号
例: var reg = /hello/;
直接執行個體化
文法：var regexp = new RegExp（“正規表達式”，修飾符）;
例:var reg = new RegExp('hello')
以對象的方式建立:需要加單雙引号,但是不要加/ /
那麼問題來了:
/一二三四五/ 是不是正規表達式？
我的答案是正則
原因：隻要寫在 '/' 和 '/' 之間的内容就是正規表達式
RegExp對象方法(直接使用正則調用)
test()方法
判斷正規表達式是否比對成功
成功傳回true，失敗傳回false
例: 下述古詩中是否含有“乘風破浪”？
<script>
var str = '乘風破浪會有時 直挂雲帆濟滄海';
var obj = /乘風破浪/;
var ret = obj.test(str);
document.write(ret); //true
</script>
exec方法
比對符合正規表達式條件的資料
成功傳回數組,失敗傳回null
例:比對如下字元串中的js？
<script>
var str = 'js乘風破浪js會有時,js直挂雲帆濟js滄海';
var obj = /js/;
var row = obj.exec(str)
document.write(row); //隻輸出一個js
</script>
比對全部:
<script>
var str = 'js乘風破浪js會有時,js直挂雲帆濟js滄海';
var obj = /js/g;
var row;
while (row = obj.exec(str)){
document.write(row); //輸出全部的js
}
</script>
留心：需要增加修飾符g表示全局比對，否則出現死循環
正則的字元串調用函數
在 JavaScript 中，正規表達式最常用于用于的幾個字元串方法 : search()、match() 和 replace()。
search() 方法
文法：字元串對象.search(待查找的字元串|正規表達式)
作用：用于搜尋字元串中指定的元素
傳回：傳回符合條件的第一個元素下标，沒找到傳回-1
例:使用正則搜尋字元串中"乘風"
<script>
var str = 'js乘風破浪js會有時,js直挂雲帆濟js滄海';
var res = str.search(/乘風/);
document.write(res); //輸出2(位置)
</script>
match()方法
文法：字元串對象.match(待比對的字元串|正規表達式)
作用：比對符合條件的内容
傳回：傳回一個數組
例1: 在字元串中查找 "js":
<script>
var str = 'js乘風破浪js會有時,js直挂雲帆濟js滄海';
var res = str.match(/js/g);
document.write(res); //輸出js,js,js,js
</script>
replace() 方法
文法：字元串對象.replace(待比對的字元串|正規表達式，替換的内容)
作用：用于替換字元串中的資料
傳回：傳回新的字元串（替換後的字元串）
例:将表單輸入字元串中的敏感字元'小日本',有則替換成**
<body>
<input type="text" placeholder="請輸入文字" id="txt" value="" /><br />
<input type="button" value="檢測" id="btn" /><br />
</body>
<script>
var chk = document.getElementById('btn');
chk.onclick = function () {
var txt = document.getElementById('txt').value;
var reg = /小日本/g; // 加g替換所有的敏感詞
console.log(txt.replace(reg, '**'));
}
</script>
四、常用檢測方式
1.中文檢測
unicode編碼中文監測：/^[\u2E80-\u9FFF]+$/
2.使用者名檢測
正則：/^[a-z0-9_-]{3,16}$/
3.郵箱檢測
/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
可以多次出現 (字母數字下劃線.-)@可以出現多個(數字字母.-).2到6位字母或.
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
可以有多個(字母數字)可有多個可無(.多個(字母數字))@可以多個(數字字母可 有1次可無(-數字字母))可以有多個(1或2個.多個字母)
4.URL檢測
/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w\.-]*)*\/?$/
5.HTML标簽檢測
/^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/
<多個(字母)可多個或0個(除了<的所有字元) />
<多個(字母)可多個或0個(除了<的所有字元)>多個任意字元 </重複第一部分的多個字母>
6.自定義的html标簽
/<[^<>]+>/g
總結：
前端往往有大量的表單資料校驗工作，采用正規表達式會使得資料校驗的工作量大大減輕。常用效果：郵箱，手機号，身份證号等（使用熟練的情況下）。
任何程式都可以不用正規表達式寫出來，但根據懶人原則，怎麼做不言而喻。
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)