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
How to Create a Regular Expression
There are two ways:
1. Using regex literal:
Syntax:
pattern → the rule you want (e.g., hello, \d+, etc.)
flags → optional modifiers (g, i, m, etc.)
Example:1
Matches "hello", "Hello", "HELLO", etc.
Example 2
g🡪 Global search (find all matches, not just the first)
Without g, it would only find the first "cat". With g, it finds all.
Example 3
m🡪 Multiline mode (^ and $ work per line)
Normally ^ only matches the start of the whole string.
With m, ^ and $ also match start and end of each line.
2. Using the RegExp Constructor
Useful when you want to build the pattern dynamically (from a variable or input).
Syntax:
Example:
Comparison
Some common regex Symbols or patterns
For more refer🡪 [Link]
Some real-time use cases of Regular Expressions in JavaScript:
1. Form Validation
Checking if an email is valid:
Pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
▪ / ... / → defines a regex.
▪ ^ → string must start here.
▪ [^\s@]+ →[] means a set of characters.^ inside means "NOT".\s = whitespace, @ = literal @.So this means
"1 or more characters that are not whitespace or @".
▪ @ → must contain "@" symbol.
▪ [^\s@]+ → again at least one character after @.
▪ \. → literal dot (escaped, since dot normally means "any character").
▪ [^\s@]+ → one or more characters after dot (like .com, .org).
▪ $ → string must end here.
2. Phone Number
Makes sure phone number has 10 digits starting with 6–9
Pattern: /^[6-9]\d{9}$/
• ^ → start of string.
• [6-9] → first digit must be 6,7,8, or 9.
• \d{9} → \d means digit (0–9), {9} means exactly 9 digits.
• $ → end of string.
3. Search and Replace
Replaces all spaces with -
Pattern: /\s+/g
• \s → whitespace (space, tab, newline).
• + → one or more occurrences.
• g flag → "global", so replace all spaces, not just first one.
4. Extract Numbers
Extracts all numbers in the string.
Pattern: /\d+/g
• \d → digit (0–9).
• + → one or more digits.
• g → global, find all matches.
5. Allow Only Alphabets
Rejects names with digits or symbols.
Pattern: /^[A-Za-z\s]+$/
• ^ → start.
• [A-Za-z\s] → allowed characters:
• A-Z uppercase letters
• a-z lowercase letters
• \s spaces
• + → one or more allowed characters.
• $ → end.
6. Extract IP Address
Matches valid IPv4 format like [Link]
Pattern: /\b\d{1,3}(\.\d{1,3}){3}\b/
• \b → word boundary (ensures it's a separate word).
• \d{1,3} → 1 to 3 digits (like 192 or 10).
• (\.\d{1,3}){3} →
• \. → literal dot.
• \d{1,3} → 1–3 digits.
• {3} → must repeat 3 times (so 4 parts in total).
• \b → end boundary.
Event Handling
Writing code that listens for events (like a button click, key press, mouse hover, form submit, etc.) and then
executes some function in response.
What is an Event?
An event is any action or occurrence that happens in the browser, such as:
User clicks a button
User presses a key
Page finishes loading
Mouse moves over an element
Form gets submitted
1. Button Click Event
Show a message when a button is clicked.
2. Mouse Over Event
Change background color when mouse hovers over a box.
3. Key Press Event
Detect which key the user presses.
4. Form Submit Event
Prevent form submission if input is empty.
<form id="myForm">
<input type="text" id="name" placeholder="Enter name">
<button type="submit">Submit</button>
</form>
<p id="msg"></p>
<script>
[Link]("myForm").addEventListener("submit", function(event) {
let name = [Link]("name").value;
if (name === "") {
[Link](); // stop form submission
[Link]("msg").innerText = "Name cannot be empty!";
}
});
</script>
5. Change Event
Detect when user changes a dropdown option.