一.創(chuàng)建正則表達式（2個）
1.使用字面量創(chuàng)建：var reg = /a/;
2.使用RegExp構(gòu)造函數(shù)創(chuàng)建：var reg = new RegExp("a","修飾符"）;
var reg=new RegExp("a","g");
console.log(reg); //打印出 /a/g
注意：正則表達式分為兩個部分一個是正則匹配內(nèi)容，一個是修飾符部分;
二.正則表達式對象的方法(2個）
1.exec(); //查找字符串中滿足正則匹配內(nèi)容的結(jié)果,并且返回一個數(shù)組,
這個數(shù)組只有一個元素,包括幾個屬性,分別是群組,索引,字符串自身
var reg=/a/g;
console.log(reg.exec("abca"));//打印結(jié)果如下圖
在這里插入圖片描述
2.test();//判斷字符串是否滿足正則匹配內(nèi)容
var reg=/a/g;
console.log(reg.test("abca"));// true
三.常用字符串匹配正則方法(4個）
1.search();//按照正則表達式查找字符串中的內(nèi)容,返回優(yōu)先查找到第一個元素下標
var str="abcdeafgh";
console.log(str.search(/a/)); //打印 0
2.split();//按照正則表達式匹配內(nèi)容切割字符串
var str="abcdeafgh";
console.log(str.split("b"));//["a","cdeafgh"]
console.log(str.split(/[cf]/));//["ab","dea","gh"]
3.replace();//按照正則表達式匹配內(nèi)容進行替換,可以替換成相同的也可以替換成不同的
var str="abcdea";
str=str.replace(/a/g,"z");
console.log(str); //zbcdez
//把任何滿足正則內(nèi)容的進行替換
var str="abcdea";
str=str.replace(/[bdfh]/g,"0");
console.log(str); //a0c0ea
replace還可以這樣寫
str.replace(正則表達式,回調(diào)函數(shù)(item,index){
return //返回要替換的內(nèi)容
});
var str="abcdea";
str=str.replace(/a/g,function(item,index){
return index===0 ? "x" : "y";
})
console.log(str);//xbcdey
// 查找所有匹配正則元素的下標
var str="abcdea";
var arr=[];
str.replace(/a/g,function(item,index){
arr.push(index);
})
console.log(arr);//[0, 5]
var str="abcabcadf";
str=str.replace(/[abc]/g,function(item){
switch(item){
case "a":return "1";
case "b":return "2";
case "c":return "3";
}
});
console.log(str);//1231231df
4.match();//接收一個參數(shù)，正則去匹配字符串，如果匹配成功，就返回匹配成功的數(shù)組，如果匹配不成功，就返回null
var str="abcadef";
console.log(str.match(/a/g));//["a", "a"]
//如果不加全局,可以達到exec的目的
// 如果加有全局匹配,就會只返回找到的所有元素數(shù)組
// 如果加有群組,但是不加全局,則除返回找到的元素外,還返回群組的元素
四.修飾符(3個）
1.i ：執(zhí)行對大小不敏感的匹配；
2.g ：執(zhí)行全局匹配（查找所有匹配而非在找到第一個后停止）;
3.m ：執(zhí)行多行匹配;
五.元字符
常用元字符表
| 元字符 | 描述 |
|---|---|
| \ | 將下一個字符標記符、或一個向后引用、或一個八進制轉(zhuǎn)義符。例如，“\n”匹配\n?！癨n”匹配換行符。序列“\”匹配“\”而“(”則匹配“(”。即相當于多種編程語言中都有的“轉(zhuǎn)義字符”的概念。 |
| ^ | 匹配輸入字行首。如果設置了RegExp對象的Multiline屬性，^也匹配“\n”或“\r”之后的位置。 |
| $ | 匹配輸入行尾。如果設置了RegExp對象的Multiline屬性，$也匹配“\n”或“\r”之前的位置。 |
| * | 匹配前面的子表達式任意次。例如，zo能匹配“z”，也能匹配“zo”以及“zoo”。等價于o{0,} |
| + | 匹配前面的子表達式一次或多次(大于等于1次）。例如，“zo+”能匹配“zo”以及“zoo”，但不能匹配“z”。+等價于{1,}。 |
| ? | 匹配前面的子表達式零次或一次。例如，“do(es)?”可以匹配“do”或“does”中的“do”。?等價于{0,1}。 |
| {n} | n是一個非負整數(shù)。匹配確定的n次。例如，“o{2}”不能匹配“Bob”中的“o”，但是能匹配“food”中的兩個o。 |
| ? | 當該字符緊跟在任何一個其他限制符（*,+,?，{n}，{n,}，{n,m}）后面時，匹配模式是非貪婪的。非貪婪模式盡可能少的匹配所搜索的字符串，而默認的貪婪模式則盡可能多的匹配所搜索的字符串。例如，對于字符串“oooo”，“o+”將盡可能多的匹配“o”，得到結(jié)果[“oooo”]，而“o+?”將盡可能少的匹配“o”，得到結(jié)果 ['o', 'o', 'o', 'o'] |
| .點 | 匹配除“\n”之外的任何單個字符。要匹配包括“\n”在內(nèi)的任何字符，請使用像“[\s\S]”的模式。 |
| x/y | 匹配x或y。例如，“z/food”能匹配“z”或“food”(此處請謹慎)?！癧zf]ood”則匹配“zood”或“food”。 |
| [xyz] | 字符集合。匹配所包含的任意一個字符。例如，“[abc]”可以匹配“plain”中的“a”。 |
| [^xyz] | 負值字符集合。匹配未包含的任意字符。例如，“[^abc]”可以匹配“plain”中的“plin”。 |
| [a-z] | 字符范圍。匹配指定范圍內(nèi)的任意字符。例如，“[a-z]”可以匹配“a”到“z”范圍內(nèi)的任意小寫字母字符。注意:只有連字符在字符組內(nèi)部時,并且出現(xiàn)在兩個字符之間時,才能表示字符的范圍; 如果出字符組的開頭,則只能表示連字符本身. |
| [^a-z] | 負值字符范圍。匹配任何不在指定范圍內(nèi)的任意字符。例如，“[^a-z]”可以匹配任何不在“a”到“z”范圍內(nèi)的任意字符 |
| \d | 匹配一個數(shù)字字符。等價于[0-9]。grep 要加上-P，perl正則支持 |
| \D | 匹配一個非數(shù)字字符。等價于[^0-9]。grep要加上-P，perl正則支持 |
| \s | 匹配任何不可見字符，包括空格、制表符、換頁符等等。等價于[ \f\n\r\t\v]。 |
| \S | 匹配任何可見字符。等價于[^ \f\n\r\t\v]。 |
| \w | 匹配包括下劃線的任何單詞字符。類似但不等價于“[A-Za-z0-9_]”，這里的"單詞"字符使用Unicode字符集。 |
| \W | 匹配任何非單詞字符。等價于“[^A-Za-z0-9_]”。 |
| ( ) | 將( 和 ) 之間的表達式定義為“組”（group），并且將匹配這個表達式的字符保存到一個臨時區(qū)域（一個正則表達式中最多可以保存9個），它們可以用 \1 到\9 的符號來引用。 |
| / | 將兩個匹配條件進行邏輯“或”（Or）運算。 |
| (?=pattern) | 正向肯定預查（look ahead positive assert），在任何匹配pattern的字符串開始處匹配查找字符串。這是一個非獲取匹配，也就是說，該匹配不需要獲取供以后使用。 |
| (?!pattern) | 正向否定預查(negative assert)，在任何不匹配pattern的字符串開始處匹配查找字符串。這是一個非獲取匹配，也就是說，該匹配不需要獲取供以后使用。 |
| (?<=pattern) | 反向(look behind)肯定預查，與正向肯定預查類似，只是方向相反。 |
| (?<!pattern) | 反向否定預查，與正向否定預查類似，只是方向相反。 |
詳解
- .//可以匹配任意一個字符
console.log("dogcat".match(/cat/g));//["cat"]
console.log("cetcotcat".match(/c.t/g));//["cet","cot","cat"]
console.log("cetc.tcat".match(/c\.t/g));//\.轉(zhuǎn)義為字符串. 打印 ["c.t"]
console.log("caaaaatcbbbbt".match(/c....t/g));//["cbbbbt"]
- /[1-31]/ 1,2,3 (一個[]里數(shù)字只能匹配1到9），
/[0-9]/ 0,1,2,3,4,5,6,7,8,9
/[a-z]/ a,b,c,d,e,...z
/[A-Z]/ A,B,C,D.....Z
console.log(/[a-Z]/.test("abc"));//錯誤的
console.log(/[A-z]/.test("abc"));//錯誤的
console.log(/[a-zA-Z]/)
console.log(/a[b.c]b/);//[]中的.是字符.
console.log(/a[\[\]]b/)//a[b a]b 寫在[]里面[]字符必須轉(zhuǎn)義
console.log(/[aaaa]/);//[]中重復是無意義的
// 反義字符類 在[]中第一位使用^,表示除了^后面的字符外都滿足
console.log("abcafcadcaec".match(/a[^f]c/g))//中間不要f
console.log("abcafcadcaec".match(/a[f^a]c/g))//^如果在[]不是第一位,就表示字符^
注意：
- 如果元字符·不放在[]中表示可以匹配任意字符，放在[]中只表示字符 ·，
因為[]是表示可以在里面任意匹配一個 字符； - ^如果放在[]里第一位，表示除了 ^后面的字符外都滿足，如果放的不是第一位，只表示 ^字符；
3.轉(zhuǎn)義特殊字符
[a-zA-Z0-9_] \w
[^a-zA-Z0-9_] \W
[0-9] \d
[^0-9] \D
\s 空白字符
\S 非空白字符
var str=" ac bg ed";
str=str.replace(/\s/g,"");//acbged
str=str.replace(/\S/g,"z");// zz zz zz
console.log(str);
注意： 空白字符就用空格隔開的 空字符就是"" ,"ab"兩個字符之間夾得就是空字符
4.{}
例如：/\d\d\d\d-\d\d-\d\d/ 可簡化成——>/\d{4}-\d{2}-\d{2}
/abc{2}/ //c重復兩次
/(abc){2}/ //abc重復兩次
/a{0}/ //沒有字符a，意味著匹配一個空字符；
5.貪婪匹配：先匹配最大的
例如：
console.log("aaaaaaaa".match(/a{2,5}/g));//["aaaaa", "aaa"]
console.log("aaaaaabbb".match(/a{0,4}/g));//["aaaa", "aa", "", "", "", ""]
console.log("aaaaaa".match(/a{3,6}/g));//["aaaaaa"]
6.? + * .?
? {0,1}
// + {1,}
// * {0,}
/.?/ //非貪婪模式 所有貪婪匹配后加？為貪婪
console.log("aaaaaaaa".match(/a{2}/g));//["aa", "aa", "aa", "aa"]
console.log("caaaaatcbbbbt".match(/c.*?t/g));// ["caaaaat", "cbbbbt"]
7.或者|字符
console.log("catdogcetdag".match(/[catdog]/))
//["c", index: 0, input: "catdogcetdag"]
console.log("catdogcetdag".match(/cat|dog/));//或者,可以用來匹配多個字符或者
//另外得字符 打印["cat", index: 0, input: "catdogcetdag"]
console.log("abcd".match(/c|b/g));//["b", "c"]
console.log("abcd".match(/[cb]/));//["b", index: 1, input: "abcd"]
console.log("abcdef".match(/|a|b/g));//如果|得一端沒有內(nèi)容,則認為匹配空字符
//["", "", "", "", "", "", ""]
console.log("abcdef".match(/a||b/g));//如果|得一端沒有內(nèi)容,則認為匹配空字符
//["a", "", "", "", "", "", ""]
console.log("abcdef".match(/a|d|/g));//如果|得一端沒有內(nèi)容,則認為匹配空字符
// ["a", "", "", "d", "", "", ""]
8.^起始 $結(jié)束
案例
<input type="text"><span></span>//html
var input,span;
init(); //調(diào)用init函數(shù)
function init(){
input=document.querySelector("input");
span=document.querySelector("span");
input.addEventListener("input",inputHandler);//監(jiān)聽input的input事件，input事件觸發(fā)調(diào)用inputHandler函數(shù)
}
function inputHandler(e){
if(this.ids) return; //this指向input 如果this.ids為true return出去
this.ids=setTimeout(function(input){ //設置定時器并把值賦給this.ids
clearTimeout(input.ids);
input.ids=false;
testInputValue(input.value);
},500,this);
}
function testInputValue(txt){
console.log(txt.match(/^[1-9]$|^[12][0-9]$|^3[01]$/))
if(/^[1-9]$|^[12][0-9]$|^3[01]$/.test(txt)){//判斷值是否為1-31是為true進入
span.textContent="輸入正確";
span.style.color="green";
}else{
span.textContent="輸入錯誤";
span.style.color="red";
}
}
9.群組
console.log("18617891076".match(/(\d{3})(\d{4})(\d{4})/))//群組元素要打印本身["18617891076", "186", "1789", "1076", index: 0, input: "18617891076"]
var str="18617891076".match(/(\d{3})(\d{4})(\d{4})/).slice(1).reduce(function(value,item,index){
return index===1 ? value+"****" : value+item;
})
console.log(str); //186****1076
//$1就是第一個群組,$2就是第二個群組,$3就是第三個群組
var str="18617891076".replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3");
console.log(str);//186****1076
10.斷言 ?= ?! ?<= ?<!
console.log("abcdadef".match(/a(?=d)/g))//["a"]
console.log("a0bcd adef a&cd".replace(/a(?=d)/g,"0"));//a0bcd 0def a&cd
console.log("a0bcd adef a&cd".replace(/a(?=[a-z])|a(?=[0-9])/g,"1"));
//10bcd 1def a&cd
console.log("a0bc adef a&bc".replace(/a(?![a-z])/g,"1"));
//?!相當于不等于 10bc adef 1&bc
console.log("a0bc adef a&bc".replace(/(?<=[0-9])b/g,"1"));//前置條件
console.log("a0bc adef a&bc".replace(/(?<![0-9])b/g,"1"));//前置條件不等于
