1 什麼是正則表達式
正則表達式：用於匹配規律規則的表達式，正則表達式最初是科學家對人類神經系統的工作原理的早期研究，現在在編程語言中有廣泛的應用。正則表通常被用來檢索、替換那些符合某個模式(規則)的文本。
正則表達式是對字符串操作的一種邏輯公式，就是用事先定義好的一些特定字符、及這些特定字符的組合，組成一個“規則字符串”，這個“規則字符串”用來表達對字符串的一種過濾邏輯。
2 正則表達式的作用
1. 給定的字符串是否符合正則表達式的過濾邏輯(匹配)
2. 可以通過正則表達式，從字符串中獲取我們想要的特定部分(提取)
3. 強大的字符串替換能力(替換)
3 正則表達式的特點
1. 靈活性、邏輯性和功能性非常的強
2. 可以迅速地用極簡單的方式達到字符串的複雜控制
3. 對於剛接觸的人來說，比較晦澀難懂
4 正則表達式的測試
[在線測試正則](https://c.runoob.com/front-end/854)
5 正則表達式的組成
1普通字符
2 特殊字符(元字符)：正則表達式中有特殊意義的字符
示例演示：
`\d` 匹配數字
`ab\d` 匹配 ab1、ab2
6 常用元字符串
| 元字符 | 說明 |
| \d | 匹配數字 |
| \D | 匹配任意非數字的字符 |
| \w | 匹配字母或數字或下劃線 |
| \W | 匹配任意不是字母，數字，下劃線 |
| \s | 匹配任意的空白符 |
| \S | 匹配任意不是空白符的字符 |
| . | 匹配除換行符以外的任意單個字符 |
| ^ | 表示匹配行首的文本(以誰開始) |
| $ | 表示匹配行尾的文本(以誰結束) |
7 限定符
| 限定符 | 說明 |
| * | 重複零次或更多次 |
| + | 重複一次或更多次 |
| ? | 重複零次或一次 |
| {n} | 重複n次 |
| {n,} | 重複n次或更多次 |
| {n,m} | 重複n到m次 |
其它
[] 字符串用中括號括起來，表示匹配其中的任一字符，相當於或的意思
[^] 匹配除中括號以內的內容
\ 轉義符
| 或者，選擇兩者中的一個。注意|將左右兩邊分爲兩部分，而不管左右兩邊有多長多亂
() 從兩個直接量中選擇一個，分組
eg：gr(a|e)y匹配gray和grey
[\u4e00-\u9fa5] 匹配漢字
8 案例
8.1驗證手機號：^\d{11}$
8.2驗證郵編：^\d{6}$
8.3驗證日期 2012-5-01 ^\d{4}-\d{1,2}-\d{1,2}$
8.4驗證郵箱 [email protected]：^\w+@\w+\.\w+$
8.5驗證IP地址 192.168.1.10 ^\d{1,3}\(.\d{1,3}){3}$
9 JavaScript 中使用正則表達式
9.1 創建正則對象
方式1：
var reg = new Regex('\d', 'i');
var reg = new Regex('\d', 'gi');
方式2：
var reg = /\d/i;
var reg = /\d/gi;
9.2 參數
| 標誌 | 說明 |
| i | 忽略大小寫 |
| g | 全局匹配 |
| gi | 全局匹配+忽略大小寫 |
9.3 正則匹配
// 匹配日期
var dateStr = '2015-10-10';
var reg = /^\d{4}-\d{1,2}-\d{1,2}$/
console.log(reg.test(dateStr));
9.4 匹配正則表達式
console.log(/./.test("除了回車換行以爲的任意字符"));//true
console.log(/.*/.test("0個到多個"));//true
console.log(/.+/.test("1個到多個"));//true
console.log(/.?/.test("哈哈"));//true
console.log(/[0-9]/.test("9527"));//true
console.log(/[a-z]/.test("what"));//true
console.log(/[A-Z]/.test("Are"));//true
console.log(/[a-zA-Z]/.test("幹啥子"));//false
console.log(/[0-9a-zA-Z]/.test("9ebg"));//true
console.log(/b|(ara)/.test("abra"));//true
console.log(/[a-z]{2,3}/.test("arfsf"));//true
console.log(/\d/.test("998"));//true
console.log(/\d*/.test("998"));//true
console.log(/\d+/.test("998"));//true
console.log(/\d{0,}/.test("998"));//true
console.log(/\d{2,3}/.test("998"));//true
console.log(/\D/.test("eat"));//true
console.log(/\s/.test(" "));//true
console.log(/\S/.test("嘎嘎"));//true
console.log(/\w/.test("_"));//true
console.log(/\W/.test("_"));//true
10正則表達式案例
1.驗證密碼強弱
2.驗證郵箱：[0-9a-zA-Z_.-]+[@][0-9a-zA-Z._-]+([.][a-zA-Z]+){1,2}
3.驗證中文名字[\u4e00-\u9fa5]
10.1 正則提取
1. 提取工資
var str = "張三：1000，李四：5000，王五：8000。";
var array = str.match(/\d+/g);
console.log(array);
2. 提取email地址
var str = "[email protected],[email protected] [email protected] 2、[email protected] [email protected]...";
var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
console.log(array);
3. 分組提取
3. 提取日期中的年部分 2015-5-10
var dateStr = '2016-1-5';
正則表達式中的()作爲分組來使用，獲取分組匹配到的結果用Regex.$1 $2 $3....來獲取
var reg = /(\d{4})-\d{1,2}-\d{1,2}/;
if (reg.test(dateStr)) {
console.log(RegExp.$1);
}
4. 提取郵件中的每一部分
var reg = /(\w+)@(\w+)\.(\w+)(\.\w+)?/;
var str = "[email protected]";
if (reg.test(str)) {
console.log(RegExp.$1);
console.log(RegExp.$2);
console.log(RegExp.$3);
}
10.2 正則替換
1. 替換所有空白
var str = " 123AD asadf asadfasf adf ";
str = str.replace(/\s/g,"xx");
console.log(str);
2. 替換所有,|，
var str = "abc,efg,123，abc,123，a";
str = str.replace(/,|，/g, ".");
console.log(str);
11 案例：表單驗證
方式1
QQ號：<input type="text" id="txtQQ"><span></span><br>
郵箱：<input type="text" id="txtEMail"><span></span><br>
手機：<input type="text" id="txtPhone"><span></span><br>
生日：<input type="text" id="txtBirthday"><span></span><br>
姓名：<input type="text" id="txtName"><span></span><br>
//獲取文本框
var txtQQ = document.getElementById("txtQQ");
var txtEMail = document.getElementById("txtEMail");
var txtPhone = document.getElementById("txtPhone");
var txtBirthday = document.getElementById("txtBirthday");
var txtName = document.getElementById("txtName");
txtQQ.onblur = function () {
//獲取當前文本框對應的span
var span = this.nextElementSibling;
var reg = /^\d{5,12}$/;
//判斷驗證是否成功
if(!reg.test(this.value) ){
//驗證不成功
span.innerText = "請輸入正確的QQ號";
span.style.color = "red";
}else{
//驗證成功
span.innerText = "";
span.style.color = "";
}
};
//txtEMail
txtEMail.onblur = function () {
//獲取當前文本框對應的span
var span = this.nextElementSibling;
var reg = /^\w+@\w+\.\w+(\.\w+)?$/;
//判斷驗證是否成功
if(!reg.test(this.value) ){
//驗證不成功
span.innerText = "請輸入正確的EMail地址";
span.style.color = "red";
}else{
//驗證成功
span.innerText = "";
span.style.color = "";
}
};
方式2
表單驗證部分，封裝成函數：
var regBirthday = /^\d{4}-\d{1,2}-\d{1,2}$/;
addCheck(txtBirthday, regBirthday, "請輸入正確的出生日期");
//給文本框添加驗證
function addCheck(element, reg, tip) {
element.onblur = function () {
//獲取當前文本框對應的span
var span = this.nextElementSibling;
//判斷驗證是否成功
if(!reg.test(this.value) ){
//驗證不成功
span.innerText = tip;
span.style.color = "red";
}else{
//驗證成功
span.innerText = "";
span.style.color = "";
}
};
}
方式3
通過給元素增加自定義驗證屬性對錶單進行驗證：
<form id="frm">
QQ號：<input type="text" name="txtQQ" data-rule="qq"><span></span><br>
郵箱：<input type="text" name="txtEMail" data-rule="email"><span></span><br>
手機：<input type="text" name="txtPhone" data-rule="phone"><span></span><br>
生日：<input type="text" name="txtBirthday" data-rule="date"><span></span><br>
姓名：<input type="text" name="txtName" data-rule="cn"><span></span><br>
</form>
// 所有的驗證規則
var rules = [
{
name: 'qq',
reg: /^\d{5,12}$/,
tip: "請輸入正確的QQ"
},
{
name: 'email',
reg: /^\w+@\w+\.\w+(\.\w+)?$/,
tip: "請輸入正確的郵箱地址"
},
{
name: 'phone',
reg: /^\d{11}$/,
tip: "請輸入正確的手機號碼"
},
{
name: 'date',
reg: /^\d{4}-\d{1,2}-\d{1,2}$/,
tip: "請輸入正確的出生日期"
},
{
name: 'cn',
reg: /^[\u4e00-\u9fa5]{2,4}$/,
tip: "請輸入正確的姓名"
}];
addCheck('frm');
//給文本框添加驗證
function addCheck(formId) {
var i = 0,
len = 0,
frm =document.getElementById(formId);
len = frm.children.length;
for (; i < len; i++) {
var element = frm.children[i];
// 表單元素中有name屬性的元素添加驗證
if (element.name) {
element.onblur = function () {
// 使用dataset獲取data-自定義屬性的值
var ruleName = this.dataset.rule;
var rule =getRuleByRuleName(rules, ruleName);
var span = this.nextElementSibling;
//判斷驗證是否成功
if(!rule.reg.test(this.value) ){
//驗證不成功
span.innerText = rule.tip;
span.style.color = "red";
}else{
//驗證成功
span.innerText = "";
span.style.color = "";
}
}
}
}
}
// 根據規則的名稱獲取規則對象
function getRuleByRuleName(rules, ruleName) {
var i = 0,
len = rules.length;
var rule = null;
for (; i < len; i++) {
if (rules[i].name == ruleName) {
rule = rules[i];
break;
}
}
return rule;
}