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 ๐ฏ
๐ Keep practicing with real-world examples ๐ช
Top comments (0)