Regular expressions (regex) in JavaScript
Regular expressions (regex) in JavaScript are a powerful tool for pattern matching and text manipulation. They allow you to search for, match, and manipulate strings based on patterns, which is useful for tasks such as form validation, searching, and text parsing.
What is a Regular Expression?
A regular expression is a sequence of characters that define a search pattern. It can be used to match patterns within strings, extract parts of strings, replace text, and perform validations.
Basic Syntax of Regular Expressions
Regular expressions consist of special characters that define the search pattern. Here are the most common elements:
Literal Characters:
a,b,c,1,A,@: Matches the exact character in the string.
Special Characters:
.(dot): Matches any character except a newline.^: Matches the beginning of a string.$: Matches the end of a string.[](square brackets): Matches any one of the characters inside the brackets.[^]: Matches any character that is not inside the brackets.|: Acts as a logical OR to match one pattern or another.(): Groups part of the regex pattern to apply quantifiers or to capture groups.
Quantifiers:
*: Matches 0 or more occurrences of the preceding character or group.+: Matches 1 or more occurrences of the preceding character or group.?: Matches 0 or 1 occurrence of the preceding character or group.{n}: Matches exactlynoccurrences of the preceding character or group.{n,}: Matchesnor more occurrences.{n,m}: Matches betweennandmoccurrences.
Predefined Character Classes:
\d: Matches any digit (0-9).\D: Matches any character that is not a digit.\w: Matches any alphanumeric character (letters, digits, and underscores).\W: Matches any character that is not alphanumeric.\s: Matches any whitespace character (spaces, tabs, newlines).\S: Matches any character that is not whitespace.
Anchors:
^: Asserts the start of a string.$: Asserts the end of a string.
Creating Regular Expressions in JavaScript
In JavaScript, regular expressions can be created using two methods:
1. Literal Notation
let regex = /pattern/;
2. Constructor Function
let regex = new RegExp('pattern');
Both methods do the same thing, but the constructor function allows you to dynamically create regular expressions (e.g., from a variable).
Example of Regular Expressions
1. Matching a Phone Number:
A common use case is matching a phone number.
let phoneRegex = /\d{3}-\d{3}-\d{4}/;
let phone = "123-456-7890";
console.log(phoneRegex.test(phone)); // Output: true
Explanation:
\d{3}matches exactly 3 digits.-matches the hyphen.\d{4}matches exactly 4 digits.
2. Matching an Email Address:
A simple regex to match an email address:
let emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
let email = "example@example.com";
console.log(emailRegex.test(email)); // Output: true
Explanation:
^[a-zA-Z0-9._%+-]+matches the beginning of the email and allows for characters like letters, numbers, and certain symbols.@is the literal character for the at symbol.[a-zA-Z0-9.-]+matches the domain name part.\.[a-zA-Z]{2,}$ensures a period (.) followed by 2 or more letters for the top-level domain.
Using Regular Expressions in JavaScript
Here are some common methods that you can use with regular expressions:
1. test() Method
The test() method checks if the regex pattern matches a string. It returns true if there is a match, or false if there isn't.
let regex = /apple/;
let str = "I have an apple.";
console.log(regex.test(str)); // Output: true
2. exec() Method
The exec() method executes a search for a match and returns an array of the matched groups. If no match is found, it returns null.
let regex = /(\d+)/;
let str = "My number is 42";
let result = regex.exec(str);
console.log(result); // Output: ["42", "42"]
Explanation:
The
(\d+)captures the digits as a group.The result array contains the full match and the captured groups.
3. match() Method (for strings)
The match() method retrieves the results of a match against the regular expression.
let str = "The quick brown fox";
let regex = /\b\w+\b/g;
let words = str.match(regex);
console.log(words); // Output: ["The", "quick", "brown", "fox"]
Explanation:
The
\bword boundary anchors match complete words.The
gflag allows the regex to match all occurrences.
4. replace() Method
The replace() method is used to replace parts of a string that match the regex pattern.
let str = "I love apples";
let newStr = str.replace(/apples/, "bananas");
console.log(newStr); // Output: I love bananas
5. split() Method
The split() method splits a string into an array of substrings based on a pattern.
let str = "apple,orange,banana";
let result = str.split(/,/);
console.log(result); // Output: ["apple", "orange", "banana"]
Flags in Regular Expressions
Flags are special characters that modify the behavior of regular expressions:
g: Global search (matches all occurrences).i: Case-insensitive search.m: Multiline matching.s: Allows.to match newline characters (dotall mode).u: Allows full Unicode matching.y: Sticky search (matches from the current position in the string).
Example with Flags:
let regex = /hello/i;
let str = "Hello world";
console.log(regex.test(str)); // Output: true (case-insensitive match)
Common Regular Expression Patterns
- Match a number (integer):
let regex = /^\d+$/;
- Match a URL:
let regex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
- Match a date (DD/MM/YYYY):
let regex = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/;
Summary
Regular expressions in JavaScript provide a powerful way to perform pattern matching on strings. Some key points to remember:
Regular expressions are used with string methods like
test(),match(),replace(),split(), andexec().They allow for complex searches and replacements, such as email validation, phone number formatting, and more.
Regular expressions have special characters, quantifiers, and flags that control how they match strings.