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

2021-01-11 三微授漁

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

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

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#正則表達式已經成為各大程式語言的標準,只是在不同的語言中,所使用的方式有所不同,但基本上核心的功能都是一樣的。正則表達式的核心功能是建立一種匹配模式,這個匹配模式可以理解為模板,模子。然後再拿具體的字符串來與這個模式進行匹配,如果匹配上,則表示符合要求,則進一步採用措施。
  • 在JavaScript中,使用replace()、test()和exec()方法匹配字符串
    02第二節:使用正則表達式替換這裡我們將舉一個例子,使用正則表達式且不區分大小寫將字符串中的 Microsoft 替換為 Google。在Replace()方法中,使用了正則表達式,則只要能在正則表達式上匹配到,則就會發生替換。03第三節:使用字符串替換replace()方法的第一個參數除了使用正則表達式之外,還可以使用字符串。
  • python正則表達式使用方法說明
    曾光紅/文 (同步發布豆瓜網)一、導入re庫python使用正則表達式要導入re庫。import re在re庫中。正則表達式通常被用來檢索查找、替換那些符合某個模式(規則)的文本。二、使用正則表達式步驟1、尋找規律;2、使用正則符號表示規律;3、提取信息,如果每一個字符都能匹配,則匹配成功;一旦有匹配不成功的字符則匹配失敗。
  • 給JAVA程式設計師的正則表達式一課
    正則表達式可以用於:驗證用戶的輸入。搜索給定數據中的文本。(可在文本編輯器中使用)編譯器中的解析器語法突顯,數據包嗅探器等。要全面了解Regex,我們要理解基本知識,下面我們分別介紹,示例中我們用到在線正則解析網站regex101。基本量詞(*+?
  • JavaScript正則表達式「程式設計師培養之路第十二天」
    只不過是一個特殊的字符串主要實現對字符串的匹配、分割、查找、替換等操作 正則表達式的主要作用: 正則匹配: 可以測試字符串內容是否可以與正則相匹配 替換文本: 根據模式匹配字符串中的特定內容,進行替換、刪除 提取數據: 根據模式匹配從字符串中提取內容,生成數組
  • 帶您一小時玩轉正則表達式
    在日常開發中我們經常會對用戶輸入的數據進行校驗、對字符串進行提取或者替換,這時候往往會使用正則來實現,那麼今天我給大家分享下正則表達式的一些知識。一、什麼是正則表達式正則表達式是一種描述字符串結果的語法規則,是一個特定的格式化模式,可以匹配、替換、截取匹配的字符串。
  • 正則表達式在VBA中間是如何應用?正則表達式的實現方式?
    Hi,大家好,本章節開始將會從零開始和大家用圖文的方式,讓你從零基礎學會正則表達式!有興趣的小夥伴可以持續關注我,或者在專欄中進行查看自我學習,願與君攜手前行!在上一個章節說到正則表達式的入門級知識點,本節將會與大家分享一下正則表達式的是具體實現方式是怎麼樣的?
  • 正則表達式和 CPU 100%有什麼故事?
    其實這裡導致 CPU 使用率高的關鍵原因就是:Java 正則表達式使用的引擎實現是 NFA 自動機,這種正則表達式引擎在進行字符匹配時會發生回溯(backtracking)。而一旦發生回溯,那其消耗的時間就會變得很長,有可能是幾分鐘,也有可能是幾個小時,時間長短取決於回溯的次數和複雜度。看到這裡,可能大家還不是很清楚什麼是回溯,還有點懵。
  • MySQL如何使用正則表達式?(代碼示例)
    MySQL支持基於正則表達式和regexp運算符的另一種模式的匹配操作。下面本篇文章就帶大家認識一下MySQL的正則表達式(Regexp),通過示例來簡單介紹在MySQL中如何使用正則表達式(Regexp),希望對大家有所幫助。
  • 代碼詳解:Python正則表達式的終極使用指南
    雖然想要實現上述功能聽起來很繁瑣,但是如果使用Python正則表達式模塊,就可以使這一操作更加簡單。假設要在一篇特定的文章中找出標點符號的數量。以狄更斯的作品文本為例。你通常會怎麼做?但如果有re模塊,則只需兩行代碼:import repattern = r"[;.,–]"print(len(re.findall(pattern,string)))-19本文討論的是最常用的正則表達式模式,以及一些經常使用的正則表達式函數。什麼是正則表達式?
  • 如何徹底搞懂面向 Web 開發者的正則表達式?
    對於正則表達式,開發者如何跳出雲裡霧裡的謎團?作者 | Chris Achard譯者 | 彎月,責編 | 郭芮以下為譯文:正則表達式能在字符串中查找匹配特定模式的子字符串。在JavaScript中,可以通過斜線 / / 來創建,也可以通過new RegExp()來創建,然後就能使用match、test、replace等方法。你可以事先定義正則表達式,也可以在調用方法時隨時定義。每次匹配一個字符,將多個字符放到方括號 [] 中可以匹配多個匹配的字符。用橫線 - 匹配字符範圍。
  • 正則表達式B - 實際表單小例子
    正則表達式的實際運用 數字、字母、下劃線組成的6-15位字符,且不能以數字開頭 編寫思路詳解:1.首先獲取input按鈕 2.然後我們要在用戶輸入完之後檢測,所以可以用onchange改變之後 3.然後再獲取用戶輸入的內容val = this.value 4.獲取內容後對其內容進行用正則表達式檢測 reg = /^
  • 新手上路:圖文解讀助你理解和使用正則表達式
    選自janmeppe.com作者:Jan Meppe機器之心編譯參與:韓放、杜偉這篇博客是關於正則表達式(regex)的插圖指南,旨在為那些從來沒有使用過正則表達式,想嘗試但又望而生畏的新手提供一個簡單介紹。
  • Python「正則表達式」詳解(上)
    大家好,今天我們一起學習以下Python中的「正則表達式」,說到正則表達式,大家可能比較陌生,不過我卻要告訴你,你每天都在使用正則表達式,不要不承認,就問你最常見的,瀏覽器每天用不?淘寶經常逛不?你在搜索框裡輸入幾個文字,按下回車,就出來大量結果,你想想這是怎麼辦到的,是正則表達式,可以好不誇張的講,沒有正則表達式,就沒有搜尋引擎。
  • 正則表達式與神經網絡的深度融合
    現有的工作主要利用規則去約束神經網絡,通常使用多任務學習 (multitask learning)、知識蒸餾(knowledge distillation)等方法,或是根據規則的啟發設計新的神經網絡結構。然而,兩類方法仍然需要大量數據用於訓練,並且前者的神經網絡本身仍然是一個黑盒子,缺乏可解釋性,後者後者難以利用已有規則進行轉化或是通過專家手工構建。
  • 正則表達式:如何匹配一個或多個字符?
    讀懂正則表達式就這麼簡單匹配純文本Ben是一個正則表達式。因為本身是純文本,所以看起來可能不像是一個正則表達式,但它的確是。正則表達式可以包含純文本(甚至可以只包含純文本)。當然,像這樣使用正則表達式是一種浪費,但把它作為我們學習正則表達式的起點還是很不錯的。
  • PHP正則表達式的快速學習方法
    此外,象JavaScript這種客戶端的腳本語言也提供了對正則表達式的支持。由此可見,正則表達式已經超出了某種語言或某個系統的局限,成為人們廣為接受的概念和功能。正則表達式可以讓用戶通過使用一系列的特殊字符構建匹配模式,然後把匹配模式與數據文件、程序輸入以及WEB頁面的表單輸入等目標對象進行比較,根據比較對象中是否包含匹配模式,執行相應的程序。
  • Python程式語言:如何運用正則表達式
    這篇文章,小編要和大家分享的知識是Python語言的正則表達式,以及自己學到的使用方法!學會正則表達式可以幫助我們抓取網絡信息,正則表達式又叫Re庫!這裡我們要了解什麼是正則表達式,正則表達式是用來簡潔表達一組字符串的表達式!
  • 正則表達式A - 方法及特殊字符用法
    課程大綱 1.正則表達式的概念及作用 2.正則表達式的創建方法 3.正則表達式的用法 正則表達式概念: 正則表達式是由普通字符及特殊字符組成的對字符串進行過濾的邏輯公式 正則表達式的創建方式: 1.字面量方式創建 (隱式創建): var reg = /正則表達式/gi;
  • 【第160期】指尖上的正則表達式–入門篇
    Perl的正則表達式源自於Henry Spencer編寫的regex,之後已演化成了pcre(Perl兼容正則表達式Perl Compatible Regular Expressions),pcre是一個由Philip Hazel開發的、為很多現代工具所使用的庫。正則表達式的第一個實用應用程式即為Unix中的 qed 編輯器。