Regular Expressions in JavaScript: A practical guide for beginners
By: Enrico Gruner
Tags: Regular Expressions, JavaScript, Javascript String, Javascript Development, Javascript Basics

The Syntax

There are two ways of specifying a Regular Expression in JavaScript.

Using the RegExp constructor

The RegExp constructor accepts two parameters: The Regular Expression and a string of options. I mainly use it whenever I want to use a string variable in my RegExp. The i -option stands for case-insensitivity.

Using the RegExp string

This syntax is the most common usage. I will stick to it throughout the rest of this article because the only difference from a practical point of view is the use of variable strings, which I outlined above. The syntax is a little different. You have to make use of so-called delimiters. You would rewrite the example from before like so:

Some basic examples

You can use RegExp to validate user input. Keep in mind that this is not always the best solution because there are many more readable options.

Let us assume you want to check if the username contains specific substrings. You could achieve this like so:

The bar | acts as a logical OR. The above example would be case-sensitive, so it would not trigger for names containing Foo .

Zip-code validation is often used as an example for showcasing how to handle repetition.

There are some reserved characters to express Regular Expressions, like the dash - or the asterisks * . If you want to match a reserved character, you have to escape it properly with a backslash. [0-9] expresses a range (every number from 0 to 9). It is also possible to specify character ranges like [a-zA-Z] , which would match every lower- or upper-case Latin character. The number in the curly braces expresses repetition. In the example, it means that there have to be five digits in a row. Each number can be between 0 to 9. We could also specify other ranges:

{5,} - at least 5 digits

{,5} - up to 5 digits

{5} - exactly 5 digits

{1,5} - between 1 and 5 digits

Expressing spans is so popular that there are shortcuts for the most common use-cases. If you are interested in this topic look for ? , * , and + quantifiers in the documentation that I have linked below.

Regular Expressions in string functions

The following example outlines one of the most common use-cases for Regular Expressions.

The replace function for strings will only alter the first occurrence. You can use a Regular Expression as a replacement pattern and provide the g modifier. g stands for global and will make sure that all occurrences will be replaced.

The match function on strings is used for pattern-matching and storing the matches.

The sample above is the most sophisticated example that we will consider. The first thing you have to know is that the match function can be executed on strings and that it takes a Regular Expression as a parameter.

The match function will return all matches within a Regular Expression. You can decide what to match using parentheses. You can also have more than one group that you would like to match.

We are using three news quantifiers in the example:

. - anything (except line breaks)

* - "0 or more times"-quantifier

.*? - make the combination of .* non-greedy

The question mark is used to make expressions non-greedy. In our example, this means:

The greedy version matches everything from the first occurrence of a quotemark to the last.

The non-greedy version matches everything from the first occurrence of a quotemark to the next appearance.

Recap

Regular Expressions are required every now and then. Every JavaScript developer should be able to come up with some essential RegExp solutions. In my opinion, the most important ones are:

Test a string.

Test for repetition.

Replace all occurrences of a pattern in a string.

Match a pattern in a string.

Thank you for reading.

That’s all, folks!