正則表達(dá)式(regular expression)描述了一種字符串匹配的模式（pattern）憔鬼，可以用來(lái)檢查一個(gè)串是否含有某種子串仙逻、將匹配的子串替換或者從某個(gè)串中取出符合某個(gè)條件的子串等横腿。使用好正則表達(dá)式可以節(jié)省大量的代碼费就。

先從簡(jiǎn)單的案例體驗(yàn)下正則

/abc/.test("51abcd23");//true
/\d\d\d/.test("12ab");//false
/\d\d\d/.test("123ab");//true

new RegExp("Frankin").test("hello,Frankin");//true

以上定義了兩種正則調(diào)用的方法，當(dāng)校驗(yàn)規(guī)則是字符串的時(shí)候很好理解茬腿，就是被校驗(yàn)的字符串里是否含有校驗(yàn)規(guī)則的字符串歪赢，如果包含的話返回true,反之校驗(yàn)失敗返回false，并且大小寫(xiě)敏感单料，而\d這種特殊的語(yǔ)句規(guī)則又是什么呢埋凯？\d其實(shí)代表匹配0-9的數(shù)字,而這種匹配規(guī)則還有很多，我們可以看下圖扫尖。

常用元字符串:

范圍符號(hào)：

這里可能\b 零寬單詞邊界比較難理解甩恼，這里重點(diǎn)解釋下

當(dāng)我們需要把一句 This is a test這句話的is 替換成 IS時(shí)，如果直接匹配is，會(huì)把This后面的is也給替換掉条摸，這時(shí)使用單詞邊界\bis\b來(lái)匹配悦污，便可以只匹配is而不匹配This了

當(dāng)我們剛好要匹配^或者$這些帶有范圍符號(hào)規(guī)則的字符時(shí),該怎么辦呢？

這時(shí)就需要用轉(zhuǎn)義字符\來(lái)聲明 不做別的范圍匹配作用 例如^

/\^abc/.test('^abc');//true

分組：

這里講解下(x)和(?:x)的區(qū)別

當(dāng)使用(x)分組時(shí)切端，使用\n重新匹配第n個(gè)分組

當(dāng)只想將復(fù)雜的表達(dá)式分組，而不記錄被/n調(diào)用時(shí)顷啼，使用(?:x)便不會(huì)記錄匹配到的字符串

/(abc)(def)\1/.test('abcdefabc');//true
/(?:abc)(def)\1/.test('abcdefabc');//false
/(?:abc)(def)\1/.test('abcdefabc');//true

'2016-11-25'.replace(/(\d{4})-(\d{2})-(\d{2})/,'$2/$3/$1');
//"11/25/2016"

重復(fù)：

前瞻

前瞻就是在正則表達(dá)式匹配到規(guī)則的時(shí)候躬厌，向前檢查是否符合斷言

js不支持后顧

'a2*3'.replace(/\w(?=\d)/g,'X');
//"X2*3"
'a2*34v8'.replace(/\w(?=\d)/g,'X');
//"X2*X4X8"
'a2*34vv'.replace(/\w(?=\d)/g,'X');
//"X2*X4vv"
'a2*34vv'.replace(/\w(?!\d)/g,'X');
//"aX*3XXX"

Flag马昨、RegExp對(duì)象屬性

• global--g （全文匹配）
• IgnoreCase--i (忽略大小寫(xiě))
• Multiline--m. (多行搜索)
• source （正則表達(dá)式的文本字符串）
• lastIndex (是當(dāng)前表達(dá)式匹配內(nèi)容的最后一個(gè)字符的下一個(gè)位置)

var reg = /\bis\b/;
//或
var reg = new RegExp('\\bis\\b');

'He is a boy.This is a dog'.replace(reg,'IS')

//"He IS a boy.This is a dog"

//添加g 全文匹配，否則匹配到第一個(gè)后停止
var reg = /\bis\b/g;
//或
var reg = new RegExp('\\bis\\b',g);
'He is a boy.This is a dog'.replace(reg,'IS')
//"He IS a boy.This IS a dog"

//IgnoreCase用法
'This Is a dog'.replace(/is/g,'Q')
//"ThQ Is a dog"
'This Is a dog'.replace(/is/gi,'Q')
//"ThQ Q a dog"


//Multiline用法
const mulStr = "@123
                                @456
                                @789"
mulStr.replace(/^@\d/g,'X');
//  "X23
//  @456
//  @789"
mulStr.replace(/^@\d/gm,'X');
//  "X23
//  X456
//  X789"

RegExp對(duì)象方法

• compile
• exec
• test
• toString

/abc/.exec("abcdef"); // "abc" 此方法返回匹配到的字符串,類似字符串的match方法
/abc/.test("abcde"); //true   此方法返回boolean值
/abc/.toString();// "/abc/"
var reg = /abc/; 
reg.compile("def"); //compile修改正則的屬性
reg.test("def");//true

string類型與正則相關(guān)的方法

• String.prototype.search 檢索正則規(guī)則匹配的字符串所在的索引
• String.prototype.replace 替換正則匹配的值
• String.prototype.match 返回一個(gè)數(shù)組烤咧，匹配正則規(guī)則的值組成的數(shù)組
• String.prototype.split 字符串根據(jù)正則分割

"abcabcdef".search(/(abc)/1/);//0
"aabbbbcc".replace(/b+?/,1); //aa1bbbcc
"aabbbbcc".match(/b+/);//["bbbb"]
"aabbbbccbbaa".match(/b+/g);//["bbbb","bb"]
"aabbbbccbbaa".split(/b+/);//["aa","cc","aa"]

正則可視化工具

https://regexper.com

該站點(diǎn)有可能會(huì)被墻偏陪，為了穩(wěn)定的訪問(wèn)，我們也可以在github下clone煮嫌，進(jìn)行本地部署

https://github.com/javallone/regexper-static