我第一次遇到正則表達式是在很多年前,但是我仍然記得我對它的最初想法:這串東西是什麼?我不想不碰它,看起來很嚇人。我不太記得那個正則表達式在做什麼了,或者看起來到底是什麼樣子,但是它嚇到了我。回顧過去,我意識到這可能一點都不可怕,實際上,這是解決當前問題的簡便方法。但是為什麼會有這種感覺?只是語法的尷尬,它們看起來確實很奇怪,如果你不知道它們是什麼意思,那它們看起來會非常複雜。我的目的不是要嚇你,一旦我們了解了正則表達式那它就變得很簡單:
讓人畏懼.....今天,我們將揭開正則表達式的神秘面紗,看到它的含義,它的用途以及如何設計正則表達式來解決問題。
1、什麼是正則表達式?
正則表達式是描述數據字符串中模式的一種方式。它們具有自己的語法,就像它們是自己的程式語言一樣,並且存在於大多數(如果不是全部)程式語言中的正則表達式進行交互的方法和方式。正則表達式的常見示例,例如給定的字符串是電子郵件地址還是電話號碼,或者可用於驗證密碼是否滿足一定的複雜性。
可以使用正則表達式做什麼?(1)用模式驗證字符串;(2)在字符串中搜索;(3)替換字符串中的子字符串;(4)從字符串中提取信息;
2、使用正則表達式
對於本文,我們將介紹如何在JavaScript中使用正則表達式,儘管此處學習的概念也適用於其他語言。話雖如此,在其他語言中,它們對待正則表達式的方式可能有所不同。讓我們看一個示例,該示例將驗證字符串是否包含單詞Hello。在JavaScript中,有兩種解決方法:(1)Constructor;(2)Literal;
Constructor
Literal
在這兩種情況下,變量regex都是一個對象,它公開了可用於與正則表達式進行交互的不同方法。但是,第一個示例更為熟悉,以a string作為參數實例化對象。在第二種情況下,看起來有些怪異,有些類似於,string是用引號引起來/。事實證明,兩種方式都表示相同,我個人很喜歡第二種選擇,它非常乾淨,與第一種方案中將正則表達式模式定義為正則表達式的情形相比,IDE或代碼編輯器可以在正則表達式中突出顯示語法串。
到目前為止,我們的正則表達式非常簡單,只是字符串上的完全匹配,並且對JavaScript非常有效,但是即使正則表達式相同,我們對於其他語言所獲得的結果也會有所不同。這是因為每種程式語言都可以在其正則表達式中定義某些默認值或特殊行為,這些默認值或特殊行為可能會彼此不同。對此感到抱歉,但事實就是如此。當我們構建RegEx時,儘管大多數程式語言在大多數情況下都是相同的,但是在其他地方使用它之前,您必須對其進行測試並在必要時進行調整。
到目前為止,我們的正則表達式非常簡單,只是字符串上的完全匹配,並且對JavaScript非常有效,但是即使正則表達式相同,我們對於其他語言所獲得的結果也會有所不同。這是因為每種程式語言都可以在其正則表達式中定義某些默認值或特殊行為,這些默認值或特殊行為可能會彼此不同。事實就是如此,當我們構建RegEx時,儘管大多數程式語言在大多數情況下都是相同的,但是在其他地方使用它之前,你必須對其進行測試並在必要時進行調整。
3、正則表達式的不同用法
在使用正則表達式時,我們基本上是在使用RegExp對象方法或允許我們與正則表達式進行交互的字符串方法:RegExp.prototype.test();該test()方法執行搜索以查找正則表達式和指定字符串之間的匹配項。返回true或false。查看以下指定的字符串是否包含該字符串 foo:
RegExp.prototype.exec():該exec()方法執行對指定字符串中的匹配項的搜索。返回結果數組,或者為null。查找以下foo給定字符串中的所有實例:
String.prototype.match():該match()方法檢索將字符串與正則表達式匹配的結果。查找以下字符串中的所有大寫字母:
String.prototype.matchAll():該matchAll()方法返回所有與正則表達式匹配字符串的結果的迭代器,包括捕獲組。在以下組中查找字符串的出現:
String.prototype.search():該search()方法執行搜索以查找正則表達式與此字符串對象之間的匹配項。它返回發生匹配的索引,或者-1表示沒有匹配。查找以下不是單詞字符或空格的任何字符的位置:
String.prototype.replace():該replace()方法返回一個新字符串,字符串具有部分或全部模式匹配項,並由替換項替換。模式可以是字符串或RegExp,替換可以是字符串或每個匹配項要調用的函數。如果模式是字符串,則僅第一個匹配項將被替換。請注意,原始字符串鎖保持不變的。以下用monkey替換dog:
在這裡不要誤會,方法replace()使用正則表達式,因此即使我們傳遞字符串,它也將被解釋為正則表達式並照此執行。因此,在第二個console.log上,「dog」一詞僅被替換了一次。但是稍後我們將介紹更多。
tring.prototype.replaceAll():該replaceAll()方法返回一個新的字符串,該字符串的所有模式匹配項均由替換項替換。模式可以是字符串或RegExp,替換可以是字符串或每個匹配項要調用的函數。以下用monkey替換dog:
與之前類似,但是現在我們替換了所有匹配項。我通常會避免使用此函數,因為我可以使用正則表達式來執行此操作,並且使用replace()函數再加上並非所有平臺/瀏覽器都支持此函數。
String.prototype.split():該split()方法將String分成有序的子字符串集,將這些子字符串放入數組中,然後返回該數組。通過搜索模式來完成劃分;模式在方法調用中作為第一個參數提供的位置。例如:
4、建立正則表達式
既然我們知道如何使用正則表達式以及可以與之交互的不同方法,那麼讓我們花一些時間來構建正則表達式以匹配所需的模式。
Anchoring:將匹配hello放在字符串中的任何位置。如果要匹配以hello開頭的字符串,請使用^運算符:
如果要匹配以結尾的字符串hello,請使用$運算符:
你也可以將它們結合起來以找到完全匹配的項
要查找中間帶有通配符的字符串,可以使用.*,它匹配任何重複0次或多次的字符:
5、按字符或數字範圍匹配項目
正則表達式的一個非常酷的功能是可以按字符或數字範圍進行匹配,我所說的範圍是什麼意思?
當類型中的至少一個字符匹配時,這些類型的正則表達式模式將匹配:
你還可以組合範圍:
否定模式:我們看到^模式開頭的字符將其錨定到字符串的開頭。但是,當在範圍內使用時,它會否定它,因此:
元字符:正則表達式中的特殊字符具有特殊含義,其中一些是:
(1)\d 匹配任何數字,等於[0-9]
(2)\D 匹配任何非數字字符,等效於[^ 0-9]
(3)\w 匹配任何字母數字字符(加下劃線),等效於[A-Za-z_0-9]
(4)\W 匹配任何非字母數字字符,除[^ A-Za-z_0-9]以外的任何字符
(5)\s 匹配任何空白字符:空格,制表符,換行符和Unicode空格
(6)\S 匹配任何非空格字符
(7)\0 匹配null
(8)\n 匹配換行符
(9)\t 匹配製表符
(10)\uXXXX 與代碼XXXX的unicode字符匹配(需要u標誌)
(11)。匹配不是換行符的任何字符(例如\ n)(除非您使用s標誌,稍後將進行解釋)
(12)[^] 匹配任何字符,包括換行符。在多行字符串上很有用
(13)\b 在單詞的開頭或結尾匹配一組字符
(14)\B 匹配不在單詞開頭或結尾的一組字符
6、正則表達式選擇(或)
如果要搜索一個或另一個字符串,請使用|:
量詞:量詞是特殊運算符,以下是其中一些:?:可選的量詞 假設您需要查找一個字符串中是否包含一位數字,僅此一位,你可以執行以下操作:
*:0 或更多匹配0個或更多(> = 0)項目:
{n}:固定匹配數 完全匹配n個項目:
{n, m}:n至m的匹配數 n至m次之間的匹配:
{n, m}:n至m的匹配數 n至m次之間的匹配:
m 也可以省略,在這種情況下,它將至少匹配n個項目:
轉義:正如我們已經看到的,某些字符具有特殊含義,但是如果我們想與這些字符之一匹配怎麼辦?可以使用來轉義特殊字符,讓我們看一個例子:
Groups:使用括號可以創建字符組(...):
你還可以為組使用限定符(例如重複項或可選限定符):
組也很有意思,與像功能使用時,作為match()和exec()我們前面看到的,它們可以單獨捕獲:示例exec():
示例match():
命名捕獲組:使用ES2018,現在可以將名稱分配給組了,因此處理結果變得更加容易,請看以下示例,而無需命名組:
現在使用命名組:
現在,在組結果中,我們可以輕鬆捕獲每個組。
7、標誌
正如我們在構造函數示例中看到的那樣,並且在整篇文章中一直使用它,正則表達式具有一些標誌,這些標誌會更改匹配項的行為:
(1)g:多次匹配模式
(2)i:使正則表達式不區分大小寫
(3)m:啟用多行模式。在此模式下,^和$匹配整個字符串的開始和結束。否則,多行字符串將匹配每行的開頭和結尾。
(4)u:啟用對unicode的支持(在ES6 / ES2015中引入)
(5)s:單行的縮寫,也匹配換行符
可以組合標誌,對於正則表達式文字,它們設置在正則表達式的末尾:
或使用構造函數作為函數的第二個參數:
足夠了,讓我們來看一些很酷的例子。
8、很酷的例子
(1)密碼強度
檢查密碼的強度,如果要構建自己的密碼驗證器,則很有用。我知道這是主觀的,因為不同的服務可能有不同的需求,但這是一個很好的起點。
(2)驗證電子郵件地址
這可能是正則表達式最著名的案例之一,可以驗證電子郵件地址。
(3)IP位址
V4
V6
(3)從網址提取域
使用示例:
(4)拉圖像源
使用示例:
(5)信用卡號碼
9、結論
正則表達式是一個非常強大的功能,一開始可能會令人生畏,但是一旦掌握了正則表達式,它們就非常酷。今天,我們了解了它們是什麼,如何使用它們,如何構建它們以及一些很酷的示例,我希望下次你在項目中看到它們中的一個時,不要再逃避(就像我一樣),然後嘗試了解它並與之合作。非常感謝您的閱讀!