- 了解正則表達(dá)式基本語法
- 能夠使用JavaScript的正則對象
正則表達(dá)式簡介
什么是正則表達(dá)式
正則表達(dá)式：用于匹配規(guī)律規(guī)則的表達(dá)式练链，正則表達(dá)式最初是科學(xué)家對人類神經(jīng)系統(tǒng)的工作原理的早期研究，現(xiàn)在在編程語言中有廣泛的應(yīng)用聚请。正則表通常被用來檢索、替換那些符合某個模式(規(guī)則)的文本姨伟。
正則表達(dá)式是對字符串操作的一種邏輯公式坞笙，就是用事先定義好的一些特定字符、及這些特定字符的組合氓辣，組成一個“規(guī)則字符串”，這個“規(guī)則字符串”用來表達(dá)對字符串的一種過濾邏輯袱蚓。
正則表達(dá)式的作用
- 給定的字符串是否符合正則表達(dá)式的過濾邏輯(匹配)
- 可以通過正則表達(dá)式钞啸，從字符串中獲取我們想要的特定部分(提取)
- 強(qiáng)大的字符串替換能力(替換)
正則表達(dá)式的特點(diǎn)
- 靈活性、邏輯性和功能性非常的強(qiáng)
- 可以迅速地用極簡單的方式達(dá)到字符串的復(fù)雜控制
- 對于剛接觸的人來說，比較晦澀難懂
正則表達(dá)式的測試
- 在線測試正則
- 工具中使用正則表達(dá)式
- sublime/vscode/word
- 演示替換所有的數(shù)字
正則表達(dá)式的組成
- 普通字符abc 123
- 特殊字符(元字符)：正則表達(dá)式中有特殊意義的字符\d \w
示例演示：
-
\d匹配數(shù)字 -
ab\d匹配 ab1体斩、ab2
元字符
通過測試工具演示下面元字符的使用
常用元字符串
| 元字符 | 說明 |
|---|---|
| \d | 匹配數(shù)字 |
| \D | 匹配任意非數(shù)字的字符 |
| \w | 匹配字母或數(shù)字或下劃線 |
| \W | 匹配任意不是字母梭稚，數(shù)字，下劃線 |
| \s | 匹配任意的空白符 |
| \S | 匹配任意不是空白符的字符 |
| . | 匹配除換行符以外的任意單個字符 |
| ^ | 表示匹配行首的文本(以誰開始) |
| $ | 表示匹配行尾的文本(以誰結(jié)束) |
限定符
| 限定符 | 說明 |
|---|---|
| * | 重復(fù)零次或更多次 |
| + | 重復(fù)一次或更多次 |
| ? | 重復(fù)零次或一次 |
| {n} | 重復(fù)n次 |
| {n,} | 重復(fù)n次或更多次 |
| {n,m} | 重復(fù)n到m次 |
其它
[] 字符串用中括號括起來絮吵，表示匹配其中的任一字符弧烤，相當(dāng)于或的意思
[^] 匹配除中括號以內(nèi)的內(nèi)容
\ 轉(zhuǎn)義符
| 或者，選擇兩者中的一個蹬敲。注意|將左右兩邊分為兩部分暇昂，而不管左右兩邊有多長多亂
() 從兩個直接量中選擇一個，分組
eg：gr(a|e)y匹配gray和grey
[\u4e00-\u9fa5] 匹配漢字
案例
驗(yàn)證手機(jī)號：
^\d{11}$
驗(yàn)證郵編：
^\d{6}$
驗(yàn)證日期 2012-5-01
^\d{4}-\d{1,2}-\d{1,2}$
驗(yàn)證郵箱 xxx@itcast.cn：
^\w+@\w+\.\w+$
驗(yàn)證IP地址 192.168.1.10
^\d{1,3}\(.\d{1,3}){3}$
JavaScript 中使用正則表達(dá)式
創(chuàng)建正則對象
方式1：
var reg = new RegExp('\d', 'i');
var reg = new RegExp('\d', 'gi');
方式2：
var reg = /\d/i;
var reg = /\d/gi;
參數(shù)
| 標(biāo)志 | 說明 |
|---|---|
| i | 忽略大小寫 |
| g | 全局匹配 |
| gi | 全局匹配+忽略大小寫 |
正則匹配
// 匹配日期
var dateStr = '2015-10-10';
var reg = /^\d{4}-\d{1,2}-\d{1,2}$/
console.log(reg.test(dateStr));
正則提取
// 1. 提取工資
var str = "張三：1000伴嗡，李四：5000急波，王五：8000。";
var array = str.match(/\d+/g);
console.log(array);
// 2. 提取email地址
var str = "123123@xx.com,fangfang@valuedopinions.cn 286669312@qq.com 2瘪校、emailenglish@emailenglish.englishtown.com 286669312@qq.com...";
var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
console.log(array);
// 3. 分組提取
// 3. 提取日期中的年部分 2015-5-10
var dateStr = '2016-1-5';
// 正則表達(dá)式中的()作為分組來使用澄暮，獲取分組匹配到的結(jié)果用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 = "123123@xx.com";
if (reg.test(str)) {
console.log(RegExp.$1);
console.log(RegExp.$2);
console.log(RegExp.$3);
}
正則替換
// 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);
案例：表單驗(yàn)證
QQ號：<input type="text" id="txtQQ"><span></span><br>
郵箱：<input type="text" id="txtEMail"><span></span><br>
手機(jī)：<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 () {
//獲取當(dāng)前文本框?qū)?yīng)的span
var span = this.nextElementSibling;
var reg = /^\d{5,12}$/;
//判斷驗(yàn)證是否成功
if(!reg.test(this.value) ){
//驗(yàn)證不成功
span.innerText = "請輸入正確的QQ號";
span.style.color = "red";
}else{
//驗(yàn)證成功
span.innerText = "";
span.style.color = "";
}
};
//txtEMail
txtEMail.onblur = function () {
//獲取當(dāng)前文本框?qū)?yīng)的span
var span = this.nextElementSibling;
var reg = /^\w+@\w+\.\w+(\.\w+)?$/;
//判斷驗(yàn)證是否成功
if(!reg.test(this.value) ){
//驗(yàn)證不成功
span.innerText = "請輸入正確的EMail地址";
span.style.color = "red";
}else{
//驗(yàn)證成功
span.innerText = "";
span.style.color = "";
}
};
表單驗(yàn)證部分价认，封裝成函數(shù)：
var regBirthday = /^\d{4}-\d{1,2}-\d{1,2}$/;
addCheck(txtBirthday, regBirthday, "請輸入正確的出生日期");
//給文本框添加驗(yàn)證
function addCheck(element, reg, tip) {
element.onblur = function () {
//獲取當(dāng)前文本框?qū)?yīng)的span
var span = this.nextElementSibling;
//判斷驗(yàn)證是否成功
if(!reg.test(this.value) ){
//驗(yàn)證不成功
span.innerText = tip;
span.style.color = "red";
}else{
//驗(yàn)證成功
span.innerText = "";
span.style.color = "";
}
};
}
通過給元素增加自定義驗(yàn)證屬性對表單進(jìn)行驗(yàn)證：
<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>
手機(jī)：<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>
// 所有的驗(yàn)證規(guī)則
var rules = [
{
name: 'qq',
reg: /^\d{5,12}$/,
tip: "請輸入正確的QQ"
},
{
name: 'email',
reg: /^\w+@\w+\.\w+(\.\w+)?$/,
tip: "請輸入正確的郵箱地址"
},
{
name: 'phone',
reg: /^\d{11}$/,
tip: "請輸入正確的手機(jī)號碼"
},
{
name: 'date',
reg: /^\d{4}-\d{1,2}-\d{1,2}$/,
tip: "請輸入正確的出生日期"
},
{
name: 'cn',
reg: /^[\u4e00-\u9fa5]{2,4}$/,
tip: "請輸入正確的姓名"
}];
addCheck('frm');
//給文本框添加驗(yàn)證
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屬性的元素添加驗(yàn)證
if (element.name) {
element.onblur = function () {
// 使用dataset獲取data-自定義屬性的值
var ruleName = this.dataset.rule;
var rule =getRuleByRuleName(rules, ruleName);
var span = this.nextElementSibling;
//判斷驗(yàn)證是否成功
if(!rule.reg.test(this.value) ){
//驗(yàn)證不成功
span.innerText = rule.tip;
span.style.color = "red";
}else{
//驗(yàn)證成功
span.innerText = "";
span.style.color = "";
}
}
}
}
}
// 根據(jù)規(guī)則的名稱獲取規(guī)則對象
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;
}
