DEV Community

loading...

Regex basics with explanations and examples

mstanciu552 profile image Mihai Stanciu ・4 min read

Regular expressions or regex, as it's more commonly known is a sequence of characters that form a search pattern. Simply put, a regular expression is like a database query, but for a string.
In this article, we will talk about the different special characters you can use and provide examples for them. After reading this, hopefully you will not have trouble with regex.

How to use regular expressions in JavaScript

To use a regular expression in JavaScript simply use the match() function on a string like this

const response = string.match('your-regex-here');
Enter fullscreen mode Exit fullscreen mode

Of course there are multiple functions that deal with matching regex, but we want to talk about the regex itself, so here is a link that will help you.

Basic form of a RegEx

/regex/gmi
Enter fullscreen mode Exit fullscreen mode

As you can see the expression has something to search in a string surrounded by / characters.
The g at the end stands for global, meaning search the entire string, not just the first line.
Additionally, you can add other characters at the end, such as i for case insensitive(ignores the difference between upper and lowercase letters) and m meaning multiline, making the expression search by lines.

Note: You don't need to use all three parameters, so you can just have /regex/g.

Basic searches

A RegEx can just be used as a way to search for a word or character in a string, although that defeats the purpose of even using them, knowing that we have functions that do this in most programming languages.

We will be using this string for our examples:

const string = 'RegExr was created by gskinner.com, and is proudly hosted by Media Temple.

Edit the Expression & Text to see matches. Roll over matches or the expression for details. PCRE & JavaScript flavors of RegEx are supported. Validate your expression with Tests mode.

The side bar includes a Cheatsheet, full Reference, and Help. You can also Save & Share with the Community, and view patterns you create or favorite in My Patterns.

Explore results with the Tools below. Replace & List output custom results. Details lists capture groups. Explain describes your expression in plain English.
';
Enter fullscreen mode Exit fullscreen mode

Examples:

/,/g
Enter fullscreen mode Exit fullscreen mode

This will return all the commas(,) in the string.

/in/g
Enter fullscreen mode Exit fullscreen mode

This will return all the occurrences of the in word in the string.

RegEx special character

What makes regular expressions amazing are the special characters that we can use. Such as:

Note: In case we need these characters in our search, we can just use the \ character to escape and say that this is not a RegEx related special character.

1.the + character

/e+/g
Enter fullscreen mode Exit fullscreen mode

This will return any sequence of the string, where there is at least 1 e. So it will return isolated e characters as well as e characters that are grouped(such as Cheatsh ee t)

2.the ? character

/ea?/g
Enter fullscreen mode Exit fullscreen mode

This will return all sequences that have an e and also the sequences that also have an a. The ? character says that whatever is in front of it is optional.

3.the * character

/he*/g
Enter fullscreen mode Exit fullscreen mode

This special character is a combination of the + and ? characters. Meaning it will return all h letters and then all possible e characters after it.(e.g. Cheatsh ee t, c h aracters).

4.the . character

/.he/g
Enter fullscreen mode Exit fullscreen mode

The . character means match anything. So in this case above The, the or che will match it.

5.the \w and \W characters
*\w - will match any word
*\W - will match anything that's not a word

6.the \s and \S characters
*\s - will match any white space
*\S - will match anything that's not a white space

7.the | character - this is like saying OR

8.the ^ character

/^T/g
Enter fullscreen mode Exit fullscreen mode

This will only match the character following it if it exists at the beginning of the string.

9.the $ character

/\.$/g
Enter fullscreen mode Exit fullscreen mode

This will only match a . character if it is at the end of the string.

10.the <= characters

/(?<=[tT]he)./g
Enter fullscreen mode Exit fullscreen mode

This will match the characters that are preceded by the specified search. In this case, any one character that follows the words the or The.

11.the <! characters

/(?<![tT]he)./g
Enter fullscreen mode Exit fullscreen mode

This is the opposite of the <= characters. It will return anything the <= does not return.

Tips and tricks

There are some different commands with RegEx that do many things and offer variety to our searches.

1.the count {}

/\w{3,}/g
Enter fullscreen mode Exit fullscreen mode

This will match any words with more than 3 letters. You can also add another value ({3, 5}) that will limit the word between 3 and 5 letters.

2.the options []

/[tcT]he/g
Enter fullscreen mode Exit fullscreen mode

This will match a string with the last two letters he and the first letter a character from the provided list (t | c | T).

Note: To provide an interval we can just use the - character, like this [a-zA-Z0-9]. This will match anything in the specified ranges (a to z - lowercase, A to Z - uppercase and 0 to 9 - numbers)

3.grouping ()

/(ea){2,3}/g
Enter fullscreen mode Exit fullscreen mode

This will match occurrences of the ea group of characters that appear between 2 and 3 times. If we used just /ea{2,3}/g it would only match the occurrences of the a character.

Resources

This website is an amazing tool for testing RegEx. I recommend it. This is how I learned RegEx and it's very easy to practice with it.

Discussion (0)

pic
Editor guide