Article Categories

Selected Reading

Explain JavaScript Regular Expression modifiers with examples

Javascript Web Development Object Oriented Programming

JavaScript regular expression modifiers are optional flags that modify how the pattern matching behaves. These modifiers enable features like case-insensitive matching, global searching, and multiline matching.

Available Modifiers

Modifier	Name	Description
`g`	Global	Returns all matches instead of stopping at the first match
`i`	Case-insensitive	Ignores case when matching letters
`m`	Multiline	Treats ^ and $ as start/end of each line, not just the string

Using the Global (g) Modifier

The g modifier finds all matches in the string:

<!DOCTYPE html>
<html>
<body>
   <h2>Global Modifier Example</h2>
   <div id="global-result"></div>
   
   <script>
      let text = "The cat in the hat sat on the mat";
      let result = document.getElementById("global-result");
      
      // Without g modifier - finds only first match
      let withoutG = text.match(/at/);
      result.innerHTML = "Without g: " + withoutG + "<br>";
      
      // With g modifier - finds all matches
      let withG = text.match(/at/g);
      result.innerHTML += "With g: " + withG.join(", ");
   </script>
</body>
</html>

Using the Case-Insensitive (i) Modifier

The i modifier ignores letter case:

<!DOCTYPE html>
<html>
<body>
   <h2>Case-Insensitive Modifier Example</h2>
   <div id="case-result"></div>
   
   <script>
      let text = "JavaScript is AWESOME and javascript is fun";
      let result = document.getElementById("case-result");
      
      // Case-sensitive search
      let caseSensitive = text.match(/javascript/g);
      result.innerHTML = "Case-sensitive: " + (caseSensitive ? caseSensitive.join(", ") : "null") + "<br>";
      
      // Case-insensitive search
      let caseInsensitive = text.match(/javascript/gi);
      result.innerHTML += "Case-insensitive: " + caseInsensitive.join(", ");
   </script>
</body>
</html>

Using the Multiline (m) Modifier

The m modifier makes ^ and $ match the start and end of each line:

<!DOCTYPE html>
<html>
<body>
   <h2>Multiline Modifier Example</h2>
   <div id="multiline-result"></div>
   
   <script>
      let text = "First line\nSecond line\nThird line";
      let result = document.getElementById("multiline-result");
      
      result.innerHTML = "Text: " + text.replace(/<br>/g, "<br>") + "<br><br>";
      
      // Without m modifier - matches only string start
      let withoutM = text.match(/^Second/);
      result.innerHTML += "Without m: " + (withoutM || "null") + "<br>";
      
      // With m modifier - matches line start
      let withM = text.match(/^Second/m);
      result.innerHTML += "With m: " + (withM || "null");
   </script>
</body>
</html>

Combining Multiple Modifiers

You can combine modifiers for more powerful pattern matching:

<!DOCTYPE html>
<html>
<body>
   <h2>Combined Modifiers Example</h2>
   <div id="combined-result"></div>
   
   <script>
      let text = "Hello WORLD\nThis is a beautiful WORLD\nWorld of programming";
      let result = document.getElementById("combined-result");
      
      result.innerHTML = "Text:<br>" + text.replace(/<br>/g, "<br>") + "<br><br>";
      
      // Using gi modifiers (global + case-insensitive)
      let matches = text.match(/world/gi);
      result.innerHTML += "All 'world' matches (gi): " + matches.join(", ") + "<br>";
      
      // Using gim modifiers (global + case-insensitive + multiline)
      let lineStarts = text.match(/^world/gim);
      result.innerHTML += "Lines starting with 'world' (gim): " + (lineStarts ? lineStarts.join(", ") : "none");
   </script>
</body>
</html>

Practical Example

Here's a complete demonstration showing all modifiers in action:

<!DOCTYPE html>
<html>
<head>
   <style>
      body { font-family: Arial, sans-serif; margin: 20px; }
      .demo { background: #f5f5f5; padding: 15px; margin: 10px 0; }
      .result { color: #006600; font-weight: bold; }
   </style>
</head>
<body>
   <h2>Regular Expression Modifiers Demo</h2>
   
   <div class="demo">
      <strong>Sample Text:</strong><br>
      <span id="sample-text"></span>
   </div>
   
   <button onclick="runDemo()">Run Modifier Examples</button>
   
   <div id="results"></div>
   
   <script>
      let sampleText = "Hello World\nThis is a BEAUTIFUL world\nWorld of JavaScript";
      document.getElementById("sample-text").innerHTML = sampleText.replace(/<br>/g, "<br>");
      
      function runDemo() {
         let resultsDiv = document.getElementById("results");
         resultsDiv.innerHTML = "<h3>Results:</h3>";
         
         // Global modifier example
         let globalMatch = sampleText.match(/world/g);
         resultsDiv.innerHTML += "<p><strong>/world/g</strong> (global): " + 
                                (globalMatch ? globalMatch.join(", ") : "null") + "</p>";
         
         // Case-insensitive modifier example
         let caseInsensitiveMatch = sampleText.match(/WORLD/i);
         resultsDiv.innerHTML += "<p><strong>/WORLD/i</strong> (case-insensitive): " + 
                                (caseInsensitiveMatch || "null") + "</p>";
         
         // Multiline modifier example
         let multilineMatch = sampleText.match(/^World/m);
         resultsDiv.innerHTML += "<p><strong>/^World/m</strong> (multiline): " + 
                                (multilineMatch || "null") + "</p>";
         
         // Combined modifiers example
         let combinedMatch = sampleText.match(/world/gi);
         resultsDiv.innerHTML += "<p><strong>/world/gi</strong> (global + case-insensitive): " + 
                                combinedMatch.join(", ") + "</p>";
      }
   </script>
</body>
</html>

Conclusion

Regular expression modifiers enhance pattern matching capabilities in JavaScript. Use g for finding all matches, i for case-insensitive searches, and m for multiline text processing. These modifiers can be combined to create powerful and flexible search patterns.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

711 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next