JS中的正則表達式及pattern的注意事項

2020-03-16 21:03:34

字體：大中小

來源：轉載

供稿：網友

本文給大家介紹js中的正則表達式的注意事項以及pattern的注意事項，需要的小伙伴可以參考下本篇文章

RegExp對象的創建：

　　常規的正則表達式的創建可用直接量，即斜杠 “/” 括起來的字符。但在要求參數變化的環境下，RegExp()構造函數是更好的選擇：

var reg1 = /'/w+'/g;

var reg2 = new RegExp('/'//w+/'','g');

　　對比兩種創建方式，RegExp中的第一個參數為要創建的正則字符串，一方面注意，因為不是直接量的表示形式，因此不用斜杠“ / ”括起來了；而是字符串中必須要對引號“ ‘ ”和轉義符號“ / ”進行二次轉義。

　　此外，無論是直接量還是RegExp()構造函數，都是生成了新的RegExp對象，并將其賦值給變量。

在《Javascript權威指南》一書中講到，對于正則表達式的直接量，ECMAscript 3規定在每次它時都會返回同一個RegExp對象，因此用直接量創建的正則表達式的會共享一個實例。直到ECMAScript 5才規定每次返回不同的實例。

各瀏覽器中，IE一直遵守ECMAScript 5中的規定，其他瀏覽器的較老版本則遵循ECMAScript 3的規定。因此在實際應用中，采取構造函數創建的方法比較安全，或者在使用lastIndex屬性時要記得歸0。

括號()的使用：

　　1、分組

　　即把單獨項組合成子表達式統一處理，一般用于？、+、*、{n,m}等的重復處理。見例子：

var reg = /Java(script)?/;

式子里將script進行統一處理。

　　2、向后引用

　　即在正則表達式中用“/n”（n代表引用的序號）引用式中前面括號中匹配的文本。見例子：

var reg = /(/d+)[a-z]{3}/1/;

//20man20

//20man23 錯

//reg = //1[a-z]{3}(/d+)/; 錯

　　注意 “/n”引用的是前面匹配的文本" 20 "，而不是匹配的正則表達式" /d+ "。另外，JS里只能引用前面的匹配文本，像例子中的將 /1寫在括號引用的前面，將不會匹配到任何文本，瀏覽器中會提示出錯。同樣，JS里也不支持類似“ (?<name>exp) ”（exp為正則字符）的引用命名規則，只支持數字的引用。

　　既然提到了分組和引用，如果只想進行分組，而不想引用，則可用 "(?: exp)"的形式，既不匹配文本，也不給引用編號。見例子：

var reg = /(/w{3})(?:/d+)([a-z]{2})/2/;

//man7788abab

顯然 /2 匹配的是 "ab" 而不是 "7788" 。這樣便于分組處理，也加快了查詢的效率。

　　3、子模式匹配

　　有時我們想直接引用操作括號匹配的本文，那么可以用子模式匹配的功能（權威指南里叫子模式匹配，有點別扭，實際就是用一個變量形式替換匹配的文本）?；拘问绞怯?'$n'的形式替代匹配編號為n的文本，常用在String對象里的replace()方法，見例子，等號兩邊交換單詞：

var reg = /(/w+)=(/w+)/;

var str = ‘love=hate';

str.replace(reg,'$2=$1');

//"hate=love"

次序、貪婪、懶惰：

　　一般的重復匹配字符如？、+、*、{n,m}在匹配的過程中，采用貪婪匹配的方法，即盡可能多的匹配到結果字符。與之對應的是懶惰匹配，即盡可能少的匹配結果，使用形式只需在重復匹配字符后加上問號" ？ "即可，如？？、+？、*？、{n,m}？。見例子：

var str = 'goooogle‘;

var reg1 = /o+/; //"goooo"

var reg2 = /o+?/; //"go"

　　現在對例子稍加改動：

var str = 'goooogle‘;

var reg1 = /o+gle/; //"oooogle"

var reg2 = /o+?gle/; //"oooogle"

　　改過后的例子結果變為相同了，為什么 /o+?gle/ 沒有匹配到“ogle”呢？原來正則表達式中總是從左往右進行匹配的，不會從右邊獲取子串進行匹配。

　　雖然上面的結果相同，但匹配的原理不太一樣。在reg1中，首先o+會匹配所有的"o"，然后接著匹配"gle"，從而完成整體匹配。而在reg2中，o+?會先匹配一個"o"，然后gle在字符串的第2位到第4位（即原串的"ooo"）匹配失敗。進而回溯至o+?去匹配第二個"o"，成功后再在第3位到第4位匹配"gle"，以此類推……最后匹配到整個字符串。

　　總體要記住，從優先級來說，從左往右的次序匹配 > 貪婪 / 懶惰匹配。

零寬斷言：

　　關于零寬斷言的總體解釋可參考博文《正則表達式30分鐘入門教程》，值得注意的是，JS里只支持零寬先行斷言。即零寬正預測先行斷言"(?=exp)"和零寬負預測先行斷言“(?!exp)"。
　　所謂“零寬”，就是它并不在匹配的結果字符中占據空間。例如“/w"，"/s"就會占據一個或幾個空間，依匹配的字符長度決定。而像”^"，"$"這種對應的首末位置，不占據空間，零寬就是屬于這一類。

　　所謂“正 / 負預測”，是指斷言中要求滿足的情況。“正”表示要滿足exp，“負”表示要不滿足exp的。

　　所謂"先行"，是指被匹配的字符串在前面，零寬斷言跟在后面。即串的后一部分是否滿足斷言。

　　所謂“斷言”，就是判斷的條件。

　　看兩種零寬斷言的例子：

var str = 'java coffeescript';

var reg1 = //b/w+(?=script/b)/; //coffee

var reg2 = //b/w+(?!script/b)/; //java

　　reg1為零寬正預測先行斷言，"(?=script/b)"表示某單詞需以“script”結尾，它代表著一種條件，不占有任何空間大小。

　　同樣，reg2為零寬負預測先行斷言，"(?!script/b)"表示不以“script”結尾的單詞。

　　另外，因為沒有零寬后顧斷言，不能判斷某字符串的前面部分滿足什么條件。但在JS中可以用多次正則表達式來實現：先匹配到要找的串，然后截取開頭到index的字符子串，再匹配子串末尾是否符合需要的斷言條件。具體用法可另外嘗試一下。

match()與exec()的異同：

　　match和exec是正則表達式匹配字符串的常用方法。兩者實現的功能差不多，有些細微的區別：

　　1、使用方式

　　match是字符串包裝對象的方法，用法：String.match(RegExp);
　　exec是正則表達式對象的方法，用法：RegExp.exec(String);

　　2、返回的結果

　　　　當RegExp沒有設置全局標志 "g" 時：

　　　　　　兩者的返回結果相同。即無匹配值時返回null，有匹配值時返回一個數組（令array）。array[0]為匹配的字符串，array[1]、array[2]……則對應為正則表達式中圓括號匹配的子字符串$1、$2……。同時數組帶有兩個屬性，array.index表示匹配字符串的初始位置，array.input表示正在檢索的字符串。

　　　　當RegExp有設置全局標志 "g" 時：

　　　　　　match在有值時返回一個數組array。數組的每項依次表示匹配到的所有的字符串，因此不再有圓括號匹配的子字符串了。此時數組沒有index屬性和input屬性。

　　　　　　exec則與沒有全局標示 "g" 的表現無異。此時返回的是數組array，array[0]為當前匹配的字符串，array[1]，array[2]……則為當前匹配下的圓括號匹配的字串。此時要注意RegExp對象的lastIndex屬性，表示原字符串中匹配的字符串末尾的后一個位置。當沒有進一步的匹配結果時，lastIndex屬性置0。因此，可用lastIndex的循環找出所有的匹配字符串。來看看例子：

var str = 'I love1 my job22';

var reg = //b[a-z]+(/d+)/b/g;

array = str.match(reg);

//array = ["love1", "job22"]

//array.index = undefind

//array.input = undefined

------------------------------------

array = reg.exec(str);

//array = ["love1", "1"]

//array.index = 2

//array.input = "I love1 my job22"

//reg.lastIndex = 7

//run again

reg.exec(str);

//array = ["job22", "22"]

//array.index = 11

//array.input = "I love1 my job22"

//reg.lastIndex = 16

//run again

reg.exec(str);

//reg.lastIndex = 0