本節主要內容：
1.什麼是正則表達式
2.正則表達式進階
3.正則表達式高級
學習目標：
一、正則表達式
1.1 正則表達式概述
按照一定的規則，查找和替換字符串。
正則表達式概念：
正則表達式(英文為regular Expression)是一種【字符串檢索模式】
正則表達式具體表現為一個字符串的樣子。
正則表達式執行原理是：
通過【參數字符串】設置檢索規則，在【指定字符串】中檢索符合規則的字符串。
正則表達式的作用是：
可以用來進行文本搜索和文本替換。
1.2 正則表達式基本語法
正則表達式的基本語法
語法：/正則表達式主體/修飾符(可選)
例如：var frk_reg = /frank/gi;
其中
(1)/frank/i是一個正則表達式
(2)frank是這個正則表達式的主體，表示想要檢索的內容是frank
(3)i 是一個正則表達式的修飾符，表示檢索內容時不區分大小寫
1.3 正則表達式常見用法
正則表達式在實際開發中一般不會單獨使用，而是會配合一些方法來完成某種功能。
因為正則表達式的作用是對字符串進行操作，所以一般在實際開發中正則表達式會配合字符串的search和replace方法來使用。
1.3.1 search方法
search方法用於檢索與正則表達式相匹配的子字符串，並返回子字符串的起始位置。找不到是-1
例如：
在指定字符串中，通過正則表達式搜索目標子字符串。並且不區分大小寫。
var str = 'Hello Frank! GoodBye Frank!';
var first_index = str.search(/frank/i);
console.log(first_index);
1.3.2 match方法
match() 方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。
返回值存放匹配結果的數組
var str = 'Hello Frank! GoodBye Frank!';var first_index = str.match(/frank/gi);console.log(first_index);
1.3.3 replace方法
replace方法：用於在指定字符串中用一個字符串替換一個與正則表達式相匹配的子字符串
例如：
在指定字符串中，通過正則表達式替換指定字符串中的目標字符串
var str = 'Hello Frank! GoodBye Frank!';var newStr = str.replace(/frank/i,'frankenStein');console.log(newStr);
很顯然replace方法的作用是替換第一個匹配到的字符串，所以我們僅替換了第一個符合規則的Frank。
二、正則表達式進階
2.1 修飾符
修飾符是正則表達式進行字符串檢索時【檢索規則】的制定者之一。
修飾符規定了正則應按照何種方式進行檢索。
常見的修飾符類型有兩種：i 、g
i修飾符，表示正則檢索內容時不區分大小寫
例如：
使用i修飾符，在str中檢索frank出現的第一次下標
var str = 'Hello Frank! GoodBye Frank!'; var first_index = str.search(/frank/i);console.log(first_index);
代碼的執行結果是：6
不使用i修飾符，在str中檢索frank出現的第一次下標
var str = 'Hello Frank! GoodBye Frank!';var first_index = str.search(/frank/);console.log(first_index);
代碼的執行結果是：-1
g修飾符，表示正則檢索內容時採用全局匹配，而不是找到第一個就停止。
例如：
使用g修飾符，在str中替換所有的Frank為frankenStein
var str = 'Hello Frank! GoodBye Frank!';var newStr = str.replace(/frank/gi,'frankenStein');console.log(newStr);
代碼的執行結果是：Hello frankenStein! GoodBye frankenStein!
不使用g修飾符，在str中替換所有的Frank為frankenStein
var str = 'Hello Frank! GoodBye Frank!';var newStr = str.replace(/frank/i,'frankenStein');console.log(newStr);
代碼的執行結果是：Hello frankenStein! GoodBye Frank!
2.2 檢索模式
正則表達式的檢索模式，用於指定正則採用何種方式進行內容的檢索。
常見的檢索模式有表達式模式、元字符模式和量詞模式三種。
他們並不互相獨立而是相輔相成的關係，就像修飾符可以多個一起使用一樣。
2.2.1表達式模式
正則表達式的書寫方式是通過表達式編寫的模式稱為表達式模式。
常見的表達式模式有以下三種:
a) [abc]
b) [0-9]
c) [m|n]
每一種模式中的內容都是表示一類值，而不是字面的含義。
一個方括號代表一個字符。
[abc]：在指定字符串中檢索，查找任何滿足【存在於方括號中】規則的字符或字符串。
例如：
在str中替換所有:只要滿足【是a、b當中之一】的字符為(frank)
var str = '12abc12ABC';var newStr = str.replace(/[ab]/gi,'(frank)');console.log(newStr);//12(frank)(frank)c12(frank)(frank)C
正則不只是能替換英文，對於中文正則仍然生效
var str = '你好，弗蘭克！再見，弗蘭克！';
var newStr = str.replace(/[弗蘭克]/g,'(frank)');
console.log(newStr);//你好，(frank)(frank)(frank)！再見，(frank)(frank)(frank)！
正則匹配字符串時採用多個方括號即可
var str = '你好，弗蘭克！再見，弗蘭克！';var newStr = str.replace(/[弗][蘭][克]/g,'(frank)');console.log(newStr);//你好，(frank)！再見，(frank)！
[0-9]:在指定字符串中檢索，查找任何滿足【0至9之間】規則的的字符或字符串。該模式對字母也適用。
例如：在str中替換所有：【任意是0-9之間之一】的字符為(frank)
var str = '12abc12ABC';var newStr = str.replace(/[0-9]/gi,'(frank)');console.log(newStr);//(frank)(frank)abc(frank)(frank)ABC
在str中替換所有：【任意是a-z之間之一】的字符為(frank)
var str = '12abc12ABC';var newStr = str.replace(/[a-z]/g,'(frank)');console.log(newStr);//12(frank)(frank)(frank)12ABC
在str中替換所有：【任意是A-Z之間之一】的字符為(frank)
var str = '12abc12ABC';var newStr = str.replace(/[A-Z]/g,'(frank)');console.log(newStr);//12abc12(frank)(frank)(frank)
(x|y)：在指定字符串中檢索，查找任何滿足【以|分隔的選項之一】的字符或字符串。
例如：
在str中替換所有：【ab或者是ABC字符串】為'(frank)'
var str = '12abc12abABC';var newStr = str.replace(/(ab|ABC)/g,'(frank)');console.log(newStr);//12(frank)c12(frank)(frank)
ps:需要注意的是，如果使用|進行正則查找，則使用的是小括號。而不是中括號
2.2.2元字符模式
元字符：具有特殊含義的字符稱為元字符。
通過元字符來進行正則檢索的模式，稱為元字符模式。
常見的元字符模式有以下三種:
\w\d c) \s
d) \b
一個元字符代表一個字符。
\w 元字符用於查找字母，數字，下劃線。
z、A-Z、0-9，以及下劃線。var str = '$12abc12a@@^*(*^bABC';var re = str.match(/\w/g);console.log(re);
\W:除了字母，數字，下劃線
\d：在指定字符串中檢索，查找任何【是數字】規則的字符或字符串。
例如：
var str = '12abc12abABC';var newStr = str.replace(/\d/g,'(frank)');console.log(newStr);//(frank)(frank)abc(frank)(frank)abABCvar str = '12abc12abABC';var newStr = str.replace(/\d\d/g,'(frank)');console.log(newStr);//(frank)abc(frank)abABC
\D：除了數字的
\s: 在指定字符串中檢索，查找任何【是空白】規則的字符或字符串
例如：
var str = ' 12abc 12ab ABC ';var newStr = str.replace(/\s/g,'(frank)');console.log(newStr);//(frank)12abc(frank)12ab(frank)ABC(frank)var str = ' 12abc 12ab ABC ';var newStr = str.replace(/\s\s/g,'(frank)');console.log(newStr);// 12abc 12ab ABC\S:除了空白的字符
\b: 在指定字符串中檢索，查找任何【是單詞邊界】規則的字符或字符串
也就是說匹配單詞的開頭和結尾。
1.匹配結尾是abc的替換
2.匹配開頭是abc的替換
3.\B:除了開頭是abc的單詞，查找結尾是abc的或者是中間是abc的
例如：
var str = '12abc 12ab ABC';var newStr = str.replace(/\b/g,'(frank)');console.log(newStr);//(frank)12abc(frank) (frank)12ab(frank) (frank)ABC(frank)
var str = '12abc 12abAbc';var newStr = str.replace(/\b/g,'(frank)');console.log(newStr);//(frank)12abc(frank) (frank)12abABC(frank)
2.2.3 量詞模式
量詞：表示要檢索的字符或字符串出現的次數的詞組稱為量詞。
如果用n表示要檢索的字符或字符串，
那麼常見的量詞模式有以下三種：
a) n+
b) n*
c) n?
ps：n除了是具體的字符或字符串外，還可以是表達式或者元字符
n+：在原字符串中檢索任何【包含一個或多個n】的子字符串。
例如：
var str = 'a1abb2ab3baab';var newStr = str.match(/a/g);console.log(newStr);//["a", "a", "a", "a", "a"]var str = 'a1abb2ab3baab';var newStr = str.match(/ab/g);console.log(newStr);//["ab","ab","ab"]
var str = 'a1abb2ab3baab';var newStr = str.match(/a+/g);console.log(newStr);//["a", "a", "a", "aa"]
var str = 'a1abb2ab3baab';var newStr = str.match(/ab+/g);console.log(newStr);//["abb", "ab", "ab"]
n*：在原字符串中檢索任何【包含0個或多個n】的子字符串。
例如：
var str = 'a1abb2ab3baab';var newStr = str.match(/a*/g);console.log(newStr);//["a", "", "a", "", "", "", "a", "", "", "", "aa", "", ""]var str = 'a1abb2ab3baab ';var newStr = str.match(/ab*/g);console.log(newStr);//["a", "abb", "ab", "a", "ab"]
ps：為什麼匹配單個字符的時候結果中有空字符串，而匹配多個字符構成的字符串時結果中就沒有空字符串？
n?: 在原字符串中檢索任何包含0個或1個n的子字符串
例如：
var str = 'a1abb2ab3baab';var newStr = str.match(/a?/g);console.log(newStr);//["a", "", "a", "", "", "", "a", "", "", "", "a", "a", "", ""]var str = 'a1abb2ab3baab';var newStr = str.match(/ab?/g);console.log(newStr);//["a", "ab", "ab", "a", "ab"]
2.2.4 作業：
表單的驗證
用戶名：
密碼：
郵箱：
手機號：
2.3 RegExp對象
上面我們提到過正則表達式的基本語法是：/正則表達式主體/修飾符(可選)，這種創建正則的方法我們稱之為【字面量創建正則表達式】。
而實際上在js中已經為正則表達式提供了一個構造函數RegExp，我們可以通過這個構造函數來生成一個正則表達式的實例，而這種創建正則的方法我們稱之為【構造函數創建正則表達式】。
對於通過RegExp構造函數生成的正則實例來說，我們既能夠和之前使用正則表達式一樣將這個正則實例直接使用，還能夠通過這個實例來調用一些RegExp所獨有的方法
語法：
var regExp = new RegExp(正則表達式內容,修飾符);
ps：通過構造函數方式創建正則，參數均採用字符串來聲明
例如：
var regExp = new RegExp('ab','g');//【等價於正則表達式：/ab/g】var str = '12abc12abABC';var newStr = str.replace(regExp,'(frank)');console.log(newStr);//12(frank)c12(frank)ABC
2.3.1RegExp對象的test()方法
本方法是RegExp對象中提供的一個方法，用來判斷在【指定字符串中】是否存在【滿足正則表達式規則】的子字符串。存在就返回true，反之返回false。
語法：
正則表達式.test(指定字符串)
Str.match(正則表達式);
例如：
var regExp = new RegExp('abcd','g');console.log(regExp.test('12abc12abABC'));//falsevar regExp = new RegExp('abc','g');console.log(regExp.test('12abc12abABC'));//true
ps:其實RegExp中提供的方法對於正則表達式都是通用的，也就意味著下面的代碼也是合法的：
2.3.2 RegExp對象的exec()方法
本方法是RegExp對象中提供的一個方法，用來查找在【指定字符串中】【第一個】【滿足正則表達式規則】的子字符串出現的【下標和內容】。
exec() 的工作原理如下：
找到第一個子字符串，並存儲其位置如果再次運行 exec()，則從存儲的位置開始檢索，並找到下一個子字符串，並存儲其位置語法：
正則表達式.exec(指定字符串)
例如：
var regExp = new RegExp('abc','gi');var result = regExp.exec('12abc12abABC');console.log(result);//["abc", index: 2, input: "12abc12abABC"]console.log(result.length);//1result = regExp.exec('12abc12abABC');console.log(result);//["ABC", index: 9, input: "12abc12abABC"]console.log(result.length);//1result = regExp.exec('12abc12abABC');console.log(result);//null
例2：
var patt1=new RegExp("e","gi");do{var re = patt1.exec("The best things in life are free");console.log(re);}while(re!=null);
三、正則表達式高級
3.1 檢索模式的^和$字符
^初位字符：表示判斷字符串以某個內容開始(匹配開頭是什麼內容)
$末位字符：表示判斷字符串以某個內容結束(匹配結尾是什麼內容的)
var regExp = new RegExp('^abc','gi');//表示【判斷是否以abc字符串開始】的正則
var regExp = new RegExp('$abc','gi');//表示【判斷是否以abc字符串結尾】的正則
3.2 重複類
重複類其實是正則表達式中使用{}進行檢索的的一種模式的稱謂，{}用來匹配符合正則要求的字符連續出現的次數。
其常見用法是配合表達式模式進行一起使用。重複類常見寫法有一下三種：
subStr{n}:想要檢索的內容恰好出現n次
subStr{n,}:想要檢索的內容至少出現n次
subStr{n,m}:想要檢索的內容至少出現n次,至多出現m次
語法：
var regExp = new RegExp('正則表達式主體 重複類','修飾符');
var regExp = new RegExp('[a-z]{2}','g');
表示創建了一個【全局中檢索連續出現的兩個小寫字母】的正則
例如：
var regExp = new RegExp('[a-z]{2}','g'); var string = '12abcabc12abccab'; console.log(string.match(regExp));//["ab", "ca", "bc", "ab", "cc", "ab"]
3.3 貪婪模式、懶惰模式
正則表達式--貪婪模式(greed)、懶惰模式(lazy)
其實對於正則來說，貪婪與懶惰兩種模式都是被固化至表達式內的兩種隱形的檢索模式。他們並不歸屬於任何一種我們之前所說的檢索模式，而是在此之外隱形生效的。
貪婪模式(greed)：
只要符合正則要求就一直向下匹配，直到無法再匹配為止的行為模式（例如n*）
懶惰模式：
一旦匹配到複合正則要求的內容就立即結束的行為模式。（例如n？）
在正則中，不同的符號能夠隱式說明當前的正則是採用貪婪模式還是懶惰模式。
常見符號有以下這些：
貪婪模式的標示符：+，*，{n},{n,},{n,m}.
懶惰模式：+?，?，*?，{n}?，{n,}?,{n,m}?;
通過一個簡單的例子我們看一下貪婪模式和懶惰模式在正則中是如何發揮作用的：
//普通正則
var str = 'a1abb2ab3baab';var newStr = str.match(/[a-z]/g);console.log(newStr);//["a", "a", "b", "b", "a", "b", "b", "a", "a", "b"]
//貪婪模式
var str = 'a1abb2ab3baab';var newStr = str.match(/[a-z]* /g);console.log(newStr);//["a", "", "abb", "", "ab", "", "baab", ""]
//懶惰模式
var str = 'a1abb2ab3baab'; var newStr = str.match(/[a-z]?/g); console.log(newStr);//["a", "", "a", "b", "b", "", "a", "b", "", "b", "a", "a", "b", ""]
效果非常明顯，邏輯也非常簡單。
所謂的貪婪模式無非就是令匹配結果儘可能的長，直到不滿足為止。
而懶惰模式則是令匹配結果儘可能的短，匹配到就結束。
3.4 脫字符[^]
脫字符是正則中^符號的一種特殊表達方式，表示【不是...】的意思。若且唯若^符號出現在中括號的首位時，我們稱^符號為脫字符。
如果不寫在中括號中表示初位字符，如果寫在中括號中卻沒寫在首位，則表示普通字符。
例如：
var regExp = new RegExp(『[^abc]』,『gi』); //表示出現不是abc中的任意一個就符合該正則 var string = '12abcabc12abccab'; var result = string.match(regExp); console.log(result);//["1", "2", "1", "2"]
var regExp = new RegExp('[^abc]{2}','gi');
//表示連續兩個出現的字符【不是abc中的任意一個】就符合該正則
var string = '12^abcabc12^abccab'; var result = string.match(regExp); console.log(result);//["12", "12"]
3.5 年齡，手機，郵箱的正則表達式
3.5 作業：多個小女孩的運動
構造函數實例化對象的時候自動調用
Es6的寫法
Es5利用構造函數創建對象
小女孩運動的原型版
小女孩運動的繼承版
3.6 作業：輪播圖
本文由尚學堂前端學院原創，歡迎關注，帶你一起學習Web前端知識！