使用JavaScript對正則表達式進行解析

2021-01-07 三微授漁

我第一次遇到正則表達式是在很多年前,但是我仍然記得我對它的最初想法:這串東西是什麼?我不想不碰它,看起來很嚇人。我不太記得那個正則表達式在做什麼了,或者看起來到底是什麼樣子,但是它嚇到了我。回顧過去,我意識到這可能一點都不可怕,實際上,這是解決當前問題的簡便方法。但是為什麼會有這種感覺?只是語法的尷尬,它們看起來確實很奇怪,如果你不知道它們是什麼意思,那它們看起來會非常複雜。我的目的不是要嚇你,一旦我們了解了正則表達式那它就變得很簡單:

讓人畏懼.....今天,我們將揭開正則表達式的神秘面紗,看到它的含義,它的用途以及如何設計正則表達式來解決問題。

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、結論

正則表達式是一個非常強大的功能,一開始可能會令人生畏,但是一旦掌握了正則表達式,它們就非常酷。今天,我們了解了它們是什麼,如何使用它們,如何構建它們以及一些很酷的示例,我希望下次你在項目中看到它們中的一個時,不要再逃避(就像我一樣),然後嘗試了解它並與之合作。非常感謝您的閱讀!

相關焦點

  • 在JavaScript字符串的search()方法中,如何匹配正則表達式?
    第一節:基本概念#JavaScript#正則表達式已經成為各大程式語言的標準,只是在不同的語言中,所使用的方式有所不同,但基本上核心的功能都是一樣的。正則表達式的核心功能是建立一種匹配模式,這個匹配模式可以理解為模板,模子。然後再拿具體的字符串來與這個模式進行匹配,如果匹配上,則表示符合要求,則進一步採用措施。
  • Web 開發:10句話看懂 JavaScript 正則表達式
    你可以事先定義正則表達式,也可以在調用方法時直接定義:2,使用match方法,一次匹配一個字符或者將多個字符放入方括號[]中以捕獲任何匹配的字符,使用連字號-來捕獲特定範圍的字符:3,在正則表達式末尾添加可選的修飾符來定義表達式的匹配方式,在 JS 中,我們的修飾符有:
  • JavaScript正則表達式常用技巧
    正則表達式的掌握程度能粗略地看出程式設計師的技術底子,所以技術面試、編程競賽等 都特別喜歡考察正則表達式。本篇就帶你一起夯實一下 JavaScript 正則表達式的一些使用技巧:創建正則表達式在 JavaScript 的世界,創建正則表達式有2個方法: (1)使用一個正則表達式字面量,其由包含在斜槓之間的模式組成。
  • JavaScript高級什麼是正則以及正則表達式的簡單運用
    在實際開發中 ,經常會用到一些表單的驗證 ,提交表單的時候一般都會預校驗 ,比如手機號填寫是否合格 ,用戶暱稱填寫是否規範等 ,這些就要用到正則表達式什麼是正則表達式?用於匹配規律規則的表達式,正則表達式最初是科學家對人類神經系統的工作原理的早期研究,現在在程式語言中有廣泛的應用。正則表通常被用來檢索、替換那些符合某個模式(規則)的文本。
  • JavaScript的正則表達式對象RegExp詳解
    今天和大家學習一下JavaScript的正則表達式對象RegExp。一、正則表達式:主要是用來定義字符串的組成規則。1、單個字符:[]如:[a] [ab] [a-z][a-zA-Z0-9]等等,上述定義有點麻煩,我們可以使用特殊符號來代替:\d:表示單個數字字符[0-9]\w:表示單個單詞字符[a-zA-Z0-9]2、量詞字符?
  • javascript自學記錄:RegExp正則表達式
    對於正則表達式,個人還是更喜歡在python中的應用方式。5.4 RegExp類型整體應用:// 待查字符串var testStr = "On the morning of June 18";// 正則表達式 格式:/表達式/標誌var pat = /on/gi; // 第一種定義方式var pat = new RegExp("on","gi");
  • 德州點創教育JavaScript正則表達式授課大綱
    正則表達式有兩種創建方式:第一種:用RegExp()構造函數來創建RegExp對象var pattern = new RegExp("[abc]"由十六進位數字nn指定的拉丁字符,例如, \x0A等坐於\n\uxxxx 由十六進位數字xxxx指定的Unicode字符,例如,\u0009等價於\t\cX 控制字符^X,例如 \cJ等價於換行符\n注意:在正則表達式中
  • Python正則表達式的七個使用範例
    在這個系列的第一篇文章中,我們將重點討論如何使用Python中的正則表達式並突出Python中一些獨有的特性。我們將介紹Python中對字符串進行搜索和查找的一些方法。然後我們講討論如何使用分組來處理我們查找到的匹配對象的子項。我們有興趣使用的Python中正則表達式的模塊通常叫做『re』。
  • 新的JavaScript功能將改變編寫正則表達式的方式
    大多數程式語言都支持正則表達式,使用正則表達式最好的理由:它們是用於處理文本的極其強大的工具,需要幾十行代碼的文本處理任務通常可以通過一行正則表達式代碼來完成。雖然大多數語言中的內置函數通常足以對字符串執行搜索和替換操作,但更複雜的操作(例如驗證文本輸入)通常需要使用正則表達式。
  • 「正則表達式」 python中的使用
    正則表達式的介紹在實際開發過程中經常會有查找符合某些複雜規則的字符串的需要,比如:郵箱、圖片地址、手機號碼等,這時候想匹配或者查找符合某些規則的字符串就可以使用正則表達式了。2.正則表達式概念正則表達式就是記錄文本規則的代碼3. 正則表達式的樣子0\d{2}-\d{8} 這個就是一個正則表達式,表達的意思是匹配的是座機號碼4.
  • JavaScript正則表達式元字符介紹
    正則表達式正則表達式是一個描述字符模式的對象,用於字符匹配創建正則表達式使用 new 運算符var reg = new RegExp('Box');// 要傳一個參數,該參數是模式字符串// 第二個參數可選,模式修飾符,i 忽略大小寫;g
  • JavaScript-正則表達式中的修飾符和對象有哪些?
    因為正則表達式的作用是對字符串進行操作,所以一般在實際開發中正則表達式會配合字符串的search和replace方法來使用。1.3.1 search方法search方法用於檢索與正則表達式相匹配的子字符串,並返回子字符串的起始位置。
  • 給JAVA程式設計師的正則表達式一課
    正則表達式可以用於:驗證用戶的輸入。搜索給定數據中的文本。(可在文本編輯器中使用)編譯器中的解析器語法突顯,數據包嗅探器等。要全面了解Regex,我們要理解基本知識,下面我們分別介紹,示例中我們用到在線正則解析網站regex101。基本量詞(*+?
  • Python正則表達式如何進行字符串替換
    Python正則表達式如何進行字符串替換 Python正則表達式需要進行字符串替換的時候需要用到一些字符串的匹配,在這一過程中遇到的問題一直在困擾著我們。
  • 再見,正則表達式
    從一段指定的字符串中,取得期望的數據,正常人都會想到正則表達式吧?寫過正則表達式的人都知道,正則表達式入門不難,寫起來也容易。但是正則表達式幾乎沒有可讀性可言,維護起來,真的會讓人抓狂,別以為這段正則是你寫的就可以駕馭它,過個一個月你可能就不認識它了。完全可以說,天下苦正則久矣。今天給你介紹一個好東西,可以讓你擺脫正則的噩夢,那就是 Python 中一個非常冷門的庫 -- parse。
  • python正則表達式使用方法說明
    曾光紅/文 (同步發布豆瓜網)一、導入re庫python使用正則表達式要導入re庫。import re在re庫中。正則表達式通常被用來檢索查找、替換那些符合某個模式(規則)的文本。二、使用正則表達式步驟1、尋找規律;2、使用正則符號表示規律;3、提取信息,如果每一個字符都能匹配,則匹配成功;一旦有匹配不成功的字符則匹配失敗。
  • JavaScript常用正則表達式備忘錄
    正則表達式或「regex」用於匹配字符串的各個部分 下面是我創建正則表達式的備忘單。匹配正則使用 使用 惰性匹配字符串中與給定要求匹配的最小部分默認情況下,正則表達式是貪婪的
  • 學會使用正則表達式——驗證郵箱地址格式
    原來是正則表達式在起作用這就要說到正則表達式了,正則表達式可以使用一些預定義的字符、符號以及這些字符或符號的組合,組成一個規則串,然後使用這個規則串對需要處理的一段字符串進行匹配。如果這段字符串的內容和規則串能夠匹配,則匹配成功,否則就匹配失敗。正則表達式被經常使用在數據採集、搜尋引擎、編譯系統、文本編輯器等方面。
  • JavaScript正則表達式「程式設計師培養之路第十二天」
    第一節 基本概念正則表達式(regular expression)描述了一種字符串匹配的模式,他是一個特殊的公式,由原子、元字符、模式修正符組成;它也是一個字符串!只不過是一個特殊的字符串主要實現對字符串的匹配、分割、查找、替換等操作 正則表達式的主要作用: 正則匹配: 可以測試字符串內容是否可以與正則相匹配 替換文本: 根據模式匹配字符串中的特定內容,進行替換、刪除 提取數據: 根據模式匹配從字符串中提取內容
  • 正則表達式 – 簡介
    正則表達式 - 簡介除非您以前使用過正則表達式,否則您可能不熟悉此術語。但是,毫無疑問,您已經使用過不涉及腳本的某些正則表達式概念。例如,您很可能使用 ? 和 * 通配符來查找硬碟上的文件。通配符匹配文件名中的單個字符,而 * 通配符匹配零個或多個字符。像 data?.