前面的話

　　正則表達(dá)式在人們的印象中可能是一堆無(wú)法理解的字符，但就是這些符號(hào)卻實(shí)現(xiàn)了字符串的高效操作。通常的情況是，問題本身并不復(fù)雜，但沒有正則表達(dá)式就成了大問題。javascript中的正則表達(dá)式作為相當(dāng)重要的知識(shí)，本文將介紹正則表達(dá)式的基礎(chǔ)語(yǔ)法

定義

　　正則表達(dá)式(Regular Expression)是一門簡(jiǎn)單語(yǔ)言的語(yǔ)法規(guī)范，是強(qiáng)大、便捷、高效的文本處理工具，它應(yīng)用在一些方法中，對(duì)字符串中的信息實(shí)現(xiàn)查找、替換和提取操作

　　javascript中的正則表達(dá)式用RegExp對(duì)象表示，有兩種寫法：一種是字面量寫法；另一種是構(gòu)造函數(shù)寫法

正則表達(dá)式用來(lái)處理字符串特別好用，在JavaScript中能用到正則表達(dá)式的地方有很多，本文對(duì)正則表達(dá)式基礎(chǔ)知識(shí)和Javascript中正則表達(dá)式的使用做一個(gè)總結(jié)。

第一部分簡(jiǎn)單列舉了正則表達(dá)式在JavaScript中的使用場(chǎng)景；第二部分詳細(xì)介紹正則表達(dá)式的基礎(chǔ)知識(shí)，寫出一些例子方便理解。

本文的內(nèi)容是我自己看完正則表達(dá)式寫法，和犀牛書中js正則表達(dá)式的章節(jié)后的總結(jié)，所以內(nèi)容可能會(huì)有疏漏和不嚴(yán)謹(jǐn)?shù)牡胤?。若有大神路過發(fā)現(xiàn)文中錯(cuò)誤的地方，歡迎斧正！

Javascript中正則表達(dá)式的使用

一個(gè)正則表達(dá)式可以認(rèn)為是對(duì)一種字符片段的特征描述，而它的作用就是從一堆字符串中找出滿足條件的子字符串。比如我在JavaScript中定義一個(gè)正則表達(dá)式：

var reg=/hello/  或者 var reg=new RegExp("hello")

那么這個(gè)正則表達(dá)式可以用來(lái)從一堆字符串中找出 hello 這個(gè)單詞。而“找出”這個(gè)動(dòng)作，其結(jié)果可能是找出第一個(gè)hello的位置、用別的字符串替換hello、找出所有hello等等。下面就列舉一下JavaScript中可以使用正則表達(dá)式的函數(shù)，簡(jiǎn)單介紹一下這些函數(shù)的作用，更復(fù)雜的用法會(huì)在第二部分中介紹。

String.prototype.search方法

用來(lái)找出原字符串中某個(gè)子字符串首次出現(xiàn)的index，沒有則返回-1

"abchello".search(/hello/); // 3

String.prototype.replace方法

用來(lái)替換字符串中的子串

"abchello".replace(/hello/,"hi");  // "abchi"

String.prototype.split方法

用來(lái)分割字符串

"abchelloasdasdhelloasd".split(/hello/); //["abc", "asdasd", "asd"]

String.prototype.match方法

用來(lái)捕獲字符串中的子字符串到一個(gè)數(shù)組中。默認(rèn)情況下只捕獲一個(gè)結(jié)果到數(shù)組中，正則表達(dá)式有”全局捕獲“的屬性時(shí)(定義正則表達(dá)式的時(shí)候添加參數(shù)g)，會(huì)捕獲所有結(jié)果到數(shù)組中

"abchelloasdasdhelloasd".match(/hello/); //["hello"]
"abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"]

作為match參數(shù)的正則表達(dá)式在是否擁有全局屬性的情況下，match方法的表現(xiàn)還不一樣，這一點(diǎn)會(huì)在后邊的正則表達(dá)式分組中講到。

RegExp.prototype.test方法

用來(lái)測(cè)試字符串中是否含有子字符串

/hello/.test("abchello"); // true

RegExp.prototype.exec方法

和字符串的match方法類似，這個(gè)方法也是從字符串中捕獲滿足條件的字符串到數(shù)組中，但是也有兩個(gè)區(qū)別。

1. exec方法一次只能捕獲一份子字符串到數(shù)組中，無(wú)論正則表達(dá)式是否有全局屬性

var reg=/hello/g;
reg.exec("abchelloasdasdhelloasd");  // ["hello"] 

2. 正則表達(dá)式對(duì)象(也就是JavaScript中的RegExp對(duì)象)有一個(gè)lastIndex屬性，用來(lái)表示下一次從哪個(gè)位置開始捕獲，每一次執(zhí)行exec方法后，lastIndex就會(huì)往后推，直到找不到匹配的字符返回null，然后又從頭開始捕獲。 這個(gè)屬性可以用來(lái)遍歷捕獲字符串中的子串。

var reg=/hello/g;
reg.lastIndex; //0
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //8
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //19
reg.exec("abchelloasdasdhelloasd"); // null
reg.lastIndex; //0

正則表達(dá)式基礎(chǔ)

元字符

 上面第一節(jié)以/hello/為例，但是實(shí)際應(yīng)用中可能會(huì)遇到這樣的需求： 匹配一串不確定的數(shù)字、匹配開始的位置、匹配結(jié)束的位置、匹配空白符。此時(shí)就可以用到元字符。

元字符：

//匹配數(shù)字: \d
"ad3ad2ad".match(/\d/g); // ["3", "2"]
//匹配除換行符以外的任意字符: .
"a\nb\rc".match(/./g); // ["a", "b", "c"]
//匹配字母或數(shù)字或下劃線 ： \w
"a5_ 漢字@!-=".match(/\w/g); // ["a", "5", "_"]
//匹配空白符:\s
"\n \r".match(/\s/g); //[" ", " ", ""] 第一個(gè)結(jié)果是\n，最后一個(gè)結(jié)果是\r
//匹配【單詞開始或結(jié)束】的位置 ： \b
"how are you".match(/\b\w/g); //["h", "a", "y"] 
// 匹配【字符串開始和結(jié)束】的位置: 開始 ^ 結(jié)束 $
"how are you".match(/^\w/g); // ["h"]

反義元字符，寫法就是把上面的小寫字母變成大寫的，比如 ， 匹配所有不是數(shù)字的字符： \D

另外還有一些用來(lái)表示重復(fù)的元字符，會(huì)在下面的內(nèi)容中介紹。

字符范圍

在 [] 中使用符號(hào) -  ，可以用來(lái)表示字符范圍。如：

// 匹配字母 a-z 之間所有字母
/[a-z]/
// 匹配Unicode中 數(shù)字 0 到 字母 z 之間的所有字符
/[0-z]/ 
// unicode編碼查詢地址：
//https://en.wikibooks.org/wiki/Unicode/Character_reference/0000-0FFF
//根據(jù)上面的內(nèi)容，我們可以找出漢字的Unicode編碼范圍是 \u4E00 到 \u9FA5，所以我們可以寫一個(gè)正則表達(dá)式來(lái)判斷一個(gè)字符串中是否有漢字
/[\u4E00-\u9FA5]/.test("測(cè)試"); // true

重復(fù) & 貪婪與懶惰

首先來(lái)講重復(fù)，當(dāng)我們希望匹配一些重復(fù)的字符時(shí)，就需要用到一些和重復(fù)相關(guān)的正則表達(dá)式，寫法如下

//重復(fù)n次 {n}
"test12".match(/test\d{3}/); // null
"test123".match(/test\d{3}/); // ["test123"]
//重復(fù)n次或更多次 {n,}
"test123".match(/test\d{3,}/); // ["test123"]
//重復(fù)n到m次
"test12".match(/test\d{3,5}/); // null
"test12345".match(/test\d{3,5}/); // ["test12345"]
"test12345678".match(/test\d{3,5}/); // ["test12345"]
// 匹配字符test后邊跟著數(shù)字，數(shù)字重復(fù)0次或多次
"test".match(/test\d*/); // ["test"]
"test123".match(/test\d*/); // ["test123"]
//重復(fù)一次或多次
"test".match(/test\d+/) ; // null
"test1".match(/test\d*/); //["test1"]
//重復(fù)一次或0次
"test".match(/test\d?/) ; // null
"test1".match(/test\d?/); //["test1"]

從上面的結(jié)果可以看到，字符test后邊跟著的數(shù)字可以重復(fù)0次或多次時(shí)，正則表達(dá)式捕獲的子字符串會(huì)返回盡量多的數(shù)字，比如/test\d*/匹配 test123 ，返回的是test123，而不是test或者test12。

正則表達(dá)式捕獲字符串時(shí)，在滿足條件的情況下捕獲盡可能多的字符串，這就是所謂的“貪婪模式”。

對(duì)應(yīng)的”懶惰模式“，就是在滿足條件的情況下捕獲盡可能少的字符串，使用懶惰模式的方法，就是在字符重復(fù)標(biāo)識(shí)后面加上一個(gè) "?"，寫法如下

// 數(shù)字重復(fù)3~5次，滿足條件的情況下返回盡可能少的數(shù)字
"test12345".match(/test\d{3,5}?/); //["test123"]
// 數(shù)字重復(fù)1次或更多，滿足條件的情況下只返回一個(gè)數(shù)字
"test12345".match(/test\d+?/); // ["test1"]

字符轉(zhuǎn)義

在正則表達(dá)式中元字符是有特殊的含義的，當(dāng)我們要匹配元字符本身時(shí)，就需要用到字符轉(zhuǎn)義，比如：

/\./.test("."); // true

分組 & 分支條件

正則表達(dá)式可以用 " ()  " 來(lái)進(jìn)行分組，具有分組的正則表達(dá)式除了正則表達(dá)式整體會(huì)匹配子字符串外，分組中的正則表達(dá)式片段也會(huì)匹配字符串。

分組按照嵌套關(guān)系和前后關(guān)系，每個(gè)分組會(huì)分配得到一個(gè)數(shù)字組號(hào)，在一些場(chǎng)景中可以用組號(hào)來(lái)使用分組。

在 replace、match、exec函數(shù)中，分組都能體現(xiàn)不同的功能。

replace函數(shù)中，第二個(gè)參數(shù)里邊可以用 $+數(shù)字組號(hào)來(lái)指代第幾個(gè)分組的內(nèi)容，如：

" the best language in the world is java ".replace(/(java)/,"$1script"); // " the best language in the world is javascript "
"/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js"    (\/\w+)分組匹配的就是 /index ，

在第二個(gè)參數(shù)中為其添加上版本號(hào)

match函數(shù)中，當(dāng)正則表達(dá)式有全局屬性時(shí)，會(huì)捕獲所有滿足正則表達(dá)式的子字符串

"abchellodefhellog".match(/h(ell)o/g); //["hello", "hello"]

但是當(dāng)正則表達(dá)式?jīng)]有全局屬性，且正則表達(dá)式中有分組的時(shí)候，match函數(shù)只會(huì)返回整個(gè)正則表達(dá)式匹配的第一個(gè)結(jié)果，同時(shí)會(huì)將分組匹配到的字符串也放入結(jié)果數(shù)組中：

"abchellodefhellog".match(/h(ell)o/); //["hello", "ell"]
// 我們可以用match函數(shù)來(lái)分解url，獲取協(xié)議、host、path、查詢字符串等信息
"http://www.baidu.com/test?t=5".match(/^((\w+):\/\/([\w\.]+))\/([^?]+)\?(\S+)$/);
// ["http://www.baidu.com/test?t=5", "http://www.baidu.com", "http", "www.baidu.com", "test", "t=5"]

exec函數(shù)在正則表達(dá)式中有分組的情況下，表現(xiàn)和match函數(shù)很像，只是無(wú)論正則表達(dá)式是否有全局屬性，exec函數(shù)都只返回一個(gè)結(jié)果，并捕獲分組的結(jié)果

/h(ell)o/g.exec("abchellodefhellog"); //["hello", "ell"]

當(dāng)正則表達(dá)式需要匹配幾種類型的結(jié)果時(shí)，可以用到分支條件，例如

"asdasd hi asdad hello asdasd".replace(/hi|hello/,"nihao"); //"asdasd nihao asdad hello asdasd"
"asdasd hi asdad hello asdasd".split(/hi|hello/); //["asdasd ", " asdad ", " asdasd"]

 注意，分支條件影響它兩邊的所有內(nèi)容， 比如 hi|hello  匹配的是hi或者h(yuǎn)ello，而不是 hiello 或者 hhello

分組中的分支條件不會(huì)影響分組外的內(nèi)容

"abc acd bbc bcd ".match(/(a|b)bc/g); //["abc", "bbc"]

后向引用

正則表達(dá)式的分組可以在其后邊的語(yǔ)句中通過  \+數(shù)字組號(hào)來(lái)引用

比如

// 匹配重復(fù)的單詞
/(\b[a-zA-Z]+\b)\s+\1/.exec(" asd sf hello hello asd"); //["hello hello", "hello"]

斷言

 (?:exp) , 用此方式定義的分組，正則表達(dá)式會(huì)匹配分組中的內(nèi)容，但是不再給此分組分配組號(hào)，此分組在replace、match等函數(shù)中的作用也會(huì)消失，效果如下：

/(hello)\sworld/.exec("asdadasd hello world asdasd") // ["hello world", "hello"],正常捕獲結(jié)果字符串和分組字符串
/(?:hello)\sworld/.exec("asdadasd hello world asdasd") // ["hello world"]
"/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js"
"/static/app1/js/index.js".replace(/(?:\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js$1-v0.0.1.js"

(?=exp) 這個(gè)分組用在正則表達(dá)式的后面，用來(lái)捕獲exp前面的字符，分組中的內(nèi)容不會(huì)被捕獲，也不分配組號(hào)

/hello\s(?=world)/.exec("asdadasd hello world asdasd") // ["hello "] 

(?!exp)  和前面的斷言相反，用在正則表達(dá)式的后面，捕獲后面不是exp的字符，同樣不捕獲分組的內(nèi)容，也不分配組號(hào)

/hello\s(?!world)/.exec("asdadasd hello world asdasd") //null 

處理選項(xiàng)

javascript中正則表達(dá)式支持的正則表達(dá)式有三個(gè)，g、i、m，分別代表全局匹配、忽略大小寫、多行模式。三種屬性可以自由組合共存。

// 全局匹配 g 
"abchelloasdasdhelloasd".match(/hello/); //["hello"]
"abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"]
//忽略大小寫 i
"abchelloasdasdHelloasd".match(/hello/g); //["hello"]
"abchelloasdasdHelloasd".match(/hello/gi); //["hello","Hello"]

在默認(rèn)的模式下，元字符 ^ 和 $ 分別匹配字符串的開頭和結(jié)尾處，模式 m 改變了這倆元字符的定義，讓他們匹配一行的開頭和結(jié)尾

"aadasd\nbasdc".match(/^[a-z]+$/g); //null 字符串^和$之間有換行符，匹配不上 [a-z]+ ,故返回null
"aadasd\nbasdc".match(/^[a-z]+$/gm); // ["aadasd", "basdc"] ，改變^$的含義，讓其匹配一行的開頭和末尾，可以得到兩行的結(jié)果

總結(jié)

以上所述是小編給大家介紹的Javascript中正則表達(dá)式的使用及基本語(yǔ)法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論