首頁 >web前端 >html教學 >如何使用JavaScript RegExp進行不區分大小寫的匹配?

如何使用JavaScript RegExp進行不區分大小寫的匹配?

王林
王林轉載
2023-09-07 17:09:021593瀏覽

如何使用JavaScript RegExp进行不区分大小写的匹配?

在本教學中,我們將學習如何使用 JavaScript RegExp 執行不區分大小寫的匹配。

正規表示式可以透過兩種方式宣告 -

  • 使用正規表示式文字,以斜線開頭和結尾,並且 圖案放置在兩者之間。
  • 呼叫 RegExp 物件建構函數,該建構函數採用 用於建立正規表示式的參數。

使用者可以使用下列語法來建立正規表示式。

文法

//Using a regular expression literal
const regex = /tutorial/i
//Using RegExp constructor
const regex2 = new RegExp('tutorial', 'i')

在上面的語法中,創建正規表示式來匹配單字“tutorial”,修飾符“i”表示它可以匹配具有這些字元的任何子字串,無論其大小寫(“TuToRial”,“Tutorial” ,等)。

使用字串 match() 方法

match() 方法是 JavaScript 中 String 物件的一部分。它用於將字串與 RegExp 或正則表達式進行匹配。

使用者可以依照下列語法使用 match() 方法與 JavaScript RegExp 執行不區分大小寫的匹配。

文法

text.match(regex)

在上面的語法中,「text」是一個需要使用正規表示式檢查的字串。 “regex”是正規表示式模式。

參數

  • regex - 它是正規表示式或將轉換為正規表示式的字串。

回傳類型

  • 傳回所有符合項目的數組,如果未找到符合項,則傳回 null。

範例

在下面給出的範例中,我們使用 match() 方法來執行不區分大小寫的匹配。我們正在檢查單擊按鈕時的匹配方法結果並將其輸出。

<html>
<body>
   <h4>Performming Case Insensitive Matching with RegExp using <i>
   match() </i> method</h4>
   <button onclick="check()">Check</button>
   <p>Original Text: Welcome to Tutorialspoint</p>
   <p>Text To Match: tutorial </p>
   <p id="output"></p>
   <script>
      const text='Welcome to Tutorialspoint'
      const regex=/tutorial/i
      function check(){
         //Using the match method
         let result=text.match(regex)
         document.getElementById('output').innerHTML='Mached Text: '+result
      }
   </script>
</body>
</html>

上面的輸出顯示 match() 方法傳回符合的子字串「Tutorial」。

使用字串 search() 方法

search() 方法是 JavaScript 中 String 物件的一部分。它用於根據 RegExp 或正規表示式搜尋字串的子字串。

使用者可以依照下列語法使用 search() 方法與 JavaScript RegExp 進行不區分大小寫的匹配。

文法

text.search(regex)

在上面的語法中,「text」是一個字串,「regex」是正規表示式模式。

參數

  • regex - 它是正規表示式或將轉換為正規表示式的字串。

回傳類型

  • 返回第一個匹配的位置,如果未找到匹配,則返回 -1。

範例

在下面給出的範例中,我們使用了 search() 方法,並在按一下按鈕時檢查 search() 方法的結果並將其輸出。

<html>
<body>
   <h4>Performming Case Insensitive Matching with RegExp using <i>
   search() </i> method.</h4>
   <p>Text: Welcome to Tutorialspoint</p>
   <p>Text to Match: tutorial</p>
   <button onclick="check()">Check</button>
   <p id="output"></p>
   <p><b>Note:</b>The search() method returns the position of first
   match</p>
   <script>
      const text='Welcome to Tutorialspoint'
      const regex=/tutorial/i
      function check(){
         //Using search method
         let result=text.search(regex)
         document.getElementById('output').innerHTML='Result: '+result
      }
   </script>
</body
</html>

在上面的輸出中,使用者可以看到 search() 方法傳回子字串「Tutorial」的起始位置。

使用 RegExp test() 方法

test() 方法是 JavaScript 中 RegExp 物件的一部分。它用於根據 RegExp 或正規表示式測試字串。

使用者可以依照下列語法使用 test() 方法與 JavaScript RegExp 進行不區分大小寫的匹配。

文法

regex.test(text)

在上面的語法中,「text」是一個需要使用正規表示式檢查的字串。 “regex”是正規表示式模式。

參數

  • 文字/字串 - 這是需要測試的文字或字串。

回傳類型

  • 如果沒有找到符合則傳回 false,否則傳回 true。

範例

在下面給出的範例中,我們使用了 test() 方法。

<html>
<body>
   <p>Performming Case Insensitive Matching with JavaScript RegExp using <i>
   test() </i> method</p>
   <p>Text: Welcome to Tutorialspoint</p>
   <p>Text to Match: tutorial</p>
   <button onclick="check()">Check</button>
   <p id="output"></p>
   <p><b>Note:</b> The test() method returns true if there is a match, else
   returns false.</p>
   <script>
      const text = 'Welcome to Tutorialspoint'
      const regex = /tutorial/i
      function check() {
         //Using the test method
         let result = regex.test(text)
         document.getElementById('output').innerHTML = 'Result: ' + result
      }
   </script>
</body>
</html>

在上面的輸出中,使用者可以看到 test() 方法傳回 true,因為文字中存在「Tutorial」子字串。

使用 RegExp exec() 方法

exec() 方法是 JavaScript 中 RegExp 物件的一部分。它用於將字串與 RegExp 或正則表達式進行匹配。

使用者可以依照下列語法使用 exec() 方法與 JavaScript RegExp 執行不區分大小寫的匹配。

文法

regex.exec(text)

在上面的語法中,「text」是一個字串,「regex」是正規表示式模式。

參數

  • Text/string - 需要符合的文字或字串。

回傳類型

  • 傳回所有符合項目的數組,如果未找到符合項,則傳回 null。

範例

在下面給出的範例中,我們使用了 exec() 方法。

<html>
<body>
   <p>Performming Case Insensitive Matching with JavaScript RegExp using
   <i> exec() </i> method</p>
   <button onclick="check()">Check</button>
   <p>Text: Welcome to Tutorialspoint</p>
   <p id="output"></p>
   <script>
      const text='Welcome to Tutorialspoint'
      const regex=/tutorial/i
      function check(){
         //Using the exec method
         let result=regex.exec(text)
         document.getElementById('output').innerHTML='Result: '+result
      }
   </script>
</body>
</html>

上面的輸出顯示 exec() 方法傳回符合的子字串「Tutorial」。

在本教程中,我們討論了使用 RegExp 執行不區分大小寫匹配的四種方法。前兩個方法是字串 match() 和 search() 方法。另外兩個方法是 RegExp test() 和 exec() 方法。

以上是如何使用JavaScript RegExp進行不區分大小寫的匹配?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除