JavaScript 正則一篇入門,不入魂

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??程序員寶庫

關(guān)注即可獲得新技能!

?

這里不會(huì)對(duì)正則的背景進(jìn)行介紹，將直接對(duì)正則的使用進(jìn)行講解。

注意：有一些文章和書本可能為了讓正則表達(dá)式看起來不那么密密麻麻，而在正則表達(dá)式里加了空格隔開，例如?/(\w+)\s(\w+)/,這個(gè)表達(dá)式可以匹配Hello RegExp，但有的文章和書本里寫成?/(\w+) \s (\w+)/，這樣的話就不是匹配Hello RegExp，而是匹配Hello RegExp中間再加兩個(gè)空格。

Javascript正則表達(dá)式的定義

1.構(gòu)造函數(shù)定義

構(gòu)造函數(shù)定義接受兩個(gè)參數(shù)，一個(gè)是要匹配的字符串模式(注意此參數(shù)是字符串，不能是正則表達(dá)式字面量)，另一個(gè)是可選的標(biāo)志字符串，即g,i,m

1. var reg =newRegExp("java[script]",'gim'); ? ?

g,i,m為可選屬性。

• g–全文查找，即模式被應(yīng)用于所有字符串，而并非在發(fā)現(xiàn)第一個(gè)匹配項(xiàng)時(shí)立即停止

• i–忽略大小寫

• m–多行查找，即在到達(dá)一行文本末尾時(shí)還會(huì)繼續(xù)查找下一行中是否存在模式匹配的項(xiàng)

2.字面量定義

1. var reg =/(\w+)\s(\w+)/;

3.構(gòu)造函數(shù)定義與字面量定義比較

由于構(gòu)造函數(shù)定義的參數(shù)是字符串，所以在某些情況下要對(duì)字符串進(jìn)行雙重轉(zhuǎn)義。另外所有的元字符都必須進(jìn)行雙重轉(zhuǎn)義，那些已經(jīng)轉(zhuǎn)義過的字符串也是如此，以下左邊為字面量模式，右邊為等價(jià)的構(gòu)造函數(shù)定義時(shí)使用的字符串參數(shù)。

在ECMAScript3中，正則表達(dá)式字面量會(huì)始終共享同一個(gè)RegExp實(shí)例，而使用構(gòu)造函數(shù)創(chuàng)建的每一個(gè)新RegExp都是一個(gè)新的實(shí)例。

1. var reg =null,i;

2. for(i =0; i <10; i++){

3. ? ?reg =/java/g;

4. ? ?reg.test("javascript");

5. }

6. for(i =0; i <10; i++){

7. ? ?reg =newRegExp("java","g");

8. ? ?reg.test("javascript");

9. }

第一個(gè)循環(huán)中第一次調(diào)用test()找到了”java”,但第二次調(diào)用從索引為3(上一次匹配的末尾)的字符開始,所以第二次就匹配不到，由于匹配會(huì)一直找到字符串末尾，所以下一次再調(diào)用test()又會(huì)重頭開始。

第二個(gè)循環(huán)使用構(gòu)造函數(shù)在每次循環(huán)中創(chuàng)建正則表達(dá)式，因?yàn)槊看蔚紩?huì)創(chuàng)建一個(gè)新的RegExp實(shí)例，所以每次調(diào)用test()都會(huì)返回true。

注意，在ECMAScript5中，正則表達(dá)式字面量和構(gòu)造函數(shù)一樣，每次都會(huì)創(chuàng)建新的RegExp實(shí)例。所以ECMAScript5往后上面兩個(gè)循環(huán)結(jié)果都一樣。

正則表達(dá)式的屬性和方法

1.正則屬性

1. var text ="this has been a short summer";

2. var pattern =/(.)hort/g;

3. if(pattern.test(text)){

4. alert(RegExp.input); ? ? ? ? ? ? ? //this has been a short summer

5. alert(RegExp.leftContext); ? ? ? ? //this has been a ? ? ? ? ? ?

6. alert(RegExp.rightContext); ? ? ? ?// summer

7. alert(RegExp.lastMatch); ? ? ? ? ? //short

8. alert(RegExp.lastParen); ? ? ? ? ? //s

9. alert(RegExp.multiline); ? ? ? ? ? //false

10. }

注意：某些屬性在某些瀏覽器可能未實(shí)現(xiàn)。

除了上面的幾個(gè)屬性外，還有9個(gè)用于存儲(chǔ)捕獲組的屬性。訪問語法是RegExp.$1,RegExp.$2…RegExp.$9，在調(diào)用test()和exec()方法時(shí)，這些屬性會(huì)被自動(dòng)填充。

1. var text ="this has been a short summer";

2. var pattern =/(..)or(.)/g;

3. if(pattern.test(text)){

4. alert(RegExp["$1"]); ? ? ? //sh

5. alert(RegExp["$2"]); ? ? ? //t

6. alert(RegExp["

   entry-content" data-v-3f216172="" data-v-41d33d72="""]); ? ? ? //this has been a

7. alert(RegExp["/div>"]); ? ? ? // summer

8. }

2.正則方法

(1)exec(str)

exec()方法接受一個(gè)參數(shù)，即要應(yīng)用模式的字符串，返回包含第一個(gè)匹配項(xiàng)信息的數(shù)組，沒有匹配項(xiàng)的情況下返回null。返回的是Array實(shí)例，另外還包含兩個(gè)額外的屬性，index和input，index表示匹配項(xiàng)在字符串中的位置，input表示應(yīng)用正則表達(dá)式的字符串。

1. var text ="mom and dad and baby";

2. var reg =/mom( and dad( and baby)?)?/gi;

3. var matches = reg.exec(text);

4. alert(matches.index); ? ?//0

5. alert(matches.input); ? ?//"mom and dad and baby"

6. alert(matches[0]); ? ? ? //"mom and dad and baby"

7. alert(matches[1]); ? ? ? //" and dad and baby"

8. alert(matches[2]); ? ? ? //" and baby"

對(duì)于exec()方法而言，在模式中設(shè)置了g，它每次也只返回一個(gè)匹配項(xiàng)，但每次調(diào)用exec()都會(huì)在字符串中繼續(xù)查找新的匹配項(xiàng)，如不設(shè)置g，每次調(diào)用exec()都只返回第一個(gè)匹配的信息。

1. var text ="cat, bat, sat, fat"; ? ? ? ?

2. var pattern1 =/.at/;

3. var matches = pattern1.exec(text); ? ? ? ?

4. alert(matches.index); ? ? //0

5. alert(matches[0]); ? ? ? ?//"cat"

6. alert(pattern1.lastIndex);//0

7. matches = pattern1.exec(text); ? ? ? ?

8. alert(matches.index); ? ? //0

9. alert(matches[0]); ? ? ? ?//"cat"

10. alert(pattern1.lastIndex);//0

11. var pattern2 =/.at/g;

12. var matches = pattern2.exec(text); ? ? ? ?

13. alert(matches.index); ? ? //0

14. alert(matches[0]); ? ? ? ?//"cat"

15. alert(pattern2.lastIndex);//3

16. matches = pattern2.exec(text); ? ? ? ?

17. alert(matches.index); ? ? //5

18. alert(matches[0]); ? ? ? ?//"bat"

19. alert(pattern2.lastIndex);//8

(2)test(str)

test()方法接受一個(gè)字符串參數(shù)。在模式與該參數(shù)匹配的情況下返回true，否則返回false。

(3)replace(RegExp/str,str_replace)

replace()方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)為字符串或RegExp對(duì)象，第二個(gè)參數(shù)為字符串或一個(gè)回調(diào)函數(shù)。

若為字符串，第二個(gè)參數(shù)將替換第一個(gè)參數(shù)匹配到的值，然后將替換后的原文本作為返回值返回，其中第二個(gè)參數(shù)中可包含RegExp的特殊字符序列，例如$1~$9,表示從原文本中捕獲到的對(duì)象，使用$1~$9屬性時(shí)，第一個(gè)參數(shù)必須是RegExp對(duì)象,且需用()來捕獲。

下面是一些ECMAScript提供的特殊字符串序列：

注意調(diào)用函數(shù)str.replace(),并不改變str的值,而是返回一個(gè)副本。

1. var text ="first_second";

2. var text_replaced = text.replace(/first/,"1");

3. alert(text); ? ?//first_second

4. alert(text_replaced); ? ?//1_second

5. text_replaced = text.replace(/(first)/,"1$1");

6. alert(text_replaced); ? ? //1first_second

7. text_replaced = text.replace(/(first)/,"1

   entry-content" data-v-3f216172="" data-v-41d33d72=""");

8. alert(text_replaced); ? ? //1_second

若第二個(gè)參數(shù)是一個(gè)函數(shù),那么這個(gè)函數(shù)的有三個(gè)參數(shù)，分別代表匹配到的字符串，匹配的字符串在位置，和原字符串，后兩個(gè)參數(shù)是可選。常見用法如下：

1. function htmlEscape(text){

2. ? ? ? ? ? ?return text.replace(/[<>"&]/g,function(match, pos, originalText){

3. ? ? ? ? ? ? ? ?switch(match){

4. ? ? ? ? ? ? ? ? ? ?case"<":

5. ? ? ? ? ? ? ? ? ? ? ? ?return"<";

6. ? ? ? ? ? ? ? ? ? ?case">":

7. ? ? ? ? ? ? ? ? ? ? ? ?return">";

8. ? ? ? ? ? ? ? ? ? ?case"&":

9. ? ? ? ? ? ? ? ? ? ? ? ?return"&";

10. ? ? ? ? ? ? ? ? ? ?case"\"":

11. ? ? ? ? ? ? ? ? ? ? ? ?return""";

12. ? ? ? ? ? ? ? ?} ? ? ? ? ? ?

13. ? ? ? ? ? ?});

14. ? ? ? ?}

15. alert(htmlEscape("

    Hello world!

    "));

16. //

    Hello world!

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??程序員寶庫

關(guān)注即可獲得新技能!

?