## Regular Expressions (RegEx) in JavaScript 🔍 You already know how to search strings with methods like: ```javascript text.includes('JavaScript'); ``` or: ```javascript text.startsWith('https'); ``` Those work perfectly when you know the **exact text** you're searching for. But what if you want to ask: ```text Does this contain ANY number? Does this look like an email? Find every hashtag. Extract the year, month and day. Find words beginning with "Java". Replace every group of spaces. Check whether a username follows a pattern. ``` Now you're no longer searching for one exact string. You're searching for a: # Pattern 🧩 That's exactly what **Regular Expressions** are designed for. --- # What Is a Regular Expression? 🧠 A **Regular Expression**, usually shortened to **RegEx** or **regex**, is a pattern used to search, match, extract, validate, split, or replace text. Example: ```javascript /\d+/ ``` This means roughly: > Find one or more digits. So: ```javascript console.log( /\d+/.test('Order 123') ); ``` returns: ```text true ``` Because: ```text 123 ``` matches the pattern. --- # What Can RegEx Do? 🚀 Regular expressions are commonly used for: ```text Searching 🔍 Validation ✅ Extraction ✂️ Replacement 🔄 Splitting text 📚 ``` Examples: ```text Find all numbers Extract hashtags Check username format Find repeated whitespace Parse structured text Replace patterns Find dates inside text ``` --- # RegEx Can Look Intimidating 😵 You may see something like: ```javascript /^(?=.*[A-Z])(?=.*\d).{8,}$/ ``` and think: ```text What language is this?! 😭 ``` Don't panic. Regex becomes much easier when you stop reading the whole pattern at once. Break it into pieces: ```text ^ (?=.*[A-Z]) (?=.*\d) .{8,} $ ``` Every piece has one job. That's exactly how we'll learn it. --- # Creating a Regular Expression 🏗️ [JavaScript](/courses/javascript) gives us two main ways: ```text Regex literal RegExp constructor ``` --- # Regex Literal Example: ```javascript const pattern = /javascript/i; ``` Basic structure: ```text /pattern/flags ``` Where: ```text pattern → what to match flags → change matching behavior ``` --- # Simple Literal Example ```javascript const pattern = /hello/; console.log( pattern.test( 'hello world' ) ); ``` Output: ```text true ``` --- # `RegExp` Constructor You can also write: ```javascript const pattern = new RegExp( 'hello', 'i' ); ``` This represents: ```javascript /hello/i ``` --- # Literal vs Constructor 🧠 Use a literal when the pattern is known while writing the code: ```javascript /\d+/ ``` Use `RegExp()` when the pattern needs to be built dynamically: ```javascript const word = 'JavaScript'; const pattern = new RegExp( word, 'i' ); ``` --- # Constructor Escaping Can Be Tricky 🚨 Suppose the regex is: ```javascript /\d+/ ``` With the constructor, the pattern is inside a [JavaScript](/courses/javascript) string. So you need: ```javascript const pattern = new RegExp( '\\d+' ); ``` Why two backslashes? Because: ```text JavaScript string parser ↓ uses one level of escaping Regex parser ↓ uses another ``` This is one reason literals are easier for static regex patterns. --- # Dynamic User Text Can Contain Regex Characters 🚨 Suppose: ```javascript const search = 'hello.world'; ``` If you directly create: ```javascript new RegExp(search); ``` the: ```text . ``` means: > Match almost any character. But perhaps you wanted the literal text: ```text hello.world ``` Modern JavaScript provides: ```javascript RegExp.escape() ``` for this purpose. Example: ```javascript const search = 'hello.world'; const pattern = new RegExp( RegExp.escape( search ), 'i' ); ``` Now the user-provided text is treated as literal regex content instead of regex syntax. Compatibility with older environments should still be checked when using newer APIs like this. --- # The `test()` Method ✅ One of the easiest regex methods is: ```javascript regex.test(string) ``` It returns: ```text true ``` or: ```text false ``` Example: ```javascript const pattern = /javascript/i; console.log( pattern.test( 'I love JavaScript' ) ); ``` Output: ```text true ``` --- # RegEx Flags 🚩 Flags change how a regular expression behaves. Example: ```javascript /hello/i ``` The: ```text i ``` means: > Ignore uppercase/lowercase differences. JavaScript currently supports these flags: | Flag | Meaning | | ---- | --------------------------------------- | | `g` | Global — continue finding matches | | `i` | Case-insensitive | | `m` | Multiline behavior for `^` and `$` | | `s` | DotAll — `.` can match line terminators | | `u` | Unicode-aware mode | | `v` | Enhanced Unicode sets mode | | `y` | Sticky matching | | `d` | Include match indices | For beginner code, the most common are: ```text g i m s ``` --- # `i` — Case-Insensitive 🔤 Without: ```javascript /hello/ ``` this: ```javascript console.log( /hello/.test( 'HELLO' ) ); ``` returns: ```text false ``` But: ```javascript console.log( /hello/i.test( 'HELLO' ) ); ``` returns: ```text true ``` --- # `g` — Global 🌍 Without `g`, many operations stop after the first match. Example: ```javascript const text = 'cat cat cat'; console.log( text.match(/cat/) ); ``` The first match is found. With: ```javascript /cat/g ``` you can retrieve all matches: ```javascript console.log( text.match(/cat/g) ); ``` Output: ```text [ 'cat', 'cat', 'cat' ] ``` --- # Combining Flags Flags can be combined: ```javascript /hello/gi ``` Meaning: ```text g → global i → case-insensitive ``` Example: ```javascript const text = 'Hello hello HELLO'; console.log( text.match(/hello/gi) ); ``` Output: ```text [ 'Hello', 'hello', 'HELLO' ] ``` --- # `m` — Multiline 📄 Normally: ```text ^ $ ``` refer to the beginning and end of the whole input. With: ```text m ``` they can also work around individual line boundaries. Example: ```javascript const text = `apple banana apple`; console.log( text.match(/^apple/gm) ); ``` This can match `apple` at the beginning of multiple lines. --- # `s` — DotAll 🌊 Normally: ```text . ``` doesn't match line terminators. Example: ```javascript /a.b/ ``` matches: ```text aXb ``` But not normally: ```text a b ``` With the `s` flag: ```javascript /a.b/s ``` the dot can also cross the newline. --- # `u` — Unicode Mode 🌍 The: ```text u ``` flag makes regex parsing and matching work with Unicode code points more appropriately. Example: ```javascript const pattern = /\u{1F600}/u; ``` This can represent: ```text 😀 ``` Unicode gets deep quickly, so for beginner regex remember: > Use Unicode-aware patterns when working seriously with international text and characters outside simple ASCII. --- # `v` — Unicode Sets Mode 🌍 Modern JavaScript also supports: ```text v ``` which extends Unicode-aware regex capabilities, particularly around character sets. It's an advanced feature. Also: ```text u ``` and: ```text v ``` are alternative Unicode modes—you don't use them together. For most beginner regex tasks, you won't need `v` yet. --- # `d` — Match Indices 📍 The: ```text d ``` flag asks JavaScript to include exact match index ranges. Example: ```javascript const match = /JavaScript/d.exec( 'Learn JavaScript today' ); console.log( match.indices ); ``` This can tell you where the match begins and ends. Useful for: ```text Editors Syntax highlighting Text processing Precise extraction ``` --- # `y` — Sticky Matching 📌 The: ```text y ``` flag makes matching begin specifically at the regex's current: ```javascript lastIndex ``` rather than scanning forward freely. It's useful in advanced parsing/tokenization. For normal search: ```text g ``` is much more common. --- # Character Classes 🔤 Character classes let you describe **types of characters** instead of exact characters. Examples: ```text \d \w \s ``` --- # `\d` — Digit 🔢 ```javascript /\d/ ``` matches one ASCII digit: ```text 0–9 ``` Example: ```javascript console.log( /\d/.test( 'Room 7' ) ); ``` Output: ```text true ``` --- # One Digit vs Many Digits This: ```javascript /\d/ ``` matches one digit. This: ```javascript /\d+/ ``` matches one or more consecutive digits. Example: ```javascript const text = 'Order number: 12345'; console.log( text.match(/\d+/) ); ``` Match: ```text 12345 ``` --- # `\D` — Non-Digit Capital versions usually represent the opposite. ```javascript /\D/ ``` matches a character that isn't an ASCII digit. Example: ```javascript console.log( /\D/.test('123A') ); ``` Output: ```text true ``` --- # `\w` — Word Character ```javascript /\w/ ``` matches characters roughly equivalent to: ```text A-Z a-z 0-9 _ ``` Example: ```javascript console.log( /\w+/.test( 'hello_123' ) ); ``` Output: ```text true ``` Important: > `\w` does not mean "every letter in every human language." For international Unicode text, other techniques such as Unicode property escapes may be more appropriate. --- # `\W` — Non-Word Character ```javascript /\W/ ``` matches characters outside the `\w` set. Examples: ```text spaces punctuation symbols ``` --- # `\s` — Whitespace ```javascript /\s/ ``` matches whitespace such as: ```text space tab newline ``` Example: ```javascript console.log( /\s/.test( 'Hello World' ) ); ``` Output: ```text true ``` --- # `\S` — Non-Whitespace ```javascript /\S/ ``` matches a non-whitespace character. --- # Character Class Cheat Sheet 🧠 ```text \d → digit \D → non-digit \w → word character \W → non-word character \s → whitespace \S → non-whitespace ``` --- # Custom Character Classes `[ ]` 📦 Suppose you want to match: ```text a b or c ``` Use: ```javascript /[abc]/ ``` Example: ```javascript console.log( /[abc]/.test( 'cat' ) ); ``` Output: ```text true ``` because `c` appears. --- # Character Ranges Instead of: ```javascript /[abcdefghijklmnopqrstuvwxyz]/ ``` write: ```javascript /[a-z]/ ``` Likewise: ```javascript /[A-Z]/ ``` uppercase ASCII letters. And: ```javascript /[0-9]/ ``` digits. --- # Combine Ranges ```javascript /[a-zA-Z0-9]/ ``` matches an ASCII letter or digit. Add underscore: ```javascript /[a-zA-Z0-9_]/ ``` which is similar to: ```javascript /\w/ ``` for basic ASCII-style word characters. --- # Negated Character Classes `[^ ]` The: ```text ^ ``` inside the beginning of a character class means: > Match anything except these characters. Example: ```javascript /[^0-9]/ ``` matches a non-digit character. Example: ```javascript console.log( /[^0-9]/.test( '123A' ) ); ``` Output: ```text true ``` --- # The Dot `.` Wildcard 🎯 Outside a character class: ```text . ``` means roughly: > Match almost any single character. Example: ```javascript /c.t/ ``` can match: ```text cat cot cut c@t ``` But not normally a newline unless the `s` flag is used. --- # Escaping Special Characters 🚨 Many regex characters have special meanings: ```text . * + ? ( ) [ ] { } ^ $ | \ / ``` What if you literally want a dot? Use: ```javascript \. ``` Example: ```javascript /example\.com/ ``` This matches: ```text example.com ``` with an actual period. --- # Why This Matters This: ```javascript /example.com/ ``` means: ```text example + any character + com ``` So it could match: ```text exampleXcom ``` That's probably not what you intended. Use: ```javascript /example\.com/ ``` when you mean a literal dot. --- # Quantifiers 🔢 Quantifiers describe **how many times** something may appear. The major ones: ```text * + ? {n} {n,} {n,m} ``` --- # `*` — Zero or More ```javascript /ab*/ ``` means: ```text a followed by zero or more b's ``` Possible matches: ```text a ab abb abbb ``` --- # `+` — One or More ```javascript /ab+/ ``` requires at least one `b`. Matches: ```text ab abb abbb ``` Not: ```text a ``` --- # `?` — Zero or One ```javascript /colou?r/ ``` means the: ```text u ``` is optional. So it matches: ```text color ``` and: ```text colour ``` Very useful. 🔥 --- # `{n}` — Exactly n ```javascript /\d{4}/ ``` means: ```text exactly four digits ``` Example: ```text 2026 ``` --- # `{n,}` — n or More ```javascript /\d{3,}/ ``` means: > At least three digits. Matches: ```text 123 1234 123456 ``` --- # `{n,m}` — Between n and m ```javascript /\d{2,4}/ ``` means: ```text 2 to 4 digits ``` --- # Quantifier Cheat Sheet 🧠 | Quantifier | Meaning | | ---------- | --------- | | `*` | 0 or more | | `+` | 1 or more | | `?` | 0 or 1 | | `{3}` | exactly 3 | | `{3,}` | 3 or more | | `{3,5}` | 3 to 5 | --- # Greedy Matching 🍽️ Regex quantifiers are normally **greedy**. Meaning: > Match as much as possible while still allowing the overall pattern to succeed. Suppose: ```javascript const html = 'HelloWorld'; ``` Pattern: ```javascript /.*<\/b>/ ``` The: ```text .* ``` tries to consume as much as possible. So it may match: ```text HelloWorld ``` as one large match. --- # Lazy Matching 😌 Add: ```text ? ``` after a quantifier to make it lazy. Example: ```javascript /.*?<\/b>/g ``` Now: ```javascript console.log( html.match( /.*?<\/b>/g ) ); ``` can return: ```text [ 'Hello', 'World' ] ``` --- # Greedy vs Lazy 🧠 ```text .* → as much as possible ``` ```text .*? → as little as possible ``` Likewise: ```text + → greedy ``` ```text +? → lazy ``` --- # Anchors ⚓ Anchors don't match normal characters. Instead, they describe positions. The two major anchors are: ```text ^ $ ``` --- # `^` — Start ```javascript /^Hello/ ``` means: > `Hello` must appear at the beginning. Example: ```javascript console.log( /^Hello/.test( 'Hello World' ) ); ``` Output: ```text true ``` But: ```javascript console.log( /^Hello/.test( 'Say Hello' ) ); ``` Output: ```text false ``` --- # `$` — End ```javascript /world$/ ``` means: > `world` must appear at the end. Example: ```javascript console.log( /world$/.test( 'hello world' ) ); ``` Output: ```text true ``` --- # Validate the Entire String Suppose you want **exactly five digits**. This: ```javascript /\d{5}/ ``` will also match inside: ```text abc12345xyz ``` If the entire string must match: ```javascript /^\d{5}$/ ``` Now: ```javascript console.log( /^\d{5}$/.test( '12345' ) ); ``` Output: ```text true ``` But: ```javascript console.log( /^\d{5}$/.test( 'A12345' ) ); ``` Output: ```text false ``` This is why anchors are extremely important for validation. --- # Word Boundaries `\b` 🧱 Suppose you want: ```text cat ``` as a word. Pattern: ```javascript /cat/ ``` would also match inside: ```text category ``` Use: ```javascript /\bcat\b/ ``` Now it matches standalone `cat` in something like: ```text The cat sleeps ``` but not normally: ```text category ``` --- # `\B` — Non-Word Boundary The opposite: ```javascript /\Bcat/ ``` requires that position not to be a word boundary. It's less common in beginner code. --- # Alternation `|` — OR 🔀 The: ```text | ``` means: > OR Example: ```javascript /cat|dog/ ``` matches: ```text cat ``` or: ```text dog ``` Example: ```javascript console.log( /cat|dog/.test( 'I have a dog' ) ); ``` Output: ```text true ``` --- # Grouping `( )` 📦 Parentheses group parts of a regex. Example: ```javascript /(cat|dog)s?/ ``` Can match: ```text cat cats dog dogs ``` The group: ```text (cat|dog) ``` means: ```text cat OR dog ``` and: ```text s? ``` means optional `s`. --- # Capturing Groups 🎣 Parentheses also capture matching text. Example: ```javascript const match = /(\d{4})-(\d{2})-(\d{2})/ .exec( 'Date: 2026-09-06' ); ``` Now: ```javascript console.log( match[0] ); ``` Output: ```text 2026-09-06 ``` --- # Captured Groups ```javascript console.log( match[1] ); ``` Output: ```text 2026 ``` Then: ```javascript console.log( match[2] ); ``` Output: ```text 09 ``` And: ```javascript console.log( match[3] ); ``` Output: ```text 06 ``` Think: ```text match[0] → whole match match[1] → first capturing group match[2] → second capturing group ``` --- # Non-Capturing Groups `(?: )` Sometimes you want grouping but don't need the captured value. Use: ```javascript (?:...) ``` Example: ```javascript /(?:cat|dog)s?/ ``` It still groups: ```text cat|dog ``` but doesn't create a numbered capture for that group. --- # Why Use Non-Capturing Groups? Use them when parentheses are needed only for pattern structure: ```text Grouping ✅ Capturing unnecessary ❌ ``` This can make complex regex easier to reason about. --- # Named Capturing Groups 🏷️ Instead of remembering: ```text match[1] match[2] match[3] ``` you can give groups names. Example: ```javascript const pattern = /(?\d{4})-(?\d{2})-(?\d{2})/; ``` Match: ```javascript const match = '2026-09-06' .match(pattern); ``` Then: ```javascript console.log( match.groups.year ); ``` Output: ```text 2026 ``` And: ```javascript console.log( match.groups.month ); ``` Output: ```text 09 ``` Much more readable. 🔥 --- # Backreferences 🔁 A capturing group can be referenced again later. Example: ```javascript /(['"]).*?\1/ ``` The: ```text (['"]) ``` captures either: ```text ' ``` or: ```text " ``` Then: ```text \1 ``` means: > Match the same thing captured by group 1. Backreferences are powerful for detecting repeated structures. --- # Named Backreferences If you use a named group: ```javascript /(?['"]).*?\k/ ``` the: ```text \k ``` refers to the earlier named capture. This is clearer in complex regex. --- # Lookahead 👀➡️ Lookahead checks what's coming next **without consuming it as part of the match**. --- # Positive Lookahead `(?=...)` Pattern: ```javascript /foo(?=bar)/ ``` means: > Match `foo`, but only when immediately followed by `bar`. Example: ```javascript console.log( 'foobar'.match( /foo(?=bar)/ )?.[0] ); ``` Output: ```text foo ``` But: ```javascript console.log( 'foobaz'.match( /foo(?=bar)/ ) ); ``` No match. --- # Negative Lookahead `(?!...)` ```javascript /foo(?!bar)/ ``` means: > Match `foo` only when it is NOT followed by `bar`. Example: ```javascript console.log( 'foobaz'.match( /foo(?!bar)/ )?.[0] ); ``` Output: ```text foo ``` --- # Lookbehind 👈👀 Lookbehind checks what appears immediately before the match. --- # Positive Lookbehind `(?<=...)` Example: ```javascript /(?<=\$)\d+/ ``` means: > Match digits that are preceded by `$`. Use: ```javascript console.log( '$500'.match( /(?<=\$)\d+/ )?.[0] ); ``` Output: ```text 500 ``` The `$` itself isn't part of the returned match. --- # Negative Lookbehind `(? Match digits not preceded by `$`. Lookaround becomes especially useful for extracting context-dependent text. --- # Regex Methods vs String Methods 🧠 Regular expressions work through both: ```text RegExp methods ``` and: ```text String methods ``` Important ones include: ```text test() exec() match() matchAll() search() replace() replaceAll() split() ``` --- # `test()` — Does It Match? ✅ ```javascript const pattern = /^\d+$/; console.log( pattern.test( '12345' ) ); ``` Output: ```text true ``` Perfect when you only need: ```text yes / no ``` --- # `exec()` — Detailed Match 🔍 ```javascript const pattern = /(?\d{4})-(?\d{2})-(?\d{2})/; const match = pattern.exec( 'Today is 2026-09-06.' ); ``` Now: ```javascript console.log( match[0] ); ``` Output: ```text 2026-09-06 ``` --- # Match Index ```javascript console.log( match.index ); ``` gives the starting position of the match. You also get: ```javascript match.groups ``` when named capturing groups are used. --- # `match()` String method: ```javascript text.match(regex) ``` Example: ```javascript const text = 'Hello hello HELLO'; console.log( text.match( /hello/gi ) ); ``` Output: ```text [ 'Hello', 'hello', 'HELLO' ] ``` --- # `match()` Without `g` Without global mode, `match()` can return detailed information similar to a regex execution result. Example: ```javascript const match = 'Order 123' .match( /(\d+)/ ); console.log( match[1] ); ``` Output: ```text 123 ``` --- # `search()` 📍 ```javascript const text = 'Hello JavaScript'; console.log( text.search( /JavaScript/ ) ); ``` Output: ```text 6 ``` If there's no match: ```text -1 ``` --- # `replace()` 🔄 Example: ```javascript const text = 'Hello World'; console.log( text.replace( /World/, 'JavaScript' ) ); ``` Output: ```text Hello JavaScript ``` --- # Replace Every Match Use a global regex: ```javascript const text = 'cat cat cat'; console.log( text.replace( /cat/g, 'dog' ) ); ``` Output: ```text dog dog dog ``` --- # Replacement Function 🔥 The replacement can be a callback. Suppose: ```text hello_world_from_js ``` should become: ```text helloWorldFromJs ``` Use: ```javascript const text = 'hello_world_from_js'; const result = text.replace( /_([a-z])/g, (_, letter) => letter.toUpperCase() ); console.log(result); ``` Output: ```text helloWorldFromJs ``` The captured letter is passed into the replacement [function](/javascript/functions-in-javascript). --- # `split()` With Regex ✂️ Normally: ```javascript 'one,two,three' .split(','); ``` But regex lets the separator represent a pattern. Suppose: ```javascript const text = 'one two three'; ``` Use: ```javascript const words = text.split( /\s+/ ); console.log(words); ``` Output: ```text [ 'one', 'two', 'three' ] ``` It doesn't matter whether there was: ```text 1 space 2 spaces 10 spaces ``` --- # `matchAll()` 🔍🔍 `matchAll()` gives detailed information for every match. Example: ```javascript const text = 'Error 404, Error 500'; const pattern = /Error (?\d+)/g; ``` Then: ```javascript for ( const match of text.matchAll( pattern ) ) { console.log( match.groups.code ); } ``` Output: ```text 404 500 ``` Very useful when you need: ```text All matches + Capturing groups + Positions ``` --- # `matchAll()` Requires an Appropriate Global Regex 🚨 When passing a `RegExp` to `matchAll()`, use a global pattern: ```javascript /.../g ``` Example: ```javascript text.matchAll( /\d+/g ); ``` --- # Global Regex State and `lastIndex` 🚨 This surprises many developers. Regexes using: ```text g ``` or: ```text y ``` can keep matching state in: ```javascript regex.lastIndex ``` Example: ```javascript const pattern = /\d/g; console.log( pattern.test('1') ); console.log( pattern.lastIndex ); ``` Repeated calls can behave differently because the regex remembers where the previous match ended. --- # A `test()` Gotcha 😵 Consider: ```javascript const pattern = /^\d+$/g; console.log( pattern.test('123') ); console.log( pattern.test('123') ); ``` Depending on the regex state, repeated testing with a global regex can surprise you. For simple validation, don't add: ```text g ``` unless you actually need global iteration. Prefer: ```javascript /^\d+$/ ``` for validation. --- # Extracting Hashtags #️⃣ Suppose: ```javascript const post = 'Learning #JavaScript and #WebDev with #coding'; ``` Pattern: ```javascript /#(\w+)/g ``` Use: ```javascript const hashtags = [ ...post.matchAll( /#(\w+)/g ) ].map( match => match[1] ); console.log( hashtags ); ``` Output: ```text [ 'JavaScript', 'WebDev', 'coding' ] ``` --- # Unicode Hashtags 🌍 Remember: ```text \w ``` is fairly ASCII-oriented. If your hashtag system should support international letters, Unicode property escapes can help. Example: ```javascript /#[\p{L}\p{N}_]+/gu ``` Where: ```text \p{L} → Unicode letters \p{N} → Unicode numbers ``` This is an advanced but useful internationalization feature. --- # Unicode Property Escapes 🌍 Modern regex can match Unicode categories. Example: ```javascript /\p{L}+/gu ``` matches sequences of Unicode letters. That can include many writing systems—not just: ```text A-Z a-z ``` Likewise: ```javascript /\p{N}+/gu ``` matches Unicode numeric characters. This becomes important when writing truly international applications. --- # Practical Validation ✅ Regex is often used for validation. But there is a major rule: > **Don't confuse "matches a simple pattern" with "is definitely valid in the real world."** For example: ```text Email address URL Phone number Date IP address Credit card ``` can have surprisingly complex real-world rules. Regex can help with basic format checking, but application validation may require more. --- # Username Validation 👤 This is a great regex use case because **you define the rules**. Requirement: ```text 3–20 characters letters numbers underscore ``` Pattern: ```javascript /^[a-zA-Z0-9_]{3,20}$/ ``` Use: ```javascript console.log( /^[a-zA-Z0-9_]{3,20}$/ .test( 'asif_123' ) ); ``` Output: ```text true ``` --- # Understanding the Username Pattern 🧠 ```text ^ → start [a-zA-Z0-9_] → allowed characters {3,20} → length between 3 and 20 $ → end ``` Read it like English. That's the best way to understand regex. --- # Basic Email Format Checking 📧 A practical lightweight browser-side pattern could be: ```javascript const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; ``` Example: ```javascript console.log( emailPattern.test( 'alice@example.com' ) ); ``` Output: ```text true ``` But don't think: ```text Regex passed → email definitely exists ✅ ``` It only checks a basic format. The only reliable way to know whether an email belongs to someone is usually through application verification such as sending a confirmation message. --- # Don't Build a Giant Email Regex 😅 Email standards contain many edge cases. For normal applications: ```text Basic client-side format check + Server-side validation + Email verification ``` is often more useful than a 300-character regex nobody can maintain. --- # Phone Number Validation 📱 Phone formats vary enormously across countries. A simple E.164-like format check might be: ```javascript const phonePattern = /^\+?[1-9]\d{7,14}$/; ``` Possible: ```text +971501234567 ``` But don't assume one regex correctly validates every country's local phone numbering rules. For international applications, use proper phone-number parsing/validation logic when accuracy matters. --- # ZIP Code Example 🇺🇸 If your application specifically expects a US ZIP code: ```javascript const zipPattern = /^\d{5}(?:-\d{4})?$/; ``` Matches: ```text 12345 ``` and: ```text 12345-6789 ``` This works because the business rule is specific. --- # Date Format Validation 📅 To check the **shape**: ```text YYYY-MM-DD ``` you might use: ```javascript const datePattern = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/; ``` This prevents things like: ```text month 19 ``` But: ```text 2026-02-31 ``` can still match the regex. Why? Because regex understands the **text pattern**, not the complete calendar. So: > Regex can validate format; date logic should validate actual dates. --- # URL Validation 🌐 Avoid giant hand-written URL regexes when the platform already provides URL parsing. Example: ```javascript function isValidUrl( value ) { try { const url = new URL(value); return ( url.protocol === 'http:' || url.protocol === 'https:' ); } catch { return false; } } ``` For actual URLs, built-in URL parsing is often more reliable and maintainable than a giant regex. --- # Password Rules 🔐 Suppose your application requires: ```text At least 8 characters 1 lowercase 1 uppercase 1 digit ``` You could use lookaheads: ```javascript const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/; ``` Break it down: ```text ^ → beginning (?=.*[a-z]) → contains lowercase (?=.*[A-Z]) → contains uppercase (?=.*\d) → contains digit .{8,} → at least 8 characters $ → end ``` --- # Regex Isn't Always Best for Password Rules 🧠 This is also perfectly readable: ```javascript function isValidPassword( password ) { return ( password.length >= 8 && /[a-z]/.test(password) && /[A-Z]/.test(password) && /\d/.test(password) ); } ``` Sometimes several small regex checks are clearer than one giant expression. Good code is about readability too. --- # Basic Credit Card Shape 💳 You might check a simplified shape: ```javascript /^(?:\d{4}[ -]?){3}\d{4}$/ ``` But this doesn't prove: ```text The card number is real The issuer is valid The card exists The account can be charged ``` Actual card handling involves payment-provider validation and should follow proper security/payment practices. --- # IPv4 — Regex Isn't Always the Best Tool 🌐 A naive pattern: ```javascript /^(?:\d{1,3}\.){3}\d{1,3}$/ ``` would accept: ```text 999.999.999.999 ``` even though those octets are invalid. Sometimes clearer logic is better: ```javascript function isIPv4( value ) { const parts = value.split('.'); if ( parts.length !== 4 ) { return false; } return parts.every( part => { if ( !/^\d+$/.test( part ) ) { return false; } const number = Number(part); return ( number >= 0 && number <= 255 ); } ); } ``` Regex is powerful. But: > Don't use regex when normal JavaScript expresses the rule more clearly. --- # Extracting Structured Data ✂️ Suppose: ```javascript const log = 'User 42 purchased product 901'; ``` Pattern: ```javascript /User (\d+) purchased product (\d+)/ ``` Use: ```javascript const match = log.match( /User (\d+) purchased product (\d+)/ ); ``` Then: ```javascript console.log( match[1] ); ``` Output: ```text 42 ``` And: ```javascript console.log( match[2] ); ``` Output: ```text 901 ``` --- # Named Groups Make Extraction Better 🔥 ```javascript const pattern = /User (?\d+) purchased product (?\d+)/; ``` Then: ```javascript const { userId, productId } = log.match( pattern ).groups; ``` Much clearer. --- # Find Every Number 🔢 ```javascript const text = 'Item 12 costs 50 and quantity is 3'; const numbers = text.match( /\d+/g ); console.log(numbers); ``` Output: ```text [ '12', '50', '3' ] ``` Remember: The matches are strings. Convert if necessary: ```javascript const values = numbers.map(Number); ``` --- # Remove Repeated Spaces 🧹 Suppose: ```javascript const text = 'JavaScript is awesome'; ``` Use: ```javascript const cleaned = text.replace( /\s+/g, ' ' ); console.log(cleaned); ``` Output: ```text JavaScript is awesome ``` Extremely useful. --- # Trim + Collapse Whitespace 🔥 ```javascript function normalizeWhitespace( value ) { return value .trim() .replace( /\s+/g, ' ' ); } ``` Example: ```javascript normalizeWhitespace( ' Learn JavaScript today ' ); ``` Result: ```text Learn JavaScript today ``` --- # Add Thousands Separators 🔢 A classic lookahead example: ```javascript const number = '1234567890'; const formatted = number.replace( /\B(?=(\d{3})+(?!\d))/g, ',' ); console.log( formatted ); ``` Output: ```text 1,234,567,890 ``` For actual numeric formatting, however, APIs like: ```javascript Intl.NumberFormat ``` are often more appropriate. Regex is useful here mainly as a lookahead demonstration. --- # RegEx Is Not a Replacement for Dedicated APIs 🚨 Before writing an enormous regex, ask: ```text Is there already a JavaScript API for this? ``` Examples: ```text URL → URL class Numbers / currencies → Intl.NumberFormat Dates → Date / modern date libraries / relevant APIs HTML → DOM parser JSON → JSON.parse() ``` Trying to parse every structured format with regex can make code fragile. --- # Don't Parse HTML With Regex 😅 Regex can occasionally find simple fragments of text that resemble [HTML](/courses/html). But [HTML](/courses/html) is a structured language with: ```text Nested elements Attributes Comments Escaping Malformed markup Scripts/styles ``` For actual HTML processing in the browser, use the DOM. You learned it for a reason. 🌳 --- # Escaping User Search Text 🔐 Suppose you build search highlighting: ```javascript function createSearchPattern( query ) { return new RegExp( RegExp.escape( query ), 'gi' ); } ``` Now if the user searches: ```text C++ ``` or: ```text hello.world ``` the characters: ```text + . ``` are treated as literal text instead of regex syntax. That's an important distinction between: ```text User input AS text ``` and: ```text User input AS regex syntax ``` --- # RegExp Instance Properties 🔍 A regex is an object: ```javascript const regex = /hello/gi; ``` You can inspect properties: ```javascript regex.source ``` Result: ```text hello ``` And: ```javascript regex.flags ``` Result: ```text gi ``` You may also see: ```javascript regex.global regex.ignoreCase regex.multiline regex.dotAll regex.unicode regex.sticky regex.hasIndices ``` --- # Common RegEx Mistakes 🚨 ## 1️⃣ Forgetting to Escape `.` Wrong for a literal domain: ```javascript /example.com/ ``` Better: ```javascript /example\.com/ ``` --- # 2️⃣ Forgetting Anchors During Validation This: ```javascript /\d{5}/ ``` matches inside: ```text abc12345xyz ``` For exactly five digits: ```javascript /^\d{5}$/ ``` --- # 3️⃣ Using `g` for Simple Validation Avoid: ```javascript const pattern = /^\d+$/g; ``` for repeated `test()` validation. The global regex can retain `lastIndex` state. Use: ```javascript const pattern = /^\d+$/; ``` instead. --- # 4️⃣ Forgetting Double Escaping in `RegExp()` Literal: ```javascript /\d+/ ``` Constructor: ```javascript new RegExp( '\\d+' ); ``` because the constructor pattern is a JavaScript string. --- # 5️⃣ Writing a Massive Regex Nobody Understands 😵 Possible: ```javascript const regex = /^(?=...)(?!...)[...]{...}$/; ``` But if the team can't understand or maintain it, consider breaking the validation into readable steps. --- # 6️⃣ Assuming Regex Validation Means Real-World Validity Example: ```text Email matches ``` does not mean: ```text Mailbox exists ``` Likewise: ```text Credit card shape matches ``` does not mean: ```text Valid payment method ``` Regex validates patterns. Business validation often requires more. --- # 7️⃣ Forgetting Case Sensitivity ```javascript /javascript/ ``` doesn't match: ```text JavaScript ``` Use: ```javascript /javascript/i ``` when case should be ignored. --- # 8️⃣ Confusing `*` and `+` Remember: ```text * → zero OR more ``` So: ```javascript /a*/ ``` can match an empty string. But: ```text + → one OR more ``` --- # 9️⃣ Forgetting Greedy Behavior ```javascript /<.*>/ ``` may match much more than expected. Consider: ```javascript /<.*?>/ ``` when a lazy match is truly appropriate. --- # 🔟 Assuming `\w` Means Every Unicode Word Character It doesn't simply represent every letter used worldwide. For international text, consider Unicode-aware patterns such as: ```javascript /\p{L}+/gu ``` when appropriate. --- # 🧪 Mini Challenge 1 What does: ```javascript /^\d+$/ ``` mean? ### Answer ```text ^ → beginning \d+ → one or more digits $ → end ``` So: > The entire string must contain only digits. --- # 🧪 Mini Challenge 2 Predict: ```javascript console.log( /javascript/i.test( 'JavaScript' ) ); ``` ### Answer ```text true ``` The: ```text i ``` flag ignores case. --- # 🧪 Mini Challenge 3 What does this match? ```javascript /colou?r/ ``` ### Answer Both: ```text color ``` and: ```text colour ``` because: ```text u? ``` means the `u` is optional. --- # 🧪 Mini Challenge 4 What's the difference? ```javascript /\d*/ ``` vs: ```javascript /\d+/ ``` ### Answer ```text \d* → zero or more digits ``` ```text \d+ → one or more digits ``` The first pattern can match even when no digit exists. --- # 🧪 Mini Challenge 5 What does this return? ```javascript const text = 'one two three'; console.log( text.split( /\s+/ ) ); ``` ### Answer ```text [ 'one', 'two', 'three' ] ``` `\s+` matches one or more whitespace characters. --- # 🧪 Mini Challenge 6 What is captured? ```javascript const match = '2026-09-06' .match( /(\d{4})-(\d{2})-(\d{2})/ ); ``` ### Answer ```text match[0] → 2026-09-06 match[1] → 2026 match[2] → 09 match[3] → 06 ``` --- # 🧪 Mini Challenge 7 Why does this fail? ```javascript const pattern = new RegExp( '\d+' ); ``` ### Answer Because the backslash is being interpreted inside the JavaScript string. Use: ```javascript const pattern = new RegExp( '\\d+' ); ``` Or for a static pattern: ```javascript /\d+/ ``` --- # 🧠 Quick Recap ## Create Literal: ```javascript /hello/i ``` Dynamic: ```javascript new RegExp( pattern, flags ); ``` --- # Common Flags ```text g → global i → case-insensitive m → multiline anchors s → dot matches line terminators u / v → Unicode modes d → indices y → sticky ``` --- # Character Classes ```text \d → digit \D → non-digit \w → ASCII-style word character \W → non-word character \s → whitespace \S → non-whitespace ``` --- # Custom Classes ```javascript /[abc]/ /[a-z]/ /[0-9]/ /[^abc]/ ``` --- # Quantifiers ```text * → 0+ + → 1+ ? → 0 or 1 {3} → exactly 3 {3,} → 3+ {3,5} → 3–5 ``` --- # Lazy Quantifiers ```javascript .*? ``` instead of greedy: ```javascript .* ``` when you need the smallest possible match. --- # Anchors ```text ^ → start $ → end \b → word boundary \B → non-word boundary ``` --- # Groups Capturing: ```javascript (...) ``` Non-capturing: ```javascript (?:...) ``` Named: ```javascript (?...) ``` --- # Alternation ```javascript cat|dog ``` means: ```text cat OR dog ``` --- # Lookaround Positive lookahead: ```javascript (?=...) ``` Negative lookahead: ```javascript (?!...) ``` Positive lookbehind: ```javascript (?<=...) ``` Negative lookbehind: ```javascript (? **The best regex is sometimes no regex at all.** --- # 🚀 What's Next? You can now work with: ```text Text 📝 ↓ Exact string methods ↓ Patterns with RegEx 🔍 ``` Next we're going to explore some of JavaScript's most useful built-in APIs for working with: ```text Numbers 🔢 Mathematics 🧮 Dates & time 📅 ``` Next chapter: # Number, Math & Date APIs You'll learn things like: ```text Number.isNaN() Number.isFinite() parseInt() Math.round() Math.floor() Math.ceil() Math.random() Math.max() Math.min() Date timestamps date formatting ``` These APIs appear everywhere in real applications. --- # Keep Learning With asif.to 🚀 Don't try to memorize every regex symbol today. Master these first: ```text \d \s [] + * ? {} ^ $ () g i ``` Then practice: ```text Find numbers 🔢 Validate usernames 👤 Extract dates 📅 Find hashtags #️⃣ Clean whitespace 🧹 Replace patterns 🔄 ``` Once those feel natural, groups and lookarounds become much easier. At **asif.to**, the goal is: > **Understand → Practice → Build → Repeat. 🔁** 🌐 **asif.to** Follow **asif.to** on social media for: * ⚡ Quick JavaScript tips * 🧠 Beginner-friendly explanations * ⚛️ [React](/courses/reactjs) & [Next.js](/courses/nextjs) learning * 💻 Practical coding tutorials * 🎯 Interview preparation * 🚀 New developer resources **One concept at a time. One level higher every day. 🚀** ### See you in the Number, Math & Date chapter 👋