JavaScript regular expressions


What Is a Regular Expression?

A regular expression is a sequence of characters that forms a search pattern.

When you search for data in a text, you can use this search pattern to describe what you are searching for.

A regular expression can be a single character, or a more complicated pattern.

Regular expressions can be used to perform all types of text search and text replace operations.

Syntax


                      /pattern/modifiers;
                  

Example


                    var patt = /mdbootstrap/i;
                

Example explained:

/mdbootstrap/i  is a regular expression.

mdbootstrap  is a pattern (to be used in a search).

i  is a modifier (modifies the search to be case-insensitive).


Using String Methods

In JavaScript, regular expressions are often used with the two string methods: search() and replace().

The search() method uses an expression to search for a match, and returns the position of the match.

The replace() method returns a modified string where the pattern is replaced.


Using String search() With a String

The search() method searches a string for a specified value and returns the position of the match:


                      var str = "Visit mdbootstrap!";
                      var n = str.search("mdbootstrap");  // Return 6
                

Using String search() With a Regular Expression

Use a regular expression to do a case-insensitive search for "MDBootstrap" in a string:


                    var str = "Visit our website mdbootstrap";
                    var n = str.search(/mdbootstrap/i);   // Return 18
                

Using String replace() With a String

The replace() method replaces a specified value with another value in a string:


                      <button onclick="myFunction()">Try it</button>
      
                      <p id="example-1">Please visit Microsoft!</p>
                  
                      <script>
                        function myFunction() {
                            var str = document.getElementById("example-1").innerHTML;   // Get the string "Please visit Microsoft!"
                            var txt = str.replace("Microsoft", "MDBootstrap");          // Replace "Microsoft" with "MDBootstrap"
                            document.getElementById("example-1").innerHTML = txt;       // Put replaced string into a paragraph with ID = "example-1"
                        }
                    </script>
                

Live preview

Please visit Microsoft!


Use String replace() With a Regular Expression

Use a case insensitive regular expression to replace Microsoft with MDBootstrap in a string:


                    <button onclick="myFunction2()">Try it</button>
      
          <p id="example-2">Please visit Microsoft!</p>
      
          <script>
            function myFunction2() {
                var str = document.getElementById("example-2").innerHTML;  // Get the string "Please visit Microsoft!"
                var txt = str.replace(/microsoft/i, "MDBootstrap");         // Replace "microsoft" (event if it's lowercase) with "MDBootstrap"
                document.getElementById("example-2").innerHTML = txt;      // Put replaced string into a paragraph with ID = "example-1"
            }
        </script>
                

Note: Regular expression arguments (instead of string arguments) can be used in the methods above. Regular expressions can make your search much more powerful (case insensitive for example).


Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.