最近在研讀一本巨著《JavaScript忍者秘籍》，里面有一篇涉及到了正則表達(dá)式。

我在以前也曾經(jīng)寫過(guò)一篇正則表達(dá)式相關(guān)的文章《JavaScript與PHP中正則》，這次再做些補(bǔ)充。

書(shū)中的源碼可以在此下載。我將源碼放到了線上，如果不想下載，可以直接訪問(wèn)在線網(wǎng)址，修改頁(yè)面名就能訪問(wèn)到相應(yīng)示例代碼。

?

一、術(shù)語(yǔ)與操作符

1）精確匹配

如果一個(gè)字符不是特殊字符或操作符，則表示該字符必須在表達(dá)式中出現(xiàn)。

例如“/test/”，就表示“t”后面跟著“e”，“e”后面跟著“s”，“s”后面跟著“t”。

?

2）匹配一類字符

很多時(shí)候是想匹配一個(gè)有限字符集中的某一個(gè)字符。

例如“[abc]”，就是要匹配“a”、“b”或“c”中的任意一個(gè)字符。

例如“[^abc]”，就是除了“a”、“b”、“c”之外的任意字符。

例如“[a-m]”，就是從“a”到“m”之間的任意字符。

?

3）轉(zhuǎn)義

并不是所有字符和其字符字面量都是等價(jià)的。

例如匹配“$”、“.”這種特殊字符，需要添加“\”反斜杠，“\$”、“\.”。

?

4）匹配開(kāi)始與匹配結(jié)束

經(jīng)常需要確保模式匹配一個(gè)字符串的開(kāi)始，或者一個(gè)字符串的結(jié)束。

“/^test/”表示以“test”開(kāi)始，“/test$/”表示以“test”結(jié)尾。

?

5）重復(fù)出現(xiàn)

1. “？”表示出現(xiàn)一次或不出現(xiàn)，例如“/t?est/”可以匹配“test”或“est”。

2. “+”表示出現(xiàn)一次或多次，例如“/t+est/”可以匹配“test”、“ttest”。

3. “*”表示出現(xiàn)零次或多次，例如“/t*est/”可以匹配“est”、“test”。

4. “{number}”表示指定出現(xiàn)的次數(shù)，例如“/a{4}/”可以匹配“aaaa”。

5. “{number,number}”兩個(gè)數(shù)字表示重復(fù)次數(shù)區(qū)間，例如“/a{1,3}/”可以匹配“aa”、“aaa”或“aaaa”。

6. “{number,}”次數(shù)區(qū)間的第二個(gè)數(shù)字可選，表示一個(gè)開(kāi)區(qū)間。例如“/a{1,}/”匹配連續(xù)2個(gè)“a”或更多的“a”。

7.?重復(fù)操作默認(rèn)是貪婪匹配，如果要非貪婪（只做一次匹配）的可以在操作符后面加“？”，例如“*?”、“+?”。

?

6）預(yù)定義字符類

有一些字符是不可能用字面量字符來(lái)表示的（例如回車）。

還有一些經(jīng)常想匹配的字符類，例如小數(shù)位數(shù)或一組空白字符。

?

7）分組

如果將操作符應(yīng)用于一組術(shù)語(yǔ)，可以添加小括號(hào)。

例如“/(ab)+/”匹配一個(gè)或多個(gè)“ab”字符串。

當(dāng)用括號(hào)進(jìn)行分組的時(shí)候，就創(chuàng)建了捕獲（capture）。

?

8）或操作符

可以用“|”表示或的關(guān)系。

例如“/a|b/”匹配“a”或“b”。

?

9）反向引用

在反斜杠后面加一個(gè)要引用的捕獲數(shù)量，該數(shù)字從1開(kāi)始，例如“\1”、“\2”。

例如“/<(\w+)>(.+)<\/\1>/”匹配“<b>strong</b>”，不用反向引用是無(wú)法做到的。

?

二、匹配捕獲的片段

1）執(zhí)行簡(jiǎn)單的捕獲

從“filter:alpha(opacity=50);”字符串中提取透明度值，可以查看在線結(jié)果。

function getOpacity(elem) {var filter = elem.style.filter;return filter ? //#2filter.indexOf("opacity=") >= 0 ?(parseFloat(filter.match(/opacity=([^)]+)/)[1]) / 100) + "" :"" :elem.style.opacity; }window.onload = function() {assert(getOpacity(document.getElementById("opacity")) == "0.5", "The opacity of the element has been obtained."); };

match返回的第一個(gè)索引的值總是該匹配的完整結(jié)果，然后是每個(gè)后續(xù)捕獲結(jié)果。

?

2）用全局表達(dá)式進(jìn)行匹配

當(dāng)應(yīng)用全局表達(dá)式（g），返回值依然是一個(gè)數(shù)組，匹配所有可能的結(jié)果，而不僅僅是第一個(gè)匹配結(jié)果，在線實(shí)例查看。

var html = "<div class='test'><b>Hello</b> <i>world!</i></div>";var results = html.match(/<(\/?)(\w+)([^>]*?)>/); //#1 assert(results[0] == "<div class='test'>", "The entire match."); assert(results[1] == "", "The (missing) slash."); assert(results[2] == "div", "The tag name."); assert(results[3] == " class='test'", "The attributes.");var all = html.match(/<(\/?)(\w+)([^>]*?)>/g); //#2 assert(all[0] == "<div class='test'>", "Opening div tag."); assert(all[1] == "<b>", "Opening b tag."); assert(all[2] == "</b>", "Closing b tag."); assert(all[3] == "<i>", "Opening i tag."); assert(all[4] == "</i>", "Closing i tag."); assert(all[5] == "</div>", "Closing div tag.");

在進(jìn)行局部匹配時(shí)，只有一個(gè)實(shí)例被匹配了，并且該匹配的捕獲結(jié)果也返回了。

在進(jìn)行全部匹配時(shí)，返回的是匹配結(jié)果的列表。

我們可以用“exec”方法，在全局正則匹配之時(shí)，恢復(fù)捕獲。在線實(shí)例查看。

var html = "<div class='test'><b>Hello</b> <i>world!</i></div>"; var pattern = /<(\/?)(\w+)([^>]*?)>/g, match; var num = 0;while ((match = pattern.exec(html)) !== null) { //#1assert(match.length == 4, "Every match finds each tag and 3 captures.");num++; }assert(num == 6, "3 opening and 3 closing tags found.");

exec方法保存了上次調(diào)用的狀態(tài)，這樣每個(gè)后續(xù)調(diào)用就可以繼續(xù)下去了，直到全局匹配。每一個(gè)調(diào)用返回的都是下一個(gè)匹配及其匹配內(nèi)容。

match中的內(nèi)容如下，這里就顯示兩個(gè)，其他類似的，下面的index就是當(dāng)前字符串開(kāi)始匹配的索引值。

?

3）捕獲的引用

有兩種方法可以引用捕獲到的匹配結(jié)果：自身匹配，替換字符串。

1. 自身匹配

var html = "<b class='hello'>Hello</b> <i>world!</i>";var pattern = /<(\w+)([^>]*)>(.*?)<\/\1>/g; //#1var match = pattern.exec(html); console.log(match);assert(match[0] == "<b class='hello'>Hello</b>","The entire tag, start to finish."); assert(match[1] == "b", "The tag name."); assert(match[2] == " class='hello'", "The tag attributes."); assert(match[3] == "Hello", "The contents of the tag.");match = pattern.exec(html);

使用了“\1”引用了表達(dá)式的第一個(gè)捕獲，在本例中該捕獲是標(biāo)簽名稱，查看在線實(shí)例。

2.替換字符串

替換字符串“replace”方法，與反向引用不一樣，這里使用“$1”、“$2”語(yǔ)法表示每個(gè)捕獲的數(shù)字。

assert("fontFamily".replace(/([A-Z])/g, '-$1').toLowerCase() == 'font-family', 'Convert the camelCase into dashed notation');

特殊標(biāo)記符“$”說(shuō)明（在線調(diào)試）：

1. $i (i為數(shù)字) : 從左到右正則子表達(dá)式所匹配的文本。

2. $&：與正則表達(dá)式匹配的全文本。

3. $`(頓號(hào))：匹配字符串的左邊文本。

4. $’(單引號(hào))：匹配字符串的右邊文本。

5. $$：匹配$自己。

var str = "One two three"; str.replace(/two/, "($`)"); // “One (One ) three” 替換two之前的one str.replace(/\w+/g, "($&)"); // “(One) (two) (three)” 替換自己 str.replace(/two/, "($')"); // “One ( three) three” 替換two之后 str.replace(/two/, "($$)"); // “One ($) three” 替換$自己

?

4）沒(méi)有捕獲的分組

小括號(hào)有雙重責(zé)任：分組操作與捕獲。但如果有大量的分組，就會(huì)引起不必要的捕獲，查看在線實(shí)例。

var pattern = /((?:ninja-)+)sword/; //1var ninjas = "ninja-ninja-sword".match(pattern);assert(ninjas.length == 2, "Only one capture was returned."); assert(ninjas[1] == "ninja-ninja-","Matched both words, without any extra capture.");

該表達(dá)式只會(huì)為外層的括號(hào)創(chuàng)建捕獲。

?

轉(zhuǎn)載于:https://www.cnblogs.com/strick/p/6048862.html

總結(jié)

以上是生活随笔為你收集整理的飞起来的正则表达式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。