Regular expressions (called Regex or RegExp) are patterns that we can use to match character combinations in strings. These are used in many languages for text processing and manipulations.
In JavaScript, regular expressions also function as objects and are represented by the native RegExp object. By forming search pattern with Regex, we can easily search for data and make our work more productive.
In this short tutorial, we will introduce you to Regex in JavaScript and show you how to get started with this powerful tool.
Today, we will learn:
- What are regular expressions?
- Anatomy of regular expressions
- The RegExp Object in JavaScript
- How to create Regex in JavaScript
- Advanced concepts to learn next
What are regular expressions?
Regular expressions are specially formatted text strings for finding patterns in text. They are commonly used for text processing and manipulation. A regular expression is formed by a sequence of characters to create a search pattern, which can be applied to text search and text replace operations.
A regular expression can be anything from a single character to a complicated pattern.
Regular expressions have many uses. For example, they allow you to check a string of characters for patterns, like in an e-mail address or password. This allows you to see if they match a pattern defined by that regular expression.
Generally speaking, there are two types of regular expressions with one main difference.
-
POSIX: all special characters need to be escaped (i.e. prefixed with a
\character) to be recognized - PCRE (Perl Compatible Regular Expressions): special characters are directly supported without needing to be escaped.
JavaScript implements a flavor of the PCRE style.
Anatomy of regular expressions
Let's look at the different components in a regular expression. The image below shows the main parts of a RegExp.
Let's break down the main things you need to know.
- Start and end characters: Literal notation uses these to signal the limits of the regular expression.
-
Flag: After the ending
/of your regular expression, you can add a number of flags. These will affect the behavior of the RegExp engine parsing your expression. - Capturing groups: This is a very useful feature from RegExps that allows you to capture a portion of the match so you can replace it with something else or extract it.
- Non-capturing groups: These allow you to match a section of the string being analyzed.
- Character classes: These define the patterns to match inside each group. For example, writing a-z means any character from a to z.
There are all sorts of special characters that we use to create Regex. We will discuss these later on.
The RegExp Object in JavaScript
In JavaScript, regular expressions are represented by the native RegExp object. There are two main ways of creating a new RegExp object:
- The literal syntax
- The
RegExp()constructor
The RegExp object represents an instance of a regular expression.
With the literal syntax, we can create regular expressions directly using their classical notation. However, there are limitations here. One big difference between these approaches is that the object's constructor allows for a quoted expression to be passed. This allows us to make dynamic expressions.
The literal syntax uses forward slashes (
/pattern/). The constructor syntax uses quotes ("pattern").
Check out the code below and see on first line that we’re only able to create a constant expression. However, we can use the object to take advantage of string concatenation, creating a dynamic expression.
let greeting = /[hH]ello/
let prefix = "hH"
let suffix = ""
let objGreeting = new RegExp("[" + prefix + "]ello" + suffix)
console.log(objGreeting)
//-------------------------------
let prefix1 = "bB"
let suffix1 = "w"
let objGreeting1 = new RegExp("[" + prefix1 + "]ello" + suffix1)
console.log(objGreeting1)
//output
/[hH]ello/
/[bB]ellow/
How to create Regex in JavaScript
Now we know that there are two ways to create Regex in JavaScript. Let's take a look at this in more detail.
Regular Expression Constructor:
Syntax: new RegExp(pattern[, flags])
Example:
var regexConst = new RegExp('abc');
Regular Expression Literal
Syntax: /pattern/flags
Example:
var regexLiteral = /abc/;
With both methods, the result is a Regex object. They will have same methods and properties. Let's look at another example that uses both methods.
let myRegExp = /[2b|^2b]/
let myOtherRegExp = new RegExp('[2b|^2b]')
console.log(myRegExp)
console.log(myOtherRegExp)
//output
/[2b|^2b]/
/[2b|^2b]/
Regular Expressions Methods
There are two methods for testing regular expressions.
-
RegExp.prototype.test(): to test if a match has been found or not. It accepts a string that we test against a regular expression. It will return true or false if the match is found. -
RegExp.prototype.exec(): Returns an array with all matched groups. It accepts a string that we test against a regular expression.
Creating Regex Patterns
A Regex pattern is composed of simple characters or a combination of simple and special characters. The most basic Regex pattern will simply match the text with the test string.
var regex = /hello/;
console.log(regex.test('hello world'));
//output
true
Simple patterns are constructed of the characters that you want to directly match. For example, the pattern /cba/ matches character combinations only where the exact sequence "cba" is located.
We can make our expressions more powerful or complex with special characters, like we discussed before. We can use special characters and symbols that you have to memorize and implement in your own code. A few special characters are:
Flags
Regular expressions offer five optional flags or modifiers. The two most popular are g, for a global search, and i, for a case-insensitive search.
The basic syntax looks as follows:
new RegExp('pattern', 'flags')
Let's see an example using the constructor syntax.
var regexGlobal = new RegExp('abc','g')
console.log(regexGlobal.test('abc abc'));
var regexInsensitive = new RegExp('abc','i')
console.log(regexInsensitive.test('Abc'));
//output
true
true
Character classes
Special characters are characters with extra meaning. These are collections of characters with preset behaviors that you have to memorize.
Character classes are everything you put inside brackets to let the parser know which characters you want to match. For example, /[abc]/ would match the first a inside the string: bbbabcdebbb.
Let's take a look at a few examples of character classes:
-
Range of characters:
/[a-z]/or/[0-5]/ -
Any word character:
/[\w]/ -
Whitespace characters:
/[\s]/ -
Match end-of-line characters:
/\n/
Quantifiers
Quantifiers are symbols with a special meaning in a regular expression. For example, + matches the preceding expression 1 or more times, and * matches the preceding expression 0 or more times.
There aren’t that many quantifiers, but they allow you to create some complex patterns. Quantifiers can be placed next to a single character, a character class, or a capturing group. They will also affect the way your regular expression is interpreted based on that.
Advanced concepts to learn next
You should now have a solid idea what Regex are in JavaScript and how to create them. There is still a lot to learn. The next, more advanced concepts to learn, are as follows:
- Capturing groups
- The
execmethod - Matching protocol and hostname
- Parsing with Regex
To get started with these concepts and beyond, check out Educative's course JavaScript Regular Expressions in Detail. You will learn how to create your own regular expressions using various techniques and special characters. You'll even explore RegExp Objects, parsing, and password and email pattern matching. By the end, you'll be a Regex expert.
Happy learning!
Continue reading about JavaScript on Educative
- 15 JavaScript Tips: best practices to simplify your code
- JavaScript Versions: How JavaScript has changed over the years
- 7 coding tools that will maximize your effectiveness
Start a discussion
What JavaScript tip have you found to be the most helpful? Was this article helpful? Let us know in the comments below!
Top comments (0)