JS Regular Expressions
In JS, a Regular Expression is an object denoted by a sequence of characters that forms a search pattern.
Whenever we try searching for some pattern in a text, we can use this “search pattern” to describe what we are looking for.
A regular expression basically provides a means to perform all types of search and replace operations on texts.
It can be a single character, or a more complex pattern.
In JS, a regular expression is represented as an object of the built-in RegExp class and also incorporated in methods of strings.
Syntax
A regular expression in JS consists of a pattern and optional flags (or modifiers).
There are two ways to create a regular expression object:
Method 1:
var regexp = new RegExp(pattern, flags);Method 2:
var regexp = /pattern/flags;The description about the parameters are given here:
- pattern − A string that defines the pattern of the regular expression or another regular expression.
- flags − An optional string comprising any of the flags or modifiers such as “g”, “i”, and “m” that indicate global, case-insensitive, and multi-line matches, respectively.
The front slashes /.../ tell JS that we are going to create a regular expression.
In both the cases regexp becomes an object of the built-in RegExp class.
However, we follow the second method throughout this tutorial.
An example of the second method is given below.
Example:
var regexp = /techguruspeaks/gim;The above example gives the following information:
- /techguruspeaks/gim is a regular expression
- techguruspeaks is a search pattern
- g, i, and m are flags or modifiers
Using Flags
Flags are used to perform case-insensitive and global searches:
| Flag | Description |
|---|---|
| g | It performs a global match (find all matches instead of stopping after the first match) |
| i | It performs case-insensitive matching |
| m | It performs multi-line matching |
Coding Example:
<html>
<body>
<script>
function testFunction() {
var text = "Hi from TechGuruSpeaks! \nWelcome to TechGuruSpeaks.com";
var regexp1 = /TechGuruSpeaks/g;
var result1 = text.match(regexp1);
document.write(result1 + "<br>");
var regexp2 = /techguruspeaks/i;
var result2 = text.match(regexp2);
document.write(result2 + "<br>");
var regexp3 = /TechGuruSpeaks/m;
var result3 = text.match(regexp3);
document.write(result3 + "<br>");
}
testFunction();
</script>
</body>
</html>
Output:
TechGuruSpeaks,TechGuruSpeaks
TechGuruSpeaks
TechGuruSpeaks
Using Regular Expression Patterns
Brackets are used to find a range of characters:
| Expression | Description |
|---|---|
| [xyz] | Find any character between the brackets |
| [^xyz] | Find any character not between the brackets |
| [0-9] | Find any character between the brackets (any digit) |
| [^0-9] | Find any character not between the brackets (any non-digit) |
| (p|q) | Find any of the alternatives specified |
Using Meta characters
Meta characters are characters with a special meaning:
Meta character | Description |
. | Find a single character, except newline or line terminator |
\w | Find a word character |
\W | Find a non-word character |
\d | Find a digit |
\D | Find a non-digit character |
\s | Find a whitespace character |
\S | Find a non-whitespace character |
\b | Find a match at the beginning/end of a word, beginning like this: \bHI, end like this: HI\b |
\B | Find a match, but not at the beginning/end of a word |
\0 | Find a NULL character |
\n | Find a new line character |
\f | Find a form feed character |
\r | Find a carriage return character |
\t | Find a tab character |
\v | Find a vertical tab character |
\xxx | Find the character specified by an octal number xxx |
\xdd | Find the character specified by a hexadecimal number dd |
\udddd | Find the Unicode character specified by a hexadecimal number dddd |
Using Quantifiers
| Quantifier | Description |
|---|---|
| n+ | Matches any string that contains at least one n |
| n* | Matches any string that contains zero or more occurrences of n |
| n? | Matches any string that contains zero or one occurrences of n |
| n{X} | Matches any string that contains a sequence of X n‘s |
| n{X, Y} | Matches any string that contains a sequence of X to Y n‘s |
| n{X,} | Matches any string that contains a sequence of at least X n‘s |
| n$ | Matches any string with n at the end of it |
| ^n | Matches any string with n at the beginning of it |
| ?=n | Matches any string that is followed by a specific string n |
| ?!n | Matches any string that is not followed by a specific string n |
Using String Methods
In JS, regular expressions are frequently used with the two string methods – search() and replace().
| Method | Description |
|---|---|
| search() | It uses an expression to search for a match, and returns the position of the match. |
| replace() | It returns a modified string where the pattern is replaced. |
Coding Example:
<html>
<body>
<script>
function testFunction() {
//given string
var text = "Hi from TechGuru! Welcome to techguruspeaks.com";
//pattern 1
var regexp1 = /tech/i;
var result1 = text.search(regexp1);
document.write(result1 + "<br>");
//pattern 2
var regexp2 = /Hi/i;
var result2 = text.replace(regexp2, "Hello");
document.write(result2 + "<br>");
}
testFunction();
</script>
</body>
</html>
Output:
8
Hello from TechGuru! Welcome to techguruspeaks.com
Important RegExp object methods
| Method | Description |
|---|---|
| test() | It tests for a match in a string. Returns true or false. |
| exec() | It tests for a match in a string. Returns the first match. |
Coding Example:
<html>
<body>
<script>
function testFunction() {
//given string
var str = "Welcome to techguruspeaks.com";
//pattern 1
var regexp1 = new RegExp("tech");
var test1 = regexp1.test(str);
var exec1 = regexp1.exec(str);
document.write(test1 + "<br>");
document.write(exec1 + "<br>");
//pattern 2
var regexp2 = new RegExp("Tech");
var test2 = regexp2.test(str);
var exec2 = regexp2.exec(str);
document.write(test2 + "<br>");
document.write(exec2 + "<br>");
}
testFunction();
</script>
</body>
</html>
Output:
true
tech
false
null