A Walkthrough Guide to Regular Expressions (RegEx) in JavaScript

Richard Rembert - Sep 22 '22 - - Dev Community

A JavaScript Regular Expression (or Regex) is a sequence of characters that we can utilize to work effectively with strings. Using this syntax, we can:

  • search for text in a string
  • replace substrings in a string
  • extract information from a string

Dating back to the 1950s, Regular Expressions were formalized as a concept for pattern searching in string-processing algorithms.

JavaScript has regular expressions support directly built into the language. A solid understanding of regular expressions will make you a much more effective programmer. So let’s get started!

Basic Regex Pattern

Here’s a basic pattern:

var regex = /hello/;

console.log(regex.test('hello world'));  
// true
Enter fullscreen mode Exit fullscreen mode

We are simply matching the literal text with the test string. We’ll look at the regex test method in detail shortly.

Why Use Regular Expressions?

As mentioned, Regular Expressions are a way to describe patterns in string data. We can use them to check a string of characters, for example, to look for an e-mail address — by matching the pattern which is defined by our regular expression.

Creating a Regular Expression

In JavaScript, we can create a Regular Expression in two ways: Either by using the RegExp constructor or by using forward slashes / to enclose the regex pattern.

The Constructor Method:

The syntax is like so:

new RegExp(pattern[, flags])
Enter fullscreen mode Exit fullscreen mode

So for example:

let regexConst = new RegExp('abc');
Enter fullscreen mode Exit fullscreen mode

The Literal Method:

The syntax is like so:

/pattern/flags
Enter fullscreen mode Exit fullscreen mode

An example:

let regexLiteral = /abc/;
Enter fullscreen mode Exit fullscreen mode

Note: flags are optional, we’ll look at these later in this article!

In the case where you need to create regular expressions dynamically, you’ll need to use the constructor method.

In either case, the result will give a regex object — which will have the same methods and properties attached to them, for our use.

Regular Expression Methods

When testing our regular expressions, we generally use one of two methods: RegExp.prototype.test() or RegExp.prototype.exec().

RegExp.prototype.test()

We use this method to test whether a match has been found or not. It accepts a string which we test against a regular expression and returns either trueor false, depending if the match is found or not.

Let’s see an example:

let regex = /hello/; 
let str = 'hello world';
let result = regex.test(str);

console.log(result); 
// returns 'true' as hello is present in our string
Enter fullscreen mode Exit fullscreen mode

RegExp.prototype.exec()

We use this method to receive an array of all the matched groups. It accepts a string that we test against our regular expression.

An example:

let regex = /hello/;
let str = 'hello world';
let result = regex.exec(str);

console.log(result);
// returns [ 'hello', index: 0, input: 'hello world', groups: undefined ]
Enter fullscreen mode Exit fullscreen mode

In this example, ‘hello’ is our matched pattern, index is where the regular expression starts & input is the string that was passed.

For the rest of the article, we’ll be using the test() method.

The Power of Regex

We’ve so far seen how to create simple regular expression patterns. This is really just the tip of the iceberg. Let’s now take a dive into the syntax to see the full power of regular expressions for handling more complex tasks!

An example of a more complex task would be if we needed to match a number of email addresses. By using the special characters defined in the syntax — we can achieve this!

Let’s take a look now so we can more fully grasp & therefore utilize regular expressions in our programs.

Flags:

In any regular expression, we can use the following flags:

  • g: matches the pattern multiple times
  • i: makes the regex case insensitive
  • m: enables multi-line mode. Where ^ and $ match the start and end of the entire string. Without this, multi-line strings match the beginning and end of each line.
  • u: enables support for unicode
  • s: short for single line, it causes the . to also match new line characters

Flags may also be combined in a single regular expression & the flag order doesn’t matter. They are added at the end of the string in regex literals:

/hello/ig.test('HEllo')
// returns true
Enter fullscreen mode Exit fullscreen mode

If using RegExp object constructors, they’re added as the second parameter:

new RegExp('hello', 'ig').test('HEllo') 
// returns true
Enter fullscreen mode Exit fullscreen mode

Character groups:

Character Set [abc]

We use character sets to match different characters in a single position. They match any single character in the string with the characters inside the brackets:

let regex = /[hc]ello/;

console.log(regex.test('hello'));
// returns true

console.log(regex.test('cello'));
// returns true

console.log(regex.test('jello'));
// returns false
Enter fullscreen mode Exit fullscreen mode

Negated Character Set [^abc]

It matches anything that is not enclosed in the brackets:

let regex = /[^hc]ello/;

console.log(regex.test('hello'));
// returns false

console.log(regex.test('cello'));
// returns false

console.log(regex.test('jello'));
// returns true
Enter fullscreen mode Exit fullscreen mode

Ranges [a-z]

If we want to match all of the letters of an alphabet in a single position, we can use ranges. For example: [a-j] will match all the letters from a to j. We can also use digits like [0–9] or capital letters like [A-Z]:

let regex = /[a-z]ello/;

console.log(regex.test('hello'));
// returns true

console.log(regex.test('cello'));
// returns true

console.log(regex.test('jello'));
// returns true
Enter fullscreen mode Exit fullscreen mode

If at least one character exists in the range we test, it’ll return true:

/[a-z]/.test('a')  // true
/[a-z]/.test('1')  // false
/[a-z]/.test('A')  // false (as our range is in lower case)
/[a-c]/.test('d')  // false
/[a-c]/.test('cd') // true (as 'c' is in the range)
Enter fullscreen mode Exit fullscreen mode

Ranges can also be combined using -:

/[A-Z-0-9]/

/[A-Z-0-9]/.test('a') // false
/[A-Z-0-9]/.test('1') // true
/[A-Z-0-9]/.test('A') // true
Enter fullscreen mode Exit fullscreen mode

Multiple range item matches

We can check if a string contains one or only one character in a range. Start the regex with ^ and end with $:

/^[A-Z]$/.test('A')  // true
/^[A-Z]$/.test('AB') // false
/^[A-Z]$/.test('Ab') // false
/^[A-Z-0-9]$/.test('1')  // true
/^[A-Z-0-9]$/.test('A1') // false
Enter fullscreen mode Exit fullscreen mode

Meta-characters

Meta-characters are characters with a special meaning. Let’s take a look at some of these here:

  • \d: matches any digit, being [0-9]
  • \D: matches any character that is not a digit, effectively [^0-9]
  • \w: matches any alphanumeric character (plus underscore), equivalent to [A-Za-z_0-9]
  • \W: matches any non-alphanumeric character, so anything except [^A-Za-z_0-9]
  • \s: matches any whitespace character: spaces, tabs, newlines and Unicode spaces
  • \S: matches any character that is not a whitespace
  • \0: matches null
  • \n: matches a newline character
  • \t: matches a tab character
  • \uXXXX: matches a unicode character with code XXXX (requires the u flag)
  • .: matches any character that is not a newline char (e.g. \n) (unless you use the s flag, explained later on)
  • [^]: matches any character, including newline characters. It’s very useful on multi-line strings

Quantifiers

Quantifiers are symbols that have unique meaning in regex.

Let’s see them in action:

  • + Matches the preceding expression 1 or more times: 
let regex = /\d+/;

console.log(regex.test('1'));
// true

console.log(regex.test('1122'));
// true
Enter fullscreen mode Exit fullscreen mode
  • * Matches the preceding expression 0 or more times: 
let regex = /\d+/;

console.log(regex.test('1'));
// true

console.log(regex.test('1122'));
// true
Enter fullscreen mode Exit fullscreen mode
  • ? Matches the preceding expression 0 or 1 time, that is preceding pattern is optional: 
let regex = /hii?d/;

console.log(regex.test('hid'));
// true

console.log(regex.test('hiid'));
// true

console.log(regex.test('hiiid'));
// false
Enter fullscreen mode Exit fullscreen mode
  • ^ Matches the beginning of the string, the regex that follows should be at the start of the test string: 
let regex = /^h/;

console.log(regex.test('hi'));
// true

console.log(regex.test('bye'));
// false
Enter fullscreen mode Exit fullscreen mode
  • $ Matches the end of the string, the regex that precedes it should be at the end of the test string: 
let regex = /.com$/;

console.log(regex.test('test@email.com'));
// true

console.log(regex.test('test@email'));
// false
Enter fullscreen mode Exit fullscreen mode
  • {N} Matches exactly N occurrences of the preceding regex: 
let regex = /hi{2}d/;

console.log(regex.test('hiid'));
// true

console.log(regex.test('hid'));
// false
Enter fullscreen mode Exit fullscreen mode
  • {N,} Matches at least N occurrences of the preceding regular expression. 
let regex = /hi{2,}d/;

console.log(regex.test('hiid'));
// true

console.log(regex.test('hiiid'));
// true

console.log(regex.test('hiiiid'));
// true
Enter fullscreen mode Exit fullscreen mode
  • {N,M} Matches at least N occurrences and at most M occurrences of the preceding regex (when M > N). 
let regex = /hi{1,2}d/;

console.log(regex.test('hid'));
// true

console.log(regex.test('hiid'));
// true

console.log(regex.test('hiiid'));
// false
Enter fullscreen mode Exit fullscreen mode
  • X|Y Alternation matches either X or Y: 
let regex = /(red|yellow) bike/;

console.log(regex.test('red bike'));
// true

console.log(regex.test('yellow bike'));
// true

console.log(regex.test('brown bike'));
// false
Enter fullscreen mode Exit fullscreen mode

Note: To use any special character as a part of the expression, for example if you want to match literal + or ., then you’ll need to escape them with a backslash \. Like so:

let regex = /a+b/;  
// this doesn't work

var regex = /a\+b/; 
// this works!

console.log(regex.test('a+b')); 
// true
Enter fullscreen mode Exit fullscreen mode

Reviewing Regex

With these concepts fresh in our minds, let’s review what we’ve learned!

Match any 10 digit number:

let regex = /^\d{10}$/;

console.log(regex.test('4658264822'));
// true
Enter fullscreen mode Exit fullscreen mode

So \d matches any digit character. {10} matches the previous expression, in this case \d exactly 10 times. So if the test string contains less than or more than 10 digits, the result will be false.

Match a date with the following format:
DD-MM-YYYY or DD-MM-YY

let regex = /^(\d{1,2}-){2}\d{2}(\d{2})?$/;

console.log(regex.test('01-01-2000'));
// true

console.log(regex.test('01-01-00'));
// true

console.log(regex.test('01-01-200'));
// false
Enter fullscreen mode Exit fullscreen mode

Here we’ve wrapped the entire expression inside ^ and $, so that the match spans the entire string. ( is the start of first sub-expression. \d{1,2} matches at least 1 digit and at most 2 digits. - matches the literal hyphen character. ) is the end of first sub-expression.

Then {2} matches the first sub-expression exactly 2 times. \d{2} matches exactly 2 digits. (\d{2})? matches exactly 2 digits. However it’s optional, so either year contains 2 digits or 4 digits.

Summary

And there we go! We’ve examined Regular Expressions from the very basics right through to more advanced implementations. Including both the literal and constructor methods, testing methods, flags and character syntax.

Regular expressions can indeed be fairly complex! However, taking the time to learn the syntax will greatly help you to identify the regex patterns more easily. Any new confidence you gain will surely have you ready to conquer the next obstacle you encounter on your coding journey!

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
Buy Me A Coffee If you enjoyed this article & would like to leave a tip — click here

🌎 Let's Connect

Image
CopilotKit
Image
Pesona Jimin BTS: Dari Penari Cemerlang Menjadi Ikon Global
Image
How to ship good code to production

webdev, startup, indiehack
Image
Why People Don't Care About Brown Chesterfield Sofa
Image
Why PHP is the Go-To Language in 2024: Trends, Innovations, and Insights You Can't Miss!

php, webdev, programming, development
Image
Dakdekker Zoetermeer Meer dan 15 jaar ervaring
Image
AI: The Future of Housing, from Smart Homes to Smart Cities

python, ai, machinelearning, programming
Image
Dakdekker Zwolle Zoek je een betrouwbare dakdekker in Zwolle? Bel: 085 303 8824
Image
Oil and Gas Resistant Cables from TST Cables: Built for Extreme Conditions
Image
A Comprehensive Guide to High Temp Cables from TST Cables
Image
buy Gmail Accounts here

interview, architecture, gamedev, flutter
Image
Buy Verified LinkedIn Accounts

ai, devops, python, opensource
Image
Finding the Right Fintech Software Development Company

webdev
Image
SVG to JPG: Choosing the Right Format for Your Images
Image
Configuring OpenWRT DDNS for freedns.afraid.org
Image
buy LinkedIn account here

cloud, github, php, go
Image
Launching
Image
Identifying the Problem
Image
Building Leo Query
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .