How to Use Regular Expressions in JavaScript — Complete Tutorial

Regular expressions, commonly called regex or regexp, are sequences of characters that define search patterns used for matching, extracting, and manipulating text. In JavaScript, regular expressions are first-class objects built into the language, supported by dedicated syntax and a rich set of string and regex methods. Whether you need to validate user input, parse structured text, search and replace within strings, or extract data from logs, regex provides a concise and powerful way to express complex text-processing logic.

JavaScript supports regular expressions through the RegExp object and through regex literals enclosed in forward slashes. A regex literal like /hello/i creates a pattern that matches the word hello case-insensitively. The RegExp constructor, written as new RegExp('hello', 'i'), achieves the same result but allows dynamic pattern construction from variables and user input. Understanding both forms is important because literals are preferred for static patterns while the constructor is necessary when patterns are built at runtime.

Regex is an essential skill for JavaScript developers because text processing is central to web development. Form validation, URL routing, template parsing, syntax highlighting, and data extraction all rely on pattern matching. While simple string methods like includes and indexOf handle basic cases, regex handles complex patterns that would require dozens of lines of procedural code. Learning regex requires an initial investment, but the payoff in productivity and code conciseness is substantial for any developer who works with text regularly.

The simplest regex pattern is a literal string match. The pattern /cat/ matches the exact sequence of characters c, a, t anywhere in a string. By default, regex is case-sensitive, so /cat/ matches cat but not Cat or CAT. Adding the i flag, as in /cat/i, makes the match case-insensitive. The g flag enables global matching, finding all occurrences rather than stopping at the first match. The m flag enables multiline mode, where the caret and dollar anchors match the start and end of each line rather than the entire string.

Special characters called metacharacters give regex its power beyond simple literal matching. The dot matches any single character except a newline. The caret anchors a pattern to the start of the string, while the dollar sign anchors it to the end. Parentheses create capturing groups that extract portions of a match, while the pipe character acts as an alternation operator meaning logical OR. Square brackets define character classes that match any single character from a set. Understanding these metacharacters is the foundation for building useful patterns.

When you need to match a metacharacter literally, you escape it with a backslash. To match an actual dot, use the escaped form with a backslash followed by a dot. Similarly, to match square brackets, parentheses, or other special characters in the input text, each must be preceded by a backslash. This escaping requirement is a common source of bugs, especially when building patterns dynamically from user input, where you must escape all special characters in the input string before incorporating it into a regex.

Flags can be combined to modify matching behavior precisely. The combination of g and i finds all case-insensitive matches. The s flag, introduced in ES2018, makes the dot match newline characters as well, enabling patterns to span multiple lines. The u flag enables Unicode mode for correct handling of characters outside the Basic Multilingual Plane, such as emoji. The d flag, added in ES2022, provides start and end indices for each capture group in the match result. Combining the right flags for your use case is essential for correct pattern behavior.

Character classes define sets of characters that can match at a specific position in the string. A character class enclosed in square brackets like [aeiou] matches any single vowel. Adding a caret inside the brackets like [^aeiou] negates the class, matching any character that is not a vowel. Ranges simplify common sets: [a-z] matches any lowercase letter, [0-9] matches any digit, and [a-zA-Z0-9] matches any alphanumeric character. Character classes are fundamental building blocks that you will use in nearly every practical regex pattern.

JavaScript provides shorthand character classes for the most commonly needed sets. The shorthand for digits matches any digit from 0 to 9, and its uppercase counterpart matches any non-digit. The word character shorthand matches letters, digits, and underscores, while its negation matches everything else. The whitespace shorthand matches spaces, tabs, newlines, and other whitespace characters. These shorthands make patterns more concise and readable, though it is important to understand exactly which characters each shorthand includes to avoid unexpected matches.

Quantifiers specify how many times a character or group must appear for a match. The question mark makes the preceding element optional, matching zero or one occurrence. The asterisk matches zero or more occurrences, while the plus sign matches one or more. Curly braces provide precise control: {3} matches exactly three occurrences, {2,5} matches between two and five, and {3,} matches three or more. Choosing the right quantifier is critical because a pattern that is too greedy will match more text than intended, while one that is too restrictive will miss valid matches.

By default, quantifiers are greedy, meaning they match as much text as possible while still allowing the overall pattern to succeed. Adding a question mark after a quantifier makes it lazy, matching as little text as possible. The difference between greedy and lazy matching is significant when extracting content between delimiters. A greedy pattern to match text between quotes will match from the first opening quote to the last closing quote in the string, potentially spanning multiple quoted sections. The lazy version matches from each opening quote to the nearest closing quote, producing the expected individual matches.

JavaScript provides regex functionality through both RegExp methods and String methods. The test method on a RegExp object is the simplest way to check if a pattern matches a string. It returns true or false, making it ideal for validation checks like verifying that an email address matches the expected format. Because test only returns a boolean, it is the most performant option when you do not need to extract the matched text or capture groups.

The match method on String objects returns detailed information about pattern matches. Without the global flag, match returns an array containing the full match, any capture groups, and properties for the match index and input string. With the global flag, match returns an array of all matched substrings but loses the capture group details. For global matching with full capture group information, the matchAll method introduced in ES2020 returns an iterator of match result objects, giving you complete details for every match in the string.

The replace and replaceAll methods combine pattern matching with text transformation. The replace method substitutes the first match by default, or all matches with the global flag. The replacement can be a string with special substitution patterns: $1 through $9 refer to capture groups, $& refers to the full match, and $` and $' refer to the text before and after the match. Even more powerfully, the replacement can be a function that receives the match and capture groups as arguments and returns the replacement string, enabling complex conditional transformations.

The split method uses a regex as a delimiter to divide a string into an array of substrings. While the basic string split handles simple delimiters, regex split handles complex cases like splitting on multiple delimiter types or variable whitespace. For example, splitting a CSV line that may contain tabs, commas, or multiple spaces as delimiters can be expressed as a single regex pattern. Capture groups in the split pattern are included in the result array, which is useful when you need to preserve the delimiters alongside the split segments.

Email validation is one of the most common regex use cases in web development. A practical email pattern checks for one or more characters before the at sign, followed by a domain name with at least one dot. While the full RFC 5322 specification for email addresses is extraordinarily complex, a practical validation regex covers the vast majority of real-world addresses. The key is to balance thoroughness with simplicity, rejecting obviously invalid input while accepting the wide range of valid email formats that users actually use. For critical applications, complement regex validation with a confirmation email to verify the address is real.

Phone number validation demonstrates how regex handles format variation. Phone numbers come in many formats: with or without country codes, with parentheses around area codes, with dashes or dots or spaces as separators, and with optional extensions. A flexible phone regex uses optional groups for the country code and extension, character classes for the separators, and precise quantifiers for each group of digits. Testing your pattern against a diverse set of real-world phone number formats is essential, as phone number conventions vary significantly between countries and cultures.

URL validation requires matching the protocol, domain, optional port, path, query string, and fragment components. A robust URL regex validates each component according to its rules: the protocol is typically http or https, the domain consists of labels separated by dots with each label containing alphanumeric characters and hyphens, the port is an optional numeric value, and the path consists of forward-slash-separated segments. Query strings contain key-value pairs separated by ampersands, and fragments start with a hash symbol. Building this regex incrementally, component by component, is far easier than trying to write it all at once.

Password strength validation uses regex to enforce complexity requirements without writing verbose conditional logic. A pattern that requires at least eight characters, one uppercase letter, one lowercase letter, one digit, and one special character uses lookahead assertions to check each requirement independently. Each lookahead verifies one condition without consuming characters, so all conditions are checked at the same position in the string. This approach is cleaner than chaining multiple if statements and easier to modify when requirements change.

Lookahead and lookbehind assertions match a position in the string based on what comes before or after that position without including the surrounding text in the match. A positive lookahead checks that a pattern follows the current position, while a negative lookahead checks that a pattern does not follow. Lookbehind assertions work in the opposite direction, checking what precedes the current position. These zero-width assertions are essential for patterns that need context-sensitive matching, such as finding a number only when it is followed by a currency symbol or extracting a word only when it is not preceded by a negation.

Named capture groups, introduced in ES2018, make regex patterns more readable and maintainable by assigning names to capture groups. Instead of referring to groups by their numeric index, you can access them by name on the groups property of the match result. A date parsing pattern might use named groups for year, month, and day, making the extraction code self-documenting. Named groups also work in replacement strings and can be backreferenced within the pattern itself, making complex patterns significantly easier to understand and debug.

Non-capturing groups, denoted by a question mark and colon after the opening parenthesis, allow you to group elements for quantifiers or alternation without creating a capture. This is useful when you need grouping for structural purposes but do not need to extract the grouped content. Using non-capturing groups where captures are unnecessary improves regex performance and keeps the match result clean, with capture group indices corresponding only to the data you actually need to extract.

Unicode property escapes, available with the u flag, match characters based on their Unicode properties rather than their code points. You can match any letter from any script, any numeric digit from any writing system, or characters with specific Unicode categories like punctuation or symbols. This is invaluable for internationalized applications where input may contain characters from multiple scripts. Instead of listing character ranges for every possible script, a Unicode property escape provides a concise and correct way to match character categories across all of Unicode.

Online regex testing tools are indispensable for developing and debugging regular expressions. These tools let you enter a pattern and test string, then instantly see all matches highlighted in the text. The immediate visual feedback makes it dramatically easier to iterate on a pattern compared to writing code, running it, and inspecting the output. Most tools also display capture groups, match positions, and detailed explanations of what each part of the pattern does.

The regex tester available on StringTools is designed specifically for JavaScript regex, ensuring that the pattern behavior you see in the tool matches exactly what your code will produce. Some online tools default to PCRE or other regex flavors that support features not available in JavaScript, which can lead to patterns that work in the tester but fail in your application. Using a JavaScript-specific tester eliminates this mismatch and gives you confidence that your pattern will work correctly in production.

When developing complex regex patterns, build them incrementally using an online tester. Start with the simplest possible pattern that matches the core of what you need, then add components one at a time. After each addition, verify that existing matches are preserved and new edge cases are handled. This incremental approach is far more efficient than writing a complete pattern from scratch and then debugging why it does not work. Save intermediate patterns as comments in your code so you can retrace your development process if the pattern needs modification later.

Performance testing is another reason to use online tools during regex development. Some patterns, particularly those with nested quantifiers or overlapping alternatives, can exhibit catastrophic backtracking where the regex engine explores an exponential number of paths through the pattern. Online testers that show execution time and step counts help you identify problematic patterns before they cause timeouts in production. If a pattern takes thousands of steps to match a short string, it is a sign that the pattern needs restructuring to avoid excessive backtracking.