/

How to Use JavaScript Regular Expressions

How to Use JavaScript Regular Expressions

Learn everything you need to know about JavaScript Regular Expressions in this comprehensive guide. Discover the most important concepts and explore practical examples to master this powerful tool.

Introduction to Regular Expressions

A regular expression, also known as a regex, is a syntax used to work with strings in a highly efficient manner. Regular expressions allow you to search text, replace substrings, and extract information from strings. They are supported by almost every programming language, including JavaScript.

Regular expressions have been around since the 1950s and were initially used as a conceptual search pattern for string processing algorithms. Over time, they grew in popularity and were implemented in various tools and programming languages.

Hard but Useful

Regular expressions can be challenging to understand and maintain, especially for beginners. However, they are an invaluable tool for certain string manipulations that are otherwise difficult to achieve using simple string methods.

While simple regular expressions are easy to read and write, complex regular expressions can quickly become confusing. It is essential to grasp the basic concepts before diving into more advanced patterns and features.

How Does a Regular Expression Look Like

In JavaScript, a regular expression is represented by an object. There are two ways to define a regular expression:

  1. Using the RegExp object constructor:

    1
    const re1 = new RegExp('hey');

  2. Using the regular expression literal form:

    1
    const re1 = /hey/;

The pattern, such as “hey” in the example above, is the main component of a regular expression. In the literal form, it is delimited by forward slashes, while in the object constructor form, it is not. This is one of the key differences between these two forms.

How Does It Work

Let’s start with a simple regular expression that searches for the word “hey” in a string:

1
const re1 = /hey/;

You can test this regular expression using the test method, which returns a boolean value indicating whether the pattern is found in the given string:

1
2
3
4
re1.test('hey'); // true
re1.test('blablabla hey blablabla'); // true
re1.test('he'); // false
re1.test('blablabla'); // false

The regular expression /hey/ matches the string “hey” wherever it appears. It will return true even if “hey” is part of a larger string.

Anchoring

To match strings that start or end with a specific pattern, you can use anchoring operators. The ^ operator matches the start of a string, while the $ operator matches the end of a string.

For example, to match strings that start with “hey”, use the pattern /^hey/:

1
2
/^hey/.test('hey'); // true
/^hey/.test('bla hey'); // false

To match strings that end with “hey”, use the pattern /hey$/:

1
2
3
/hey$/.test('hey'); // true
/hey$/.test('bla hey'); // true
/hey$/.test('hey you'); // false

By combining the ^ and $ operators, you can match strings that exactly match a specific pattern:

1
/^hey$/.test('hey'); // true

Match Items in Ranges

Instead of matching a specific string, you can match any character within a range. The following regex patterns match characters within specific ranges:

  • [a-z]: matches lowercase letters from “a” to “z”
  • [A-Z]: matches uppercase letters from “A” to “Z”
  • [a-c]: matches lowercase letters “a”, “b”, or “c”
  • [0-9]: matches any digit from 0 to 9

For example, the regex pattern /[a-z]/ matches strings that contain at least one lowercase letter:

1
2
3
/[a-z]/.test('a'); // true
/[a-z]/.test('1'); // false
/[a-z]/.test('A'); // false

Ranges can also be combined. For example, the regex pattern /[A-Za-z0-9]/ matches alphanumeric characters:

1
2
3
/[A-Za-z0-9]/.test('a'); // true
/[A-Za-z0-9]/.test('1'); // true
/[A-Za-z0-9]/.test('A'); // true

Matching a Range Item Multiple Times

To match one or more occurrences of a character or pattern, you can use quantifiers. The following quantifiers can be used with regular expressions:

  • +: matches one or more occurrences
  • *: matches zero or more occurrences
  • {n}: matches exactly n occurrences
  • {n,m}: matches between n and m occurrences

For example, the regex pattern /^\d+$/ matches strings that have one or more digits:

1
2
3
4
/^\d+$/.test('12'); // true
/^\d+$/.test('144343'); // true
/^\d+$/.test(''); // false
/^\d+$/.test('1a'); // false

The * quantifier allows zero or more occurrences:

1
2
3
4
/^\d*$/.test('12'); // true
/^\d*$/.test('144343'); // true
/^\d*$/.test(''); // true
/^\d*$/.test('1a'); // false

The {n} quantifier matches exactly n occurrences:

1
2
3
4
/^\d{3}$/.test('123'); // true
/^\d{3}$/.test('12'); // false
/^\d{3}$/.test('1234'); // false
/^[A-Za-z0-9]{3}$/.test('Abc'); // true

The {n,m} quantifier matches between n and m occurrences:

1
2
3
4
/^\d{3,5}$/.test('123'); // true
/^\d{3,5}$/.test('1234'); // true
/^\d{3,5}$/.test('12345'); // true
/^\d{3,5}$/.test('123456'); // false

If you want to match at least n occurrences without an upper limit, you can omit m:

1
2
3
4
/^\d{3,}$/.test('12'); // false
/^\d{3,}$/.test('123'); // true
/^\d{3,}$/.test('12345'); // true
/^\d{3,}$/.test('123456789'); // true

Optional Items

To make a character or pattern optional, you can use the ? quantifier. It matches zero or one occurrence.

For example, the regex pattern /^\d{3}\w?$/ matches strings that have exactly three digits followed by an optional alphanumeric character:

1
2
3
/^\d{3}\w?$/.test('123'); // true
/^\d{3}\w?$/.test('123a'); // true
/^\d{3}\w?$/.test('123ab'); // false

Groups

Groups in regular expressions are enclosed in parentheses (...). They allow you to define subpatterns within the overall regex pattern.

For example, the regex pattern /^(\d{3})(\w+)$/ matches strings that start with exactly three digits followed by one or more alphanumeric characters. The groups (\d{3}) and (\w+) capture the matched digits and alphanumeric characters separately.

You can access the captured groups using the match or exec methods. The first item in the returned array is the entire matched string, followed by each captured group’s content.

1
2
'123s'.match(/^(\d{3})(\w+)$/);
// Array [ "123s", "123", "s" ]

Capturing Groups

Capturing groups are useful for extracting specific parts of a string. They allow you to capture and store substrings for later use.

To capture a group, enclose the desired pattern within parentheses. The captured group content can then be accessed using the match or exec methods.

For example, consider the regex pattern /(\S+)@(\S+)\.(\S+)/. This pattern captures the username, domain, and top-level domain of an email address. By using exec or match, you can extract each part separately.

1
2
/(\S+)@(\S+)\.(\S+)/.exec('example[email protected]');
// Array [ "example[email protected]", "example", "domain", "com" ]

Noncapturing Groups

By default, groups in regular expressions are capturing groups. However, there may be cases where you want to perform a match without capturing the result.

Noncapturing groups can be created using (?:...). These groups allow you to specify a subpattern without storing the match in the resulting array.

For example, /^(\d{3})(?:\s)(\w+)$/ matches strings that start with three digits, followed by a space (noncapturing group), and then one or more alphanumeric characters.

1
2
/^(\d{3})(?:\s)(\w+)$/.exec('123 s');
// Array [ "123 s", "123", "s" ]

Flags

Regular expressions in JavaScript can include flags that modify their behavior. Flags are used after the trailing slash in regex literals or as the second parameter in the RegExp constructor.

The following flags can be used with regular expressions:

  • g: matches the pattern multiple times
  • i: performs a case-insensitive match
  • m: enables multiline mode
  • u: enables support for Unicode
  • s: enables dotall mode

Flags can be combined, allowing you to customize regex matching according to your needs.

Inspecting a Regex

To inspect the properties of a regular expression, you can access its various properties:

  • source: the pattern string
  • multiline: true if the m flag is set
  • global: true if the g flag is set
  • ignoreCase: true if the i flag is set
  • lastIndex: the index at which to start the next search

For example:

1
2
3
4
5
/(\w{3})/i.source; // "(\w{3})"
/(\w{3})/i.multiline; // false
/(\w{3})/i.lastIndex; // 0
/(\w{3})/i.ignoreCase; // true
/(\w{3})/i.global; // false

Escaping

Certain characters have special meanings in regular expressions and need to be escaped using a backslash (\).

The following characters require escaping:

  • \, /, [, ], (, ), {, }, ?, +, *, |, ., ^, $

For example:

1
2
3
/^\$$/.test('$'); // true
/^\^$/.test('^'); // true
/^\\$/; // regex pattern to match a single backslash

String Boundaries

For more precise pattern matching, you can use \b and \B to match the boundaries of words within a string.

  • \b matches a set of characters at the beginning or end of a word
  • \B matches a set of characters that are not at the beginning or end of a word

For example:

1
2
3
/\bbear/.test('I saw a bear'); // true
/\bbear/.test('I saw a beard'); // true
/\bbear\b/.test('I saw a beard'); // false

Replacing Using Regular Expressions

JavaScript provides the replace method for replacing parts of a string based on a regular expression pattern. You can use this method to perform single or multiple replacements.

The replace method can accept a string or a regular expression as its first argument. When using a regular expression, the g flag is needed to replace multiple occurrences.

For example:

1
2
"Hello world!".replace('world', 'dog'); // "Hello dog!"
"My dog is a good dog!".replace(/dog/g, 'cat'); // "My cat is a good cat!"

You can also use capturing groups and functions for more advanced replacements. By using capturing groups, you can refer to the matched groups in the replacement string. By passing a function as the second argument, you have more flexibility in manipulating the matched substrings.

For example:

1
"Hello, world!".replace(/(\w+), (\w+)!/, '$2: $1!!!'); // "world: Hello!!!"

Greediness

By default, regular expressions are greedy, which means they match as much as possible. This behavior can sometimes lead to unexpected results.

For example, consider the regex pattern /\$(.+)\s?/ used to extract a dollar amount from a string. Without a lazy modifier, it matches until the last space:

1
2
/\$(.+)\s?/.exec('This costs $100 and it is less than $200')[1];
// "100 and it is less than $200"

To make the regex lazy and match the minimum number of characters possible, you can add a ? after the quantifier:

1
2
/\$(.+?)\s/.exec('This costs $100 and it is less than $200')[1];
// "100"

Lookaheads: Match a String Depending on What Follows It

Lookaheads allow you to match a string based on the presence or absence of specific characters that follow the matched string. Lookaheads have the following syntax:

  • ?=: positive lookahead
  • ?!: negative lookahead

For example, /(?=Roger) Waters/ matches “Waters” only if it is followed by “Roger”:

1
2
/(?= Roger) Waters/.test('Roger is my dog'); // false
/(?= Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician'); // true

The negative lookahead ?! performs the inverse operation, matching a string only if it is not followed by a specific substring:

1
2
/(?<!Roger) Waters/.test('Roger is my dog'); // true
/(?<!Roger) Waters/.test('Roger Waters is a famous musician'); // false

Lookbehinds: Match a String Depending on What Precedes It

Lookbehinds, introduced in ES2018, are similar to lookaheads but match a string based on its preceding characters. Lookbehinds use ?<= for positive lookbehinds and ?<! for negative lookbehinds.

For example, /(?<=Roger) Waters/ matches “Waters” only if it is preceded by “Roger”:

1
2
/(?<=Roger) Waters/.test('Pink Waters is my dog'); // false
/(?<=Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician'); // true

The negative lookbehind ?<! matches a string if it is not preceded by a specific substring:

1
2
/(?<!Roger) Waters/.test('Pink Waters is my dog'); // true
/(?<!Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician'); // false

Regular Expressions and Unicode

When working with Unicode strings in JavaScript, it is important to use the u flag in regular expressions, especially when handling characters in the astral planes. If the u flag is not used, regular expressions may not match Unicode characters correctly.

For example, the regex /^.$/ matches any character except newline, but it fails to match the emoji “🐶” because JavaScript represents it internally as two characters. With the u flag, the regex matches the full emoji:

1
2
3
/^.$/.test('a'); // true
/^.$/.test('🐶'); // false
/^.$/u.test('🐶'); // true

Always include the u flag when working with Unicode characters to ensure accurate matching.

Additionally, you can use Unicode property escapes, a feature introduced in ES2018, to match characters based on their Unicode properties. Property escapes are enclosed in \p{} or \P{}, where the property name is specified within the curly braces.

For example, \p{ASCII} matches any ASCII character, while \p{Emoji} matches any emoji character:

1
2
3
4
5
6
/^\p{ASCII}+$/u.test('abc'); // true
/^\p{ASCII}+$/u.test('ABC@'); // true
/^\p{ASCII}+$/u.test('ABC🙃'); // false

/^\p{Emoji}+$/u.test('H'); // false
/^\p{Emoji}+$/u.test('🙃🙃'); // true

Unicode property escapes provide a powerful tool for matching specific Unicode characters or character sets based on their properties.

Examples

Here are a few practical examples to demonstrate the power of regular expressions:

Extract a Number from a String

To extract a number from a string, you can use the \d+ pattern, which matches one or more digits:

1
2
'Test 123123329'.match(/\d+/);
// Array [ "123123329" ]

Match an Email Address

Matching valid email addresses is a complex task, but a simple approach can be taken using regular expressions. For example, using the pattern (\S+)@(\S+)\.(\S+), you can capture the username, domain, and top-level domain of an email address:

1
2
/(\S+)@(\S+)\.(\S+)/.exec('example[email protected]');
// Array [ "example[email protected]", "example", "domain", "com" ]

Capture Text Between Double Quotes

To capture text between double quotes, you can use the pattern /"([^']+)"/. This pattern captures the text enclosed in double quotes while excluding the quotes themselves:

1
2
3
const hello = 'Hello "nice flower"';
const result = /"([^']+)"/.exec(hello);
// Array [ "\"nice flower\"", "nice flower" ]

Get the Content Inside an HTML Tag

To extract the content within a specific HTML tag, you can create a regex pattern to match the desired tag and its contents. For example, to capture the content within a <span> tag:

1
/<span\b[^>]*>(.*?)<\/span>/;

Using regular expressions in JavaScript opens up a world of possibilities for manipulating and extracting information from strings. Spend time practicing and experimenting with different patterns to become proficient in using regular expressions effectively.