Flash cards
Review the key moves
What is the main idea behind JavaScript RegExp?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ text = "Visit ExampleSite";Put the learning moves in the order that makes the concept easiest to apply.
Regular Expressions
A Regular Expression is a sequence of characters that forms a search pattern .
Regex is a common shorthand for a regular expression.
JavaScript RegExp is an Object for handling Regular Expressions.
RegExp are be used for
- Text searching
- Text replacing
- Text validation
Example
let text = "Visit ExampleSite";
let n = text.search(/ExampleSite/i);Example explained
i is a modifier (modifies the search to be case-insensitive).
Regular Expression Syntax
/
pattern
/
modifier flags
;Using String Methods
Regular expressions are often used with the string methods :
| Method | Description |
|---|---|
| match( regex ) | Returns an Array of results |
| replace( regex ) | Returns a new String |
| search( regex ) | Returns the index of the first match |
Using String match()
Runnable example
let text = "Visit ExampleSite";
let n = text.match(/ExampleSite/);Using String replace()
Runnable example
let text = "Visit Microsoft!";
let result = text.replace(/Microsoft/i, "ExampleSite");Using String search()
Runnable example
let text = "Visit ExampleSite";
let n = text.search(/ExampleSite/);RexExp Alternation (OR)
In a regular expression an alternation is denoted with a vertical line character | .
An alternation matches any of the alternatives separated with | .
Example
let text = "Black, white, red, green, blue, yellow.";
let result = text.match(/red|green|blue/g);JavaScript Regex Flags
/pattern/
flagsRegular expression flags are parameters that can modify how a pattern is used, such as making it case-insensitive or global.
These are the most common
| Flag | Description |
|---|---|
| /g | Performs a global match (find all) |
| /i | Performs case-insensitive matching |
| /u | Enables Unicode support (new 2015) |
The /g Flag (Global)
The /g flag matches all occurrences of the pattern, rather than just the first one.
Example
let text = "Is this all there is?";
const pattern = /is/g;
let result = text.match(pattern);The /i Flag (Insensitive)
The /i flag makes a match case-insensitive: /abc/i matches "abc", "AbC", "ABC".
Example
let text = "Visit ExampleSite";
const pattern = /ExampleSite/i;
let result = text.match(pattern);Learn More
JavaScript RegExp Flags
RexExp Metacharacters
// Match words
const pattern = /\w/;Metacharacters are characters with a special meaning.
They can be used to match digits, words, spaces, and more.
These are the most common
| Meta | Description |
|---|---|
| \d | Matches Digits |
| \w | Matches Words |
| \s | Matches Spaces |
RegExp \d (digits) Metacharacter
The \d metacharacter matches digits.
Example
let text = "Give 100%!";
const pattern = /\d/g;
let result = text.match(pattern);RegExp \w (word) Metacharacter
The \w metacharacter matches word characters.
A word character is a character a-z, A-Z, 0-9, including _ (underscore).
Example
let text = "Give 100%!";
const pattern = /\w/g;
let result = text.match(pattern);Learn More
JavaScript RegExp Metacharacters
JavaScript RegExp Quantifiers
// Match at least one zero
const pattern = /0+/;Quantifiers define the numbers of characters or expressions to match.
These are the most common
| Code | Description |
|---|---|
| x* | Matches zero or more occurrences of x |
| x? | Matches zero or one occurrences of x |
| x{n} | Matches n occurences of x |
The ? Quantifier
x ? matches zero or one occurrences of x.
Example
let text = "1, 100 or 1000?";
const pattern = /10?/g;
let result = text.match(pattern);Learn More
JavaScript RegExp Quantifiers
Regular Expression Assertions
// Match beginning of string
const pattern = /^ExampleSite/;
// Match end of string
const pattern = /ExampleSite$/;Assertions matches Boundaries and Lookarounds
String Boundaries and Word Boundaries.
Lookarounds: Lookaheads and Lookbehinds.
These are the most common
| Syntax | Name | Description |
|---|---|---|
| ^ | String boundary | Matches the beginning of a string |
| $ | String boundary | Matches the end of a string |
| \b | Word boundary | Matches the beginning or end of a word |
| (?=...) | Lookahead | Matches the subsequent string |
| (?<=...) | Lookbehind | Matches the previous string |
RegExp ^ Metacharacter
The ^ metacharacter matches the beginning of a string.
Examples
const pattern = /^ExampleSite/;
let text = "ExampleSite Tutorial";
let result = pattern.test(text); // trueRegExp $ Metacharacter
The $ metacharacter matches the end of a string.
Runnable example
const pattern = /ExampleSite$/;
let text = "Hello ExampleSite";
let result = pattern.test(text); // trueLearn More
JavaScript RegExp Assertions
JavaScript RegExp Character Classes
// Match Digits
const pattern = /[0-9]/;Character Classes are characters enclosed in square brackets [] .
A character class matches any character from a set within brackets.
These are the most common
| Class | Description |
|---|---|
| [a] | Matches the character between the brackets |
| [abc] | Matches all characters between the brackets |
| [a-z] | Matches all characters in the range from a to z |
Example [0-9]
let text = "More than 1000 times";
const pattern = /[0-9]/g;
let result = text.match(pattern);Learn More
JavaScript RegExp Flags
JavaScript RegExp Character Classes
JavaScript RegExp Meta Characters
JavaScript RegExp Assertions
JavaScript RegExp Quantifiers
JavaScript RegExp Patterns
JavaScript RegExp Objects
JavaScript RegExp Methods