How to perform Case Insensitive matching with JavaScript RegExp?

In this tutorial, we will learn how to perform Case Insensitive matching with JavaScript RegExp.

Regular expressions can be declared in two ways −

  • Using regular expressions literal, which start and end with slashes, and the pattern is placed in between.
  • Calling the RegExp object constructor, which takes the pattern and flags in the parameters to create a regular expression.

Users can use the below syntax to create a regular expression.

Syntax

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

In the above syntax, the regular expressions are created to match the word "tutorial," and the modifier "i" indicates that it can match any substring with these characters irrespective of its case ("TuToRial", "Tutorial", etc.).

Using the String match() Method

The match() method is part of the String object in JavaScript. It is used to match a string against a RegExp or regular expression.

Users can follow the below syntax to perform case insensitive matching with JavaScript RegExp using the match() method.

Syntax

text.match(regex)

In the above syntax, the "text" is a string that needs to be checked using a regular expression. "regex" is the regular expression pattern.

Parameters

  • regex − it is the regular expression or a string that will be converted into a regular expression.

Return Type

  • Returns an array of all the matches or null if no match is found.

Example

In the below given example, we have used the match() method to perform caseinsensitive matching. We are checking the match methods result on a button click and outputting it.

<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>

The above output shows that the match() method returns the matched sub-string "Tutorial".

Using the String search() Method

The search() method is part of the String object in JavaScript. It is used to search a substring of a string against a RegExp or regular expression.

Users can follow the below syntax to perform case insensitive matching with JavaScript RegExp using the search() method.

Syntax

text.search(regex)

In the above syntax, the "text" is a String, and the "regex" is the regular expression pattern.

Parameters

  • regex − it is the regular expression or a string that will be converted into a regular expression.

Return Type

  • Returns the position of the first matching or -1 if no match is found.

Example

In the below given example, we have used the search() method and checked the search() method's result on a button click and outputting it.

<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>

In the above output, users can see that the search() method returns the start position of the sub-string "Tutorial".

Using the RegExp test() Method

The test() method is part of the RegExp object in JavaScript. It is used to test a string against a RegExp or regular expression.

Users can follow the below syntax to perform case insensitive matching with JavaScript RegExp using the test() method.

Syntax

regex.test(text)

In the above syntax, the "text" is a string which is needed to be checked using regular expression. "regex" is the regular expression pattern.

Parameters

  • Text/string − it is the text or string which needs to be tested.

Return Type

  • Returns false if it does not finds a match else true.

Example

In the below given example, we have used the test() method.

<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>

In the above output, users can see that the test() method returns true as the "Tutorial" sub-string is present in the text.

Using the RegExp exec() Method

The exec() method is part of the RegExp object in JavaScript. It is used to match a string against a RegExp or regular expression.

Users can follow the below syntax to perform case insensitive matching with JavaScript RegExp using the exec() method.

Syntax

regex.exec(text)

In the above syntax, the "text" is a string, and the "regex" is the regular expression pattern.

Parameters

  • Text/string − it is the text or string which needs to be matched.

Return Type

  • Returns an array of all the matches or null if no match is found.

Example

In the below given example, we have used the exec() method.

<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>

The above output shows that the exec() method returns the matched sub-string "Tutorial".

In this tutorial, we discussed four approaches to perform case insensitive matching with RegExp. The first two methods are the string match() and search() methods. The other two methods are the RegExp test() and exec() methods.

Updated on: 15-Sep-2022

3K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements