Regular expressions in Javascript - An introduction

What are regular expressions?

Regular expressions, or regex for short, are a pattern matching language that can be used to perform complex searches and replacements in text. They can be used in various programming languages, including JavaScript, to search, extract, or replace text.

Basic syntax

A regular expression is written as a string, enclosed in forward slashes (/). For example: /hello/ is a regular expression that matches the string "hello".

Within the forward slashes, you can specify a pattern to match. For example: /hello/ will only match the string "hello" exactly. /he..o/ will match any string that starts with "he", followed by any two characters, followed by "o".

Special characters

There are several special characters that you can use to specify a pattern more precisely:

  • . (period) matches any single character (except a newline).

  • * matches zero or more of the preceding character or group.

  • + matches one or more of the preceding character or group.

  • ? matches zero or one of the preceding character or group.

  • [ ] matches any single character within the brackets. For example, [abc] will match "a", "b", or "c". You can also specify a range of characters with a hyphen. For example, [a-z] will match any lowercase letter.

  • ^ negates the character set if it appears inside the brackets. For example, [^a-z] will match any character that is not a lowercase letter.

  • { } specifies the number of times the preceding character or group should appear. For example, a{3} will match the string "aaa". You can also specify a range of numbers with a hyphen. For example, a{2,4} will match "aa", "aaa", or "aaaa".

  • | separates alternative patterns. For example, cat|dog will match "cat" or "dog".

  • ( ) groups characters or patterns together. For example, (cat|dog) will match "cat" or "dog".

Examples

Here are some examples of regular expressions in action:

// Match any string that starts with "The" and ends with "Spain"
/^The.*Spain$/

// Match any string that contains a number
/[0-9]/

// Match any string that contains only lowercase letters
/^[a-z]+$/

// Match any string that starts with "Hello" and ends with "World"
/^Hello.*World$/

// Match any string that starts with "Hello" and ends with "World", but only if it has exactly 5 words
/^Hello\s\w+\s\w+\s\w+\sWorld$/

// Match any string that contains an email address
/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/

Using regular expressions in JavaScript

To use a regular expression in JavaScript, you can create a regular expression object with the RegExp constructor:

let regex = new RegExp('/hello/');

You can also create a regular expression object by enclosing the pattern in forward slashes:

let regex = /hello/;

Once you have a regular expression object, you can use its test() method to search for a match in a string:

let regex = /hello/; let str = 'Hello, world!'; console.log(regex.test(str)); // Output: true

You can also use the match() method of the String object to search for a match:

let regex = /hello/; let str = 'Hello, world!'; console.log(str.match(regex)); // Output: ["Hello"]

To perform a search and replace, you can use the replace() method of the String object:

let regex = /hello/; let str = 'Hello, world!'; console.log(str.replace(regex, 'hi')); // Output: "Hi, world!"

You can also use the exec() method of the regular expression object to search for a match and extract information about the match:

let regex = /hello/; let str = 'Hello, world!'; console.log(regex.exec(str)); // Output: ["Hello"]

Advanced techniques

Regular expressions can get quite complex, but they can also be very powerful. Here are some advanced techniques that you can use to fine-tune your pattern matching:

  • Lookaheads allow you to specify a pattern that must be followed, but that is not included in the match. For example, /Hello(?=, world)/ will match "Hello" only if it is followed by ", world".

  • Lookbehinds allow you to specify a pattern that must precede the match, but that is not included in the match. For example, /(?<=Hello, )world/ will match "world" only if it is preceded by "Hello, ".

  • Backreferences allow you to refer back to a previously matched group. For example, /(\w+)\s\1/ will match any word that is repeated twice, separated by a space.

  • Modifiers allow you to specify options for the regular expression. For example, /hello/i will match "hello" or "Hello", ignoring the case of the letters.

I hope this tutorial has been helpful! If you have any further questions, feel free to ask.

That's it.

Did you find this article valuable?

Support Eirik Madland by becoming a sponsor. Any amount is appreciated!