正則表達式看起來很嚇人，不容易讓人親近，但它的確很好用，可以很大程度上提高你的開發效率。本文從零開始介紹了應如何學習正則表達式。文中范例主要為JavaScript。?

正則表達式可以很恐怖，真得很恐怖。幸運的是，一旦記住每個符號所表達的意思，恐懼就會快速消退。如果你對正則表達式一無所知，正如文章標題，那你又就有很多東西要學了。下面讓我們馬上開始吧。?

基礎學習?

想要高效地學習和掌握正則表達式的關鍵是花一天的時間記住所有符號。這可能是我所能提供的最好的建議。坐下來，做些記憶卡片，然后記住它們。以下為最常見的一些符號：?
.?- 匹配任意字符，換行符除外（如果 dotall 為 false）。?
*?- 該符號前面的字符，匹配 0 次或多次。?
+?- 該符號前面的字符，匹配 1次或多次?
??- 該符號前面的字符是可選的。匹配 0 次或 1 次。?
\d?- 匹配任何單個數字。?
\w?- 匹配任何一個字符（包括字母數字以及下劃線）。?
[XYZ]?- 匹配字符組中的任意一個字符，即 X、Y、Z 中的任意一個。?
[XYZ]+?- 匹配字符組中的一個或多個字符。?
$?- 匹配字符串結束的位置。?
^?- 匹配字符串開始的位置。?
[^a-z]?- 當出現在字符類中時，^ 表示 NOT（非）；對于該示例，表示匹配任何非小寫字母。?



很悶吧，不過還是記住它們，記住之后你會知道好處的。?

工具?

你認為一個表達式是正確的，非常正確，但就是無法得到想要的結果，這時你可能會產生將頭發拔光的沖動。去下載 RegExr 桌面應用程序吧，這個對你是必不可少的，而且玩起來非常有趣的。它提供實時檢查，還有一個側邊欄，里面包含了每個字符的定義和用戶，非常詳細。?

正則表達式和 JavaScript?

1. Test()?

這個方法接受單個字符串參數，然后返回一個布爾值，該值表明是否找到一個批評。如果你不需要對特定的匹配結果進行操作，比如，驗證用戶名，“test”方法已足夠完成這個任務。?

示例?

Javascript代碼??

var?username?=?'JohnSmith';??????

alert(/[A-Za-z_-]+/.test(username));?//?returns?true??

?? 在上面的代碼中，我們首先聲明一個正則表達式，表示僅允許大寫或小寫字母、下劃線和連字符。將這些可接受的字符放在括號中，就指定了一個字符組。緊隨其后的 + 號表示我們想要正在尋找的是一個或多個前述字符組中的字符。然后使用該范式對變量“JohnSmith”進行測試。由于存在匹配，瀏覽器的顯示框中將顯示 true。?

2. Split()?

你可能對 split 方法已經很熟了。該方法接受單個正規表達式，表示在哪里進行“分割”。請注意，如果喜歡，你還可以使用字符串。?

Javascript代碼??

var?str?=?'this?is?my?string';??????

alert(str.split(/\s/));?//?alerts?"this,?is,?my,?string"??

?? 上面代碼中的 \s 表示單個空格，通過它，我們將字符串分割為一個數組。如果想要訪問某個特定的值，使用相應的索引即可。?

var str = 'this is my this string';????
alert(str.split(/\s/)[3]); // alerts "string"???

3. replace()?

可能你已經想到了，replace 方法可以用來將文本中的一部分（由字符串或正則表達式表示）替換為不同的字符串。?

示例?
如果想要將“Hello, World”改為“Hello, Universe”，可以使用下面的代碼：?

Javascript代碼??

var?someString?=?'Hello,?World';??????

someString?=?someString.replace(/World/,?'Universe');??????

alert(someString);?//?alerts?"Hello,?Universe"??

?? 應留意的是，對于這個簡單的示例，我們本來可以簡單的使用.replace('World', 'Universe')。另外，使用 replace 方法不會自動重寫變量的值，我們必須將返回值再次分配給這個變量：someString。?

示例 2?
再舉一個例子，假設用戶要在我們的網站注冊一個賬號，我們可能想要提供一些基礎的安全預防措施。也許我們想要留下他們的用戶名，而刪除其他任何符號，引號、分號等等。對于 JavaScript 和正則表達式，執行這類任務是樁瑣碎的小事情。?

Javascript代碼??

var?username?=?'J;ohnSmith;@%';??????

username?=?username.replace(/[^A-Za-z\d_-]+/,?'');??????

alert(username);?//?JohnSmith;@%??

?? 看到最后生成的顯示值，有人可能會想，上面的代碼有錯誤。事實并非如此。你仔細看看，會發現字母“J”后的分號被刪除了，正如我們所期望的那樣。為了通知引擎繼續搜索字符串查找更多匹配，我們可以做結束的斜杠后面直接添加一個“g”，這個修飾符或標記表示“global（全局）”。修改后的代碼如下所示：?

Javascript代碼??

var?username?=?'J;ohnSmith;@%';??

username?=?username.replace(/[^A-Za-z\d_-]+/g,?'');??????

alert(username);?//?alerts?JohnSmith??

?? 現在，正則表達式搜索整個字符串，替換所有必要的字符。讓我們看看關鍵的表達式（.replace(/[^A-Za-z\d_-]+/g, '');），要注意，括號內的向上箭頭(即 ^)非常重要。當放在字符組中時，該符號表示“找到所有不是……”。現在回頭在看看這個代碼，它表示，找到所有不是字母、數字（由 \d 表示）、下劃線或連字符的符號；如果找到一個匹配，將其替換為空，事實上就是刪除該字符。?

4. Match()?

與test方法不同，match() 返回一個包含所有找到的批評的數組。?

示例?
var name = 'JeffreyWay';??? alert(name.match(/e/)); // alerts "e"?
?? 上面的代碼將顯示一個字母“e”。但是，在字符串“JeffreyWay”中實際上包含2個 e。同樣，這次我們還是要使用修飾符“g”來聲明一個全局搜索。?

Javascript代碼??

var?name?=?'JeffreyWay';??????

alert(name.match(/e/g));?//?alerts?"e,e"??

如果想要顯示數組中這些特定值中的一個，可以做括號中引用想要的索引。?

Javascript代碼??

var?name?=?'JeffreyWay';??????

alert(name.match(/e/g)[1]);?//?alerts?"e"??

???

示例 2?
讓我們看下一個示例，確保我們對它的理解是正確的。?

Javascript代碼??

var?string?=?'This?is?just?a?string?with?some?12345?and?some?!@#$?mixed?in.';??????

alert(string.match(/[a-z]+/gi));?//alerts?"This,is,just,a,string,with,some,and,some,mixed,in"???

??? 在這個正則表達式中，我們創建了一個范式，可匹配一個或多個大寫或小寫字母。這多虧了“i”修飾符。除外，我們還加上了“g”來聲明進行全局搜索。上面的代碼將顯示“This,is,just,a,string,with,some,and,some,mixed,in.”然后，如果想要獲取變量數組中這些值中的某一個，我們只需引用相應的索引即可。?

Javascript代碼??

var?string?=?'This?is?just?a?string?with?some?12345?and?some?!@#$?mixed?in.';??????

var?matches?=?string.match(/[a-z]+/gi);??????

alert(matches[2]);?//?alerts?"just"???分割電子郵件地址??

為了練習，我們試著將一個電子郵件地址（nettuts@tutsplus.com）分割為相應的兩部分：用戶名和域名，即 nettuts 和tutsplus。?

Javascript代碼??

var?email?=?'nettuts@tutsplus.com';??????

alert(email.replace(/([a-z\d_-]+)@([a-z\d_-]+)\.[a-z]{2,4}/ig,?'$1,?$2'));?//?alerts?"nettuts,?tutsplus"??

?? 如果對于正則表達式，你還是新手，上面的代碼可能會看起來有點嚇人。不用擔心，第一次看到都會感到“恐怖”。一旦將它分解為一個一個小子集，你會發覺其實非常簡單。下面讓我們一條一條進行分析：?

.replace(/([a-z\d_-]+)?? 從中間開始看，我們要搜索任何字母、數字、下劃線或連字符，并且匹配一次或多次（+）。無論匹配是上面，我們想要訪問其值，所以將其放到括號中。這樣，我們稍后可以引用這個匹配的子集。?

@([a-z\d_-]+)?? 緊接著前一個匹配，我們看到 @ 符號，然后是有一組一個或多個字母、數字、下劃線和連字符。同樣，我們將其放到括號內，以便稍后訪問。?

\.[a-z]{2,4}/ig,?? 繼續找，我們看到一個點。因為在正則表達式中，句點可表示任何字符（有時換行符除外），因此必須使用“\”進行轉義。最后一部分是用于查找“.com”。我們知道，大多數域名，如果不是所有，其后綴為 2 到 4 個字符（com、edu、net、name 等等）。如果找到具體的范圍，我們可以先行使用更常規的符號，如 * 或 +。不過，我們在這里是將2個數字放到一個大括號中，分別表示最大值和最小值。?

'$1, $2')?? 這個最后一部分表示replace方法的第二個參數，或者我們想要將匹配字符集替換為的對象。在這里，我們使用 $1 和 $2 分別來引用保存在第一個和第二個括號中的值。對于這個特定示例， $1 指向 nettuts，$2 指向 tutsplus。?

創建自己的位置對象?

作為最后的一個項目，我們將創建位置對象。位置對象向用戶提供有關當前頁面的信息：href、協議、地址、端口等。請注意，這里僅僅是作為練習之用。對于真正的網址，使用已有的位置對象即可。?

首先我們創建位置函數，該函數接受單個參數，該參數表示我們想要“解碼”的網址，我們將其稱為“loc”。?

function loc(url) { }?? 現在，我們可以按照下面的方式調用它，并傳入一個亂七八糟的 url：?

var l = loc('http://www.somesite.com?somekey=somevalue&anotherkey=anothervalue#theHashGoesHere');?

下一步，我們需要返回包含多個方法的對象。?

function loc(url) {?
??????? return {}????
}???

搜索（search）?

我們不會創建所有方法，但我們會模仿其中幾個。第一個是“search”。使用正則表達式，我們將要搜索 url 并返回查詢字符串中的所有內容。?

Javascript代碼??

return?{??

????????search?:?function()?{??

????????????return?url.match(/\?(.+)/i)[1];?//returns?"somekey=somevalue&anotherkey=anothervalue#theHashGoesHere"??

??????}??

????}??

?? 在上面的代碼中，我們使用了傳入的 url，試圖使用我們的正則表達式對其進行匹配。這個正則表達式在整個字符串中搜索問號，問號表示查詢字符串（querystring）的開始。在這個位置，我們需奧獲取其余的字符，這就是將（.+）放入括號的原因。最后，我們需要返回那個字符區塊，因此，使用[1]來定位它。?

哈希值（Hash）?

現在我們將創建一個方法，返回 url 的哈希值，或者 # 號后面的內容。?

Javascript代碼??

hash?:?function()?{??

????????return?url.match(/#(.+)/i)[1];?//?returns?"theHashGoesHere"??

},??

?? 這次，我們搜索 # 號，同樣，使用括號獲取后面的字符，并使用 [1] 指向那個特定的子集。?

協議?

protocol 方法應返回，頁面所用的協議，可能你已經猜到了。這種協議通常為 http 或 https。?

Javascript代碼??

protocol?:?function()?{??

????????return?url.match(/(ht|f)tps?:/i)[0];?//returns?'http:'??

},??

???

這一個稍微更加復雜一點，因為存在幾個選項：http、https 和 ftp。?

雖然可以使用這樣的格式 (http|https|ftp)，但使用 (ht|f)tps? 更為簡潔，表示我們首先查找“ht”或“f”字符，下一步，匹配“tp”字符。最后的“s”是可選的，所以我們加了一個問號，表示問號前的字符出現零次或一次。?

Href?

這個是最后一個方法，返回頁面的 url。?

Javascript代碼??

href?:?function()?{??

????????return?url.match(/(.+\.[a-z]{2,4})/ig);?//returns?"http://www.somesite.com"??

}??

?? 這里，我們對所有字符進行匹配，直到找到一個點號，這個點號后面有 2 - 4 個字符（表示 com、au、edu、name 等等）。重要的是意識到，對于這些表達式，我們可以寫得很復雜也可以寫得很簡單，這在于我們要求有多嚴格。?

一個簡單的函數?

Javascript代碼??

function?loc(url)?{??

????????return?{??

????????????search?:?function()?{??

????????????????return?url.match(/\?(.+)/i)[1];??

????????????},??

????????????hash?:?function()?{??

????????????????return?url.match(/#(.+)/i)[1];??

????????????},??

????????????protocol?:?function()?{??

????????????????return?url.match(/(ht|f)tps?:/)[0];??

????????????},??

????????????href?:?function()?{??

????????????????return?url.match(/(.+\.[a-z]{2,4})/ig);??

????????????}??

????????}??

????}??

使用上面這個函數，我們可以很簡單地顯示網址的每個部分：?

Javascript代碼??

var?l?=?loc('http://www.net.tutsplus.edu?key=value#hash');????????alert(l.href());?//?http://www.net.tutsplus.com??

alert(l.protocol());???

轉載于:https://www.cnblogs.com/qingsong/p/5365253.html

總結

以上是生活随笔為你收集整理的Javascript正则表达式完全学习手册的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。