JavaScript RegExp Tutorial

If you’ve ever needed to search for specific patterns of text within a larger body of text, you’ve likely needed to use a regular expression, or RegExp for short. In this tutorial, we’ll go over the basics of regex in JavaScript and provide some sample code to get you started using them in your own projects.

What is a RegExp?

A regular expression is a pattern that you define, which can then be used to search for specific text within another string. These patterns can be quite complex and have a wide range of possible applications.

Here’s an example of a simple regular expression:

const pattern = /hello/;

This pattern can be used to search for the string “hello” within other strings.

Syntax

In JavaScript, regular expressions are defined using two forward slashes (/…/). The text contained within these slashes is the pattern that you want to match.

There are a few special characters that can be used within regular expressions to create more complex patterns:

Character	Description
.	Matches any single character except a newline character
*	Matches zero or more occurrences of the previous character
+	Matches one or more occurrences of the previous character
?	Matches zero or one occurrences of the previous character
()	Groups characters together
[]	Matches any character within the brackets
^	Matches the beginning of the input string
$	Matches the end of the input string
\	Escape character – used to include special characters in the pattern

Here’s an example that includes several of these special characters:

const pattern = /^([A-Z][a-z]+), ([A-Z][a-z]+)/;

This pattern will match any string that begins with an uppercase letter followed by one or more lowercase letters, followed by a comma and a space, then another uppercase letter followed by one or more lowercase letters.

Creating a Regular Expression

To create a RegExp in JavaScript, you can use either the RegExp constructor or the forward slash syntax.

Here’s an example using the constructor syntax:

const pattern = new RegExp('hello');

And here’s the same pattern using the forward slash syntax:

const pattern = /hello/;

Both of these will create a regular expression that matches the string “hello” within other strings.

Testing a RegExp

Once you’ve created a regular expression, you can use it to test whether a given string matches the pattern.

Here’s an example:

const pattern = /hello/;
const str = 'Hello, world!';

console.log(pattern.test(str)); // Output: true

In this example, we’re testing whether the string “Hello, world!” matches the pattern /hello/. Because the string contains the word “hello” (even though it’s capitalized), the test returns true.

Matching a RegExp

In addition to testing whether a string matches a pattern, you can also extract the specific parts of the string that match the pattern.

Here’s an example:

const pattern = /(\d{3})-(\d{2})-(\d{4})/;
const str = 'My social security number is 123-45-6789.';

const match = str.match(pattern);

console.log(match[0]); // Output: 123-45-6789
console.log(match[1]); // Output: 123
console.log(match[2]); // Output: 45
console.log(match[3]); // Output: 6789

In this example, we’re using a regular expression to match a social security number in the format 123-45-6789. We’re using parentheses to group the three sets of digits, which allows us to extract each one individually using the match array.

Conclusion

Regular expressions are a powerful tool for working with text in JavaScript. By using patterns to search for and extract specific parts of text, you can greatly simplify and streamline your code. With practice, you’ll become adept at creating complex patterns that can match almost any type of text you encounter in your projects.