摘要：基本語法構(gòu)造函數(shù)可創(chuàng)建一個(gè)正則表達(dá)式對(duì)象，用特定的模式匹配文本。要表示字符串，字面量形式不使用引號(hào)，而傳遞給構(gòu)造函數(shù)的參數(shù)使用引號(hào)。當(dāng)使用構(gòu)造函數(shù)創(chuàng)造正則對(duì)象時(shí)，需要常規(guī)的字符轉(zhuǎn)義規(guī)則在前面加反斜杠。結(jié)果替換與正則表達(dá)式匹配的子串。

文章來源：小青年原創(chuàng)
發(fā)布時(shí)間：2016-06-26
關(guān)鍵詞：JavaScript，正則表達(dá)式，js模板引擎
轉(zhuǎn)載需標(biāo)注本文原始地址: http://zhaomenghuan.github.io...

前言

這年頭MVC、MVVM框架泛濫，很多時(shí)候我們只是用了這些框架，有時(shí)候想深入去了解這些框架背后的原理實(shí)現(xiàn)時(shí)，閱讀源碼時(shí)發(fā)現(xiàn)無從下手，js基本功簡直渣渣，所以想利用業(yè)余時(shí)間還是要補(bǔ)補(bǔ)基礎(chǔ)。以前看JavaScript的一些書籍時(shí)總是把正則表達(dá)式這一章跳過了，遇到一些需要寫正則的時(shí)候然后都是各種copy，js要進(jìn)階感覺還是要系統(tǒng)學(xué)習(xí)一下正則，雖然看起來像亂碼一樣的匹配規(guī)則，但是如果熟練使用會(huì)很有用，那么今天就先從正則開始吧！和大部分書籍一樣，本文前篇也會(huì)是講解基礎(chǔ)，本文的很多內(nèi)容都是摘自網(wǎng)絡(luò)進(jìn)行整理，有些內(nèi)容需要各位自己進(jìn)行實(shí)踐驗(yàn)證。

正則表達(dá)式

正則表達(dá)式（英語：Regular Expression，在代碼中常簡寫為regex、regexp或RE）使用單個(gè)字符串來描述、匹配一系列符合某個(gè)句法規(guī)則的字符串搜索模式。搜索模式可用于文本搜索和文本替換。

基本語法

RegExp 構(gòu)造函數(shù)可創(chuàng)建一個(gè)正則表達(dá)式對(duì)象，用特定的模式匹配文本。創(chuàng)建一個(gè)正則對(duì)象的兩種方法：字面量和構(gòu)造函數(shù)。要表示字符串，字面量形式不使用引號(hào)，而傳遞給構(gòu)造函數(shù)的參數(shù)使用引號(hào)。

字面量: /pattern/flags
構(gòu)造函數(shù): RegExp(pattern [, flags])

pattern 正則表達(dá)式文本

flags 該參數(shù)可以是下面單個(gè)值或者幾個(gè)值的任意組合：

g 全局匹配

i 忽略大小寫

gi或ig 全局匹配、忽略大小寫

m 多行查找，讓開始和結(jié)束字符（^ 和 $）工作在多行模式（也就是，^ 和 $ 可以匹配字符串中每一行的開始和結(jié)束（行是由 n 或 r 分割的），而不只是整個(gè)輸入字符串的最開始和最末尾處。

u Unicode。將模式視為Unicode碼位（code points）序列。

y sticky。使用隱式的^錨點(diǎn)把正則錨定在了lastIndex所指定的偏移位置處，具體可以看看這篇文章：JavaScript:正則表達(dá)式的/y標(biāo)識(shí) 。

具體例子：

/ab+c/i;
new RegExp("ab+c", "i");
new RegExp(/ab+c/, "i");

當(dāng)表達(dá)式被賦值時(shí)，字面量形式提供正則表達(dá)式的編譯（compilation）狀態(tài)，當(dāng)正則表達(dá)式保持為常量時(shí)使用字面量。例如當(dāng)你在循環(huán)中使用字面量構(gòu)造一個(gè)正則表達(dá)式時(shí)，正則表達(dá)式不會(huì)在每一次迭代中都被重新編譯（recompiled）。

而正則表達(dá)式對(duì)象的構(gòu)造函數(shù)，如 new RegExp("ab+c") 提供了正則表達(dá)式運(yùn)行時(shí)編譯（runtime compilation）。如果你知道正則表達(dá)式模式將會(huì)改變，或者你事先不知道什么模式，而是從另一個(gè)來源獲取，如用戶輸入，這些情況都可以使用構(gòu)造函數(shù)。

從ECMAScript 6開始，當(dāng)?shù)谝粋€(gè)參數(shù)為正則表達(dá)式而第二個(gè)標(biāo)志參數(shù)存在時(shí)，new RegExp(/ab+c/, "i")不再拋出TypeError （“當(dāng)從其他正則表達(dá)式進(jìn)行構(gòu)造時(shí)不支持標(biāo)志”）的異常，取而代之，將使用這些參數(shù)創(chuàng)建一個(gè)新的正則表達(dá)式。

當(dāng)使用構(gòu)造函數(shù)創(chuàng)造正則對(duì)象時(shí)，需要常規(guī)的字符轉(zhuǎn)義規(guī)則（在前面加反斜杠 ）。比如，以下是等價(jià)的：

var re = new RegExp("w+");
var re = /w+/;

正則表達(dá)式中的特殊字符

字符類別（Character Classes）

字符集合（Character Sets）

邊界（Boundaries）

分組（grouping）與反向引用（back references）

數(shù)量詞（Quantifiers）

^和$ —— 作用是分別指出一個(gè)字符串的開始和結(jié)束。

"^The"：表示所有以"The"開始的字符串"There"，"The cat"等；

"of despair$"：表示所以以"of despair"結(jié)尾的字符串；

"^abc$"：表示開始和結(jié)尾都是"abc"的字符串——呵呵，只有"abc"自己了；

"notice"：表示任何包含"notice"的字符串。

最后那個(gè)例子，如果你不使用兩個(gè)特殊字符，你就在表示要查找的串在被查找串的任意部分——你并不把它定位在某一個(gè)頂端。

*，+ ， ? 和 {} —— 表示一個(gè)或一序列字符重復(fù)出現(xiàn)的次數(shù)。

分別表示“沒有或更多”，“一次或更多”，“沒有或一次”和指定重復(fù)次數(shù)的范圍。{}必須指定范圍的下限，如："{0,2}"而不是"{,2}"。*、+和?相當(dāng)于{0,}、{1,}和{0,1}。

"ab*"：表示一個(gè)字符串有一個(gè)a后面跟著零個(gè)或若干個(gè)b。（"a", "ab", "abbb",……）；

"ab+"：表示一個(gè)字符串有一個(gè)a后面跟著至少一個(gè)b或者更多；

"ab?"：表示一個(gè)字符串有一個(gè)a后面跟著零個(gè)或者一個(gè)b；

"a?b+$"：表示在字符串的末尾有零個(gè)或一個(gè)a跟著一個(gè)或幾個(gè)b。

"ab{2}"：表示一個(gè)字符串有一個(gè)a跟著2個(gè)b（"abb"）；

"ab{2,}"：表示一個(gè)字符串有一個(gè)a跟著至少2個(gè)b；

"ab{3,5}"：表示一個(gè)字符串有一個(gè)a跟著3到5個(gè)b。

| —— 表示“或”操作

"hi|hello"：表示一個(gè)字符串里有"hi"或者"hello"；

"(b|cd)ef"：表示"bef"或"cdef"；

"(a|b)*c"：表示一串"a""b"混合的字符串后面跟一個(gè)"c"；

. —— 可以替代任何字符

"a.[0-9]"：表示一個(gè)字符串有一個(gè)"a"后面跟著一個(gè)任意字符和一個(gè)數(shù)字；

"^.{3}$"：表示有任意三個(gè)字符的字符串（長度為3個(gè)字符）；

[] —— 表示某些字符允許在一個(gè)字符串中的某一特定位置出現(xiàn)

"[ab]"：表示一個(gè)字符串有一個(gè)"a"或"b"（相當(dāng)于"a|b"）；

"[a-d]"：表示一個(gè)字符串包含小寫的"a"到"d"中的一個(gè)（相當(dāng)于"a|b|c|d"或者"[abcd]"）；

"^[a-zA-Z]"：表示一個(gè)以字母開頭的字符串；

"[0-9]%"：表示一個(gè)百分號(hào)前有一位的數(shù)字；

",[a-zA-Z0-9]$"：表示一個(gè)字符串以一個(gè)逗號(hào)后面跟著一個(gè)字母或數(shù)字結(jié)束。

可以在方括號(hào)里用"^"表示不希望出現(xiàn)的字符，"^"應(yīng)在方括號(hào)里的第一位。（如：%[^a-zA-Z]%表示兩個(gè)百分號(hào)中不應(yīng)該出現(xiàn)字母）。為了逐字表達(dá)，你必須在^.$()|*+?{這些字符前加上轉(zhuǎn)移字符""。在方括號(hào)中，不需要轉(zhuǎn)義字符。

RegExp對(duì)象的屬性

屬性	含義
$1-$9	如果它(們)存在，是匹配到的子串
$_	參見input
$*	參見multiline
$&	參見lastMatch
$+	參見lastParen
$`	參見leftContext
$""	參見rightContext
constructor	創(chuàng)建一個(gè)對(duì)象的一個(gè)特殊的函數(shù)原型
global	是否在整個(gè)串中匹配(bool型)
ignoreCase	匹配時(shí)是否忽略大小寫(bool型)
input	被匹配的串
lastIndex	最后一次匹配的索引
lastParen	最后一個(gè)括號(hào)括起來的子串
leftContext	最近一次匹配以左的子串
multiline	是否進(jìn)行多行匹配(bool型)
prototype	允許附加屬性給對(duì)象
rightContext	最近一次匹配以右的子串
source	正則表達(dá)式模式
lastIndex	最后一次匹配的索引

詳情大家可以查看這里：MDN JavaScript 標(biāo)準(zhǔn)庫 RegExp屬性

RegExp對(duì)象的方法

方法	含義
compile	正則表達(dá)式比較
exec	執(zhí)行查找
test	進(jìn)行匹配
toSource	返回特定對(duì)象的定義(literal representing)，其值可用來創(chuàng)建一個(gè)新的對(duì)象。重載Object.toSource方法得到的。
toString	返回特定對(duì)象的串。重載Object.toString方法得到的。
valueOf	返回特定對(duì)象的原始值。重載Object.valueOf方法得到

詳情大家可以查看這里：MDN JavaScript 標(biāo)準(zhǔn)庫 RegExp方法

不過在這里我們還是需要說明一下的是我們用得比較多的方法主要分為兩類：

RegExp 對(duì)象方法

RegExp.prototype.compile() ——編譯正則表達(dá)式

用法：regexObj.compile(pattern, flags)

功能說明：compile() 方法用于在腳本執(zhí)行過程中編譯正則表達(dá)式，也可用于改變和重新編譯正則表達(dá)式。該方法可以編譯指定的正則表達(dá)式，編譯之后的正則表達(dá)式執(zhí)行速度將會(huì)提高，如果正則表達(dá)式多次被調(diào)用，那么調(diào)用compile方法可以有效的提高代碼的執(zhí)行速度，如果該正則表達(dá)式只能被使用一次，則不會(huì)有明顯的效果。

var str="Every man in the world! Every woman on earth!";
var patt=/man/g;
var str2=str.replace(patt,"person");
document.write(str2+"
");
patt=/(wo)?man/g;
patt.compile(patt); 
str2=str.replace(patt,"person");
document.write(str2);
結(jié)果：
Every person in the world! Every woperson on earth!
Every person in the world! Every person on earth!

RegExp.prototype.exec() —— 檢索字符串中指定的值。返回找到的值，并確定其位置。

用法：regexObj.exec(str)

功能說明：exec() 方法如果成功匹配，exec 方法返回一個(gè)數(shù)組，并且更新正則表達(dá)式對(duì)象的屬性。返回的數(shù)組包括匹配的字符串作為第一個(gè)元素，緊接著一個(gè)元素對(duì)應(yīng)一個(gè)成功匹配被捕獲的字符串的捕獲括號(hào)（capturing parenthesis）。（one item for each capturing parenthesis that matched containing the text that was captured.）如果匹配失敗，exec 方法將返回 null。

var str="Hello world,hello zhaomenghuan!";
// look for "Hello"或"hello"
var patt=/hello/gi;
while((result = patt.exec(str))!== null){
    document.write("result:" + result +"的位置為"+ result.index + "
"); 
}
結(jié)果：
result:Hello的位置為0
result:hello的位置為12

RegExp.prototype.test()    —— 檢索字符串中指定的值。返回 true 或 false。

用法：regexObj.test(str)

功能說明：test() 方法用于檢測一個(gè)字符串是否匹配某個(gè)模式，如果字符串中有匹配的值返回 true ，否則返回 false。

var result = /hello/.test("This is a hello world!");
document.write(result);
結(jié)果：
true

支持正則表達(dá)式的 String 對(duì)象的方法

search —— 檢索與正則表達(dá)式相匹配的值

用法：string.search(searchvalue)

searchvalue 必須。查找的字符串或者正則表達(dá)式。

功能說明：search()方法用于檢索字符串中指定的子字符串，或檢索與正則表達(dá)式相匹配的子字符串。如果沒有找到任何匹配的子串，則返回 -1。

var str="Mr. Blue has a blue house";
document.write(str.search(/blue/i));
結(jié)果：
4

match —— 找到一個(gè)或多個(gè)正則表達(dá)式的匹配。

用法：string.match(regexp)

regexp 必需。規(guī)定要匹配的模式的 RegExp 對(duì)象。如果該參數(shù)不是 RegExp 對(duì)象，則需要首先把它傳遞給 RegExp 構(gòu)造函數(shù)，將其轉(zhuǎn)換為 RegExp 對(duì)象。返回值類型為Array。

功能說明：match() 方法可在字符串內(nèi)檢索指定的值，或找到一個(gè)或多個(gè)正則表達(dá)式的匹配。match() 方法將檢索字符串 String Object，以找到一個(gè)或多個(gè)與 regexp 匹配的文本。這個(gè)方法的行為在很大程度上有賴于 regexp 是否具有標(biāo)志 g。如果 regexp 沒有標(biāo)志 g，那么 match() 方法就只能在 stringObject 中執(zhí)行一次匹配。如果沒有找到任何匹配的文本， match() 將返回 null。否則，它將返回一個(gè)數(shù)組，其中存放了與它找到的匹配文本有關(guān)的信息。

var str = "The rain in SPAIN stays mainly in the plain"; 
var match=str.match(/ain/gi);
document.getElementById("demo").innerHTML=match;
結(jié)果:
ain,AIN,ain,ain

replace    替換與正則表達(dá)式匹配的子串。

用法：string.replace(searchvalue,newvalue)

searchvalue 必須。規(guī)定子字符串或要替換的模式的 RegExp 對(duì)象。
請注意，如果該值是一個(gè)字符串，則將它作為要檢索的直接量文本模式，而不是首先被轉(zhuǎn)換為 RegExp 對(duì)象。
newvalue 必需。一個(gè)字符串值。規(guī)定了替換文本或生成替換文本的函數(shù)。
返回值為String類型，一個(gè)新的字符串，是用 replacement 替換了 regexp 的第一次匹配或所有匹配之后得到的。

split    把字符串分割為字符串?dāng)?shù)組。

用法：string.split(separator,limit)

separator 可選。字符串或正則表達(dá)式，從該參數(shù)指定的地方分割 string Object。
limit 可選。該參數(shù)可指定返回的數(shù)組的最大長度。如果設(shè)置了該參數(shù)，返回的子串不會(huì)多于這個(gè)參數(shù)指定的數(shù)組。如果沒有設(shè)置該參數(shù)，整個(gè)字符串都會(huì)被分割，不考慮它的長度。
返回值為Array類型，一個(gè)字符串?dāng)?shù)組。該數(shù)組是通過在 separator 指定的邊界處將字符串 string Object 分割成子串創(chuàng)建的。返回的數(shù)組中的字串不包括 separator 自身。

var str="How are you doing today?";
var match = str.split(/ /);
document.write(match);
結(jié)果：
How,are,you,doing,today?

正則表達(dá)式的應(yīng)用實(shí)例說明

校驗(yàn)是否全由數(shù)字組成 —— /^[0-9]{1,20}$/

^ 表示打頭的字符要匹配緊跟^后面的規(guī)則
$ 表示打頭的字符要匹配緊靠$前面的規(guī)則
[ ] 中的內(nèi)容是可選字符集
[0-9] 表示要求字符范圍在0-9之間
{1,20}表示數(shù)字字符串長度合法為1到20，即為[0-9]中的字符出現(xiàn)次數(shù)的范圍是1到20次。

/^ 和 $/成對(duì)使用應(yīng)該是表示要求整個(gè)字符串完全匹配定義的規(guī)則，而不是只匹配字符串中的一個(gè)子串。

校驗(yàn)登錄名：只能輸入5-20個(gè)以字母開頭、可帶數(shù)字、“_”、“.”的字串—— /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/

^[a-zA-Z]{1} 表示第一個(gè)字符要求是字母。
([a-zA-Z0-9]|[._]){4,19} 表示從第二位開始（因?yàn)樗o跟在上個(gè)表達(dá)式后面）的一個(gè)長度為4到9位的字符串，它要求是由大小寫字母、數(shù)字或者特殊字符集[._]組成。

校驗(yàn)密碼：只能輸入6-20個(gè)字母、數(shù)字、下劃線——/^(w){6,20}$/

w：用于匹配字母，數(shù)字或下劃線字符

校驗(yàn)普通電話、傳真號(hào)碼：可以“+”或數(shù)字開頭，可含有“-” 和 “ ”——/^[+]{0,1}(d){1,3}[ ]?([-]?((d)|[ ]){1,12})+$/

d：用于匹配從0到9的數(shù)字；
“?”元字符規(guī)定其前導(dǎo)對(duì)象必須在目標(biāo)對(duì)象中連續(xù)出現(xiàn)零次或一次
可以匹配的字符串如：+123 -999 999 ； +123-999 999 ；123 999 999 ；+123 999999等

校驗(yàn)URL——/^http[s]{0,1}://.+$/ 或 /^http[s]{0,1}://.{1,n}$/ (表示url串的長度為length(“https://”) + n )

/ ：表示字符“/”。
. 表示所有字符的集
+ 等同于{1,}，就是1到正無窮吧。

校驗(yàn)純中文字符——/^[u4E00-u9FA5]+$/

[u4E00-u9FA5] ：中文字符集的范圍

以上表達(dá)式均在下面的javascript中測試通過:

    
    


    

        規(guī)則表達(dá)式 ： (填寫/ /之間的表達(dá)式)

        

        校驗(yàn)字符串 ：

        
        
    
    

js模板引擎實(shí)現(xiàn)原理

前面我們花了很長的篇幅講解正則表達(dá)式是為了大家看這部分是時(shí)候能夠有所理解，如果前面的內(nèi)容一下子沒有看懂也沒有關(guān)系，大家可以先看看這部分的內(nèi)容回過頭去查看剛剛的內(nèi)容。

我們首先會(huì)想到寫一個(gè)模板，我們常見的是寫成這樣:

當(dāng)然也可以使用標(biāo)簽，而且這個(gè)也是現(xiàn)在的流行趨勢，擁抱模塊化，不過本文不是講這個(gè)標(biāo)簽和模塊化，如果大家感興趣可以看看這兩篇文章：

HTML5