DEV Community

Kiara Johnson
Kiara Johnson

Posted on

Regular Expressions (Regex) in JavaScript Tutorial

Regular Expressions

Regular expressions are a list of characters that define a search pattern for a string of text. They are made up of “literal” and “meta” characters. “Literal” characters indicate a match of a specific character, such as a letter. “Meta” characters have special meanings such as (*) which indicate to include all preceding occurrences in the match. These characters are used to match text. There are several ways you can define the search. Besides literal and meta characters, you can use criteria such as character classes, quantifiers, anchors, and escape sequences.

Summary

I will be using a regular expression to match an email in this tutorial:

/^([a-z0–9_.-]+)@([\da-z.-]+).([a-z.]{2,6})$/

Table of Contents

Regex Components

Anchors

Anchors do not match a specific character, rather the position of a specific character. Anchors can be used to indicate the before, after, and between positions. In our email example, the (^) anchor is used to indicate that the search pattern must match from the beginning of the expression:

^([a-z0–9_.-]+)

The ($) anchor indicates that the string ends here and all characters must precede it:

([a-z.]{2,6})$

Quantifiers

Quantifiers represent how many characters should be matched in an expression. First, the (+) quantifier is used to match one or more occurrences of lowercase letters, digits, underscores, periods, or hyphens:

([a-z0–9_.-]+)

The (+) is also used to match one or more occurrences of digits, lowercase letters, periods, or hyphens:

([\da-z.-]+)

The quantifier ( {2, 6} ) is used to match a minimum of two characters and a maximum of 6 characters in the preceding group:

([a-z.]{2,6})

Character Classes

Character classes match any character or set of characters that are within a set of brackets. For example, the email regex uses three different instances of character classes. The first set of brackets ensures that the string can be a combination of any number of lowercase letters, numbers, dots, underscores, or hyphens. It specifies characters before the ( @ ) symbol:

[a-z0–9_.-]@

The second set of brackets is used to specify characters after the ( @ ) symbol. It allows the search to contain lowercases letters, numbers, dots, underscores, or hyphens:

@[\da-z.-]

The third set of brackets specifies characters before the literal (.) character. They will match any combination of lowercase letters and dots:

[a-z.]

Grouping and Capturing

Grouping is done by putting regex expressions in parentheses. Capturing groups are used to treat multiple characters as a single unit. There are three different groups in the email regex.

The first group is used to capture one or more occurrences of lowercase letters, digits, underscores, dots, or hyphens within the group:

([a-z0–9_.-]+)

The second group is used to capture one or more occurrences of digits, lowercase letters, dots, or hyphens within the group:

([\da-z.-]+)

The third group is used to capture between two and six occurrences of lowercase letters or dots:

([a-z.]{2,6})

Bracket Expressions

Bracket expressions are characters located between two brackets ( [ ] ). These expressions are used to match one or more characters in a set. In the example, the first bracket expression matches any lowercase, digit, underscore, dot, hyphen, or a combination of them:

[a-z0–9_.-]

The second bracket expression matches any digit, lowercase letter, dot, hyphen, or combination of them:

[\da-z.-]

The third bracket expression matches any lowercase letter or dot.

[a-z.]

Greedy and Lazy Match

Greedy matches match as many qualifiers as it can, while lazy matches match as few qualifiers as it can. Greedy matches use the quantifiers (+) and (*). Lazy matches are noted with the (?) character. The email example uses greedy matching.

Author

My name is Kiara Johnson and I am a new web developer. Check out my Github: https://github.com/Kiararj.

Top comments (0)