Are you struggling to understand Regular Expressions (Regex) in JavaScript? π€ Don't worry! This guide will simplify everything for you.
π€¨ What is Regex?
Regex (Regular Expressions) is a search pattern used to match text. It helps in finding, extracting and replacing patterns in strings.
β°ββ€ Example:
let text = "Hello, World!";
let pattern = /World/; // A regex to find "World"
console.log(pattern.test(text)); // true β
β¨ Basic Regex Methods
| Method | Description |
|---|---|
| test() | Returns true or false if a match is found. β
β |
| match() | Returns an array of matches or null if no match. π |
β°ββ€ Example of test()
let sentence = "The cat jumps!";
let regex = /cat/;
console.log(regex.test(sentence)); // true β
β°ββ€ Example of match()
let sentence = "Rainy days are beautiful!";
let regex = /rainy/i;
console.log(sentence.match(regex)); // [ 'Rainy', index: 0, input: 'Rainy days are beautiful!', groups: undefined ]
π Note: i makes the search case-insensitive.
π Special Characters & Patterns
| Symbol | Meaning |
|---|---|
. |
Matches any single character except newline. |
[] |
Match any one character inside the brackets. |
[^ ] |
Negated character class (excludes specified characters). |
* |
Matches 0 or more occurrences. |
+ |
Matches 1 or more occurrences. |
? |
Matches 0 or 1 occurrence (lazy match). |
{min,max} |
Matches a range of occurrences. |
π₯ Example: Match Words with . (Wildcard)
let sentence = "The bat, cat, and hat are in the room!";
let regex = /b.t/g; // Matches words like "bat", "bit", "bot" etc.
console.log(sentence.match(regex)); // [ 'bat' ]
π Note: g finds all occurrences instead of stopping at the first match.
π© Using Flags (g, i, m)
| Flag | Meaning |
|---|---|
g |
Global match (find all matches). π |
i |
Case-insensitive match. π‘π |
m |
Multiline match. π |
π₯ Example: Case-Insensitive Search with i
let text = "HELLO hello Hello hElLo";
let regex = /hello/ig;
console.log(text.match(regex)); // [ 'HELLO', 'hello', 'Hello', 'hElLo' ]
β£οΈ Matching Numbers & Letters
| Pattern | Description |
|---|---|
\d |
Matches digits (0-9). π’ |
\D |
Matches non-digits. π«π’ |
\w |
Matches letters, numbers, and underscore. π€ |
\W |
Matches non-word characters. π«π€ |
\s |
Matches whitespace (spaces, tabs, newlines). βͺ |
\S |
Matches non-whitespace characters. π‘ |
π₯ Example: Extracting Digits
let price = "The total is $120.99!";
let regex = /\d+/g;
console.log(price.match(regex)); // ['120', '99']
β³ Greedy vs. Lazy Matching
π§ Greedy Matching: Takes as much text as possible.
let str = "abc123def456";
let regex = /\d+/;
console.log(str.match(regex)); // ['123'] (greedy, matches longest possible number)
π§ Lazy Matching: Stops at the first match.
let regexLazy = /\d+?/;
console.log(str.match(regexLazy)); // ['1'] (lazy, matches shortest possible number)
π Anchors ^ and $
| Symbol | Meaning |
|---|---|
^ |
Matches start of string. π |
$ |
Matches end of string. π |
π₯ Example: Matching Start & End
let phrase = "Start here, end there";
let startRegex = /^Start/;
let endRegex = /there$/;
console.log(startRegex.test(phrase)); // true β
console.log(endRegex.test(phrase)); // true β
π More Learning Resources β
π Check out my Technical Presentation
π MDN Web Docs
πβ Master Regex with this Checklist
π Understand what Regex is and how it works π€
π Learn basic Regex methods: test(), match() β
π Practice special characters (., *, +, ?, {} etc.) π£
π Explore Regex flags like g, i, m π
π Learn to match numbers, letters and whitespace (\d, \w, \s, etc.) π’
π Understand greedy vs. lazy matching β³
π Use anchors (^, $) to match start or end of a string π―
β‘ Happy Coding! β‘