如何簡化 JavaScript 中正則表示式的使用?


在本教程中,我們將學習如何簡化 JavaScript 中**正則表示式**的使用。有些人可能第一次聽說正則表示式這個詞。它與 JavaScript 無關,但可以用於任何程式語言。

正則表示式的簡單定義是:它是一系列字元,也稱為**Regex**或**RegExp**。它可以是一個簡短或複雜的序列。

讓我們透過以下部分的示例來了解正則表示式的需求。

為什麼我們應該使用正則表示式?

假設您正在開發應用程式,需要從客戶端獲取使用者的電子郵件。現在,使用者可以在輸入欄位中輸入任何內容,提交表單,並可能向您的資料庫生成垃圾郵件記錄。作為程式設計師,您可以在使用者提交表單之前處理此問題並驗證電子郵件。您還在許多網站上看到過,如果您在電子郵件中出現語法錯誤並提交,它們會顯示類似“圖片無效。”的訊息。

要驗證輸入的電子郵件,一種方法是在程式碼中新增過多的 if-else 條件,或者使用正則表示式來匹配字串中的模式。透過使用正則表示式,我們可以建立各種模式,並將過多的 if-else 條件替換為單個正則表示式。

使用者可以看到下面的正則表示式,用於驗證電子郵件。

"^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$"

作為一名聰明的程式設計師,你不應該害怕看到上面的表示式。我們將深入瞭解正則表示式的運作方式,並簡化其使用。

語法

使用者可以遵循以下語法來使用正則表示式。

/pattern/moddifiers

正則表示式中的模式

有一些基本的模式可以建立正則表示式。一旦您學習了基本模式,就可以為正則表示式建立高階模式。

讓我們逐一檢視基本模式。

  • **[a-z]** - 它允許使用者匹配括號中給定字元範圍內的任何字元。此外,我們還可以為大寫字母和其他字元新增範圍。

  • **[0-9]** - 它允許使用者匹配括號中給定數字範圍內的任何數字。

  • **(a|b)** - 它允許查詢以“|”分隔的任何備選字串。例如,它在字串中查詢 a 或 b。

  • **\d** - 它只接受數字。

  • **\s** - 它只接受空格。

  • **\b** - 它在單詞的開頭或結尾處查詢匹配項。例如,\bword 用於匹配單詞的開頭,而 word\b 用於匹配單詞的結尾。

  • **a+** - 它與包含至少一個“a”的字串匹配。

  • **a*** - 它與包含 0 到無限個“a”的字串匹配。

  • **a?** - 它與包含零個或單個字元“a”的字串匹配。

正則表示式中的修飾符

正則表示式共有三個修飾符。讓我們逐一看看。

  • **m** - 簡而言之,它匹配多行。它不會在字串結尾停止匹配,而是在換行符邊界停止匹配。

  • **i** - 當我們設定修飾符 i 時,它執行不區分大小寫的匹配,這意味著它匹配字串而不考慮字元是大寫還是小寫。

  • **g** - 它全域性匹配模式。否則,匹配在模式的第一次出現時停止。當我們設定標誌“g”時,它將匹配所有模式。

示例

在下面的示例中,我們建立了基本的正則表示式,並將匹配特定字串中的模式。此外,我們將使用“i”作為修飾符進行不區分大小寫的匹配。

<!DOCTYPE html>
<html>
<head>
   <title> Simplify the usage of Regular Expressions with JavaScript. </title>
</head>
<body>
   <h2> Simplify the usage of Regular Expressions with JavaScript. </h2>
   <h4> Mathcing for word "Website" in the given original string.</h4>
   <div id="input"> </div>
   <div id="index"> </div>
   <script>
      let indexDiv = document.getElementById("index");
      let inputDiv = document.getElementById("input");
      let string = "TutorialsPoint is a website for tutorials. "
      let res = string.search(/Website/i); // regular expression passed as a parameter.
      inputDiv.innerHTML = "Original String: "+string;
      indexDiv.innerHTML = `Index of "Website": ` + res;
   </script>
</body>
</html>

在上面的輸出中,使用者可以看到“Website”在索引 20 處匹配。

結論

在本教程中,我們學習了正則表示式的基礎知識。我們瞭解瞭如何在正則表示式中使用模式和修飾符。現在,使用者可以輕鬆理解正則表示式,並透過少量練習,可以獨立建立正則表示式。

更新於:2022年7月14日

240 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.