Author: Michal Szymanski
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).
Previous lesson Next lesson
Spread the word:
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download