Regular expressions (regex) are powerful tools for pattern matching and text manipulation. They are widely used in programming for tasks such as form validation, search and replace operations, and extracting information from text. This guide will introduce you to the basics of regular expressions in JavaScript, providing you with the foundational knowledge to start using them in your projects.
Introduction to Regular Expressions
A regular expression is a sequence of characters that defines a search pattern. In JavaScript, regular expressions are implemented using the RegExp object or through a specific syntax within strings.
Creating a Regular Expression
There are two ways to create a regular expression in JavaScript:
Using a Regular Expression Literal:
const regex = /pattern/flags;
Example :
const regex = /hello/i;
Using the RegExp Constructor :
const regex = new RegExp('pattern', 'flags');
Example :
const regex = new RegExp('hello', 'i');
Flags
Flags modify the behavior of the regex. Common flags include:
i: Case-insensitive matchingg: Global matching (find all matches rather than stopping after the first match)m: Multi-line matching
Example:
const regex = /hello/gi;
Basic Patterns
Literal Characters
A simple regex pattern can be just a string of characters:
const regex = /hello/;
This pattern matches the exact string “hello”.
Meta-characters
Meta-characters are special characters in regex that have specific meanings. Some of the most commonly used meta-characters include:
.: Matches any single character except newline characters\d: Matches any digit (equivalent to[0-9])\w: Matches any word character (equivalent to[a-zA-Z0-9_])\s: Matches any whitespace character (spaces, tabs, etc.)\b: Matches a word boundary
Example:
const regex = /\d/; // Matches any digit
Character Classes
Character classes allow you to define a set of characters to match:
const regex = /[aeiou]/; // Matches any vowel
You can also use ranges:
const regex = /[a-z]/; // Matches any lowercase letter
Quantifiers
Quantifiers specify how many times a character or group should be matched:
*: Matches 0 or more times+: Matches 1 or more times?: Matches 0 or 1 time{n}: Matches exactlyntimes{n,}: Matchesnor more times{n,m}: Matches betweennandmtimes
Example:
const regex = /\d{3}/; // Matches exactly three digits
Using Regular Expressions in JavaScript
Test Method
The test method checks if a string matches a regex pattern and returns a boolean:
const regex = /hello/;
console.log(regex.test('hello world')); // true
Match Method
The match method retrieves the matches when matching a string against a regex:
const str = 'hello world';
const regex = /hello/;
const result = str.match(regex);
console.log(result); // ['hello']
Using the g flag to find all matches :
const str = 'test1 test2 test3';
const regex = /\d/g;
const result = str.match(regex);
console.log(result); // ['1', '2', '3']
Replace Method
The replace method replaces matches with a replacement string:
const str = 'hello world';
const regex = /world/;
const result = str.replace(regex, 'JavaScript');
console.log(result); // 'hello JavaScript'
Split Method
The split method splits a string into an array of substrings based on the regex pattern:
const str = 'apple, banana, cherry';
const regex = /,\s*/;
const result = str.split(regex);
console.log(result); // ['apple', 'banana', 'cherry']
Practical Examples
Email Validation
A common use case for regex is validating email addresses:
const email = 'test@example.com';
const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
console.log(regex.test(email)); // true
Phone Number Formatting
Formatting a phone number to a standard pattern:
const phone = '1234567890';
const regex = /(\d{3})(\d{3})(\d{4})/;
const formatted = phone.replace(regex, '($1) $2-$3');
console.log(formatted); // (123) 456-7890
Extracting Data
Extracting specific data from a string, such as dates:
const text = 'The event is on 2024-05-17.';
const regex = /(\d{4})-(\d{2})-(\d{2})/;
const result = text.match(regex);
console.log(result); // ['2024-05-17', '2024', '05', '17']
Conclusion
Regular expressions are a powerful tool for pattern matching and text manipulation in JavaScript. This guide has covered the basics, including creating regex patterns, using meta-characters, character classes, quantifiers, and practical examples. With this foundational knowledge, you can start leveraging regular expressions to handle complex text processing tasks in your JavaScript projects. Happy coding!