Regular Expressions in JavaScript: The Basics

Quick Reference and Refresher Part One

Adam Sultanov
Dec 3, 2019 · 4 min read
Photo by Pisit Heng on Unsplash

Regular expressions are fun! They are like a little programming language of their own that can apply anywhere, regardless of what language is being used. They have a wide range of uses, from validating user input to renaming files and finding links or URLs on a page or in an email.

/(https?:\/\/)(www\.)?(?<domain>[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6})(?<path>\/[-a-zA-Z0-9@:%_\/+.~#?&=]*)?/

Regular expressions are also confusing. They look like gobbledygook no matter what language one is used to and seem incomprehensible to the beginner. O’Reilly has a 300+ page book just about using regular expressions. However, they are not actually that difficult to understand once you can identify the symbols that are used and how they work together. Once you go just beyond the surface you can decipher just about any regular expression out there, and start to construct your own.

Basic Syntax

Regular expressions are named so because they are regular (they adhere to a specific set of patterns) and they are expressions (they are mathematical representations) of text. For space I’ll refer to them as regex going forward. Let’s get familiar with how they look.

The easist way to identify regex is by the forward slashes / on either side. Almost any time you see a regex it will be in the form /some rules here/. For example, given the string “abcdefghijklmnopqrstuvwxyz”, the regex /abc/ will match “abc”, the first three characters.

However, to make really powerful regular expressions you need help from some special characters. And here are the symbols I mentioned earlier, called :

/ \ | ^ $ ? + . * ( ) [ ] { }

What that means is that these characters do something special when you find them in a regex, i.e. a plain $ in a regex doesn’t refer to dollar amounts. We’ve already seen / (it represents the start and end of regexes) and we’ll look at the rest over the course of this tutorial. The next most important is the backslash \.

Escapes

A question you might have is, “if the dollar sign $ isn’t a dollar sign, what do I do if I want to match an actual dollar sign!?” That’s where the backslash comes in; it’s first function is to special characters. So the regex /\$/ would match the $ character, /\*/ would match the * character, and so on.

\/ \\ \| \^ \$ \? \+ \. \* \( \) \[ \] \{ \}

The other way the backslash metacharacter is used is essentially the reverse. Instead of taking a special character and making it a literal character, you can also take a literal character (some of them, anyway) and turn them into special characters. The list of these is fairly short and we’ll cover them later.

\b \B \c \d \D \f \n \r \s \S \t \u \v \w \W \x \#

Flags

Another thing that can be confusing is that that can be used in regex. These are letters that come after the closing slash / that allow you to use some advanced features. These are g, i, m, s, u, and y, but the only ones you will commonly encounter are g and i.

g indicates a global search, meaning your regex will match all possible patterns in a string instead of just return the first one it finds. For example, given the string "do re mi fa so la ti do”, /\w+a/ will match “fa” but /\w+a/g will return both the matches “fa” and “la”.

i indicates a search is non-case sensitive, or . For example, given the string “Adam”, /a/ will match the lower-case “a”, but /a/i will match the first, upper-case “A”.

Photo by Kara Eads on Unsplash

The real power of regex comes into play not when you are matching something specific, but when you are matching something nonspecific. More accurately, when you are looking for a range of possibilities, strings that share some general structure but can vary entirely in their actual content. We’ll take a look at this in Part Two:Brackets and beyond. Thanks for reading!

Part Three: Operators ~ Part Four:Examples

JavaScript in Plain English

Learn the web's most important programming language.

Adam Sultanov

Written by

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

More from JavaScript in Plain English

5 Secret features of JSON.stringify()

More from JavaScript in Plain English

More from JavaScript in Plain English

7 really good reasons not to use TypeScript

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade