DeveloperHandbook.com

A reference guide of basics of Regular Expressions (Regex) in JavaScript

A reference guide of basics of Regular Expressions (Regex) in JavaScript

Published


Welcome back, future Jon. Congratulations, you have successfully forgotten how to regex again. As a reminder to yourself, you have attempted to learn regex many times over the years, and at times you have gotten pretty good at it. Unfortunately, however, it has probably been a while since you last wrote a regex, and you have completely forgotten how to do ANYTHING and EVERYTHING, even the absolute fundamentals. Fear not, I have you covered. Once you read the following guide it will all start flooding back.

A while back you created a CodeSandbox with some really helpful examples of various techniques. In case you have forgotten the URL, it is; Interactive Regexes.

Please remember the following;

How to use a regex in JavaScript

There are a couple of ways;

  1. RegExp constructor function. You can use the RegExp constructor function. More information on that is available on MDN.

  2. Regex is a first class citizen in JavaScript, so you can use it natively, for example; const expression = /jazz/gi; (performs a global, case insensitive search for the word jazz).

  3. String.match. That’s right, string itself has built in support for matching on a regex.

Some simple examples;

const expression = "https?://(?:www.)?(?:[a-z]+).co(?:m|.uk)"
const exampleText =
  "For more information, visit https://www.developerhandbook.com, or http://jpreecedev.com, alternatively visit https://www.amazon.co.uk for some reason."

const regexp = new RegExp(expression, "gi")
let res
while ((res = regexp.exec(exampleText))) {
  console.log(res) // ["https://www.developerhandbook.com"] ["http://jpreecedev.com"] ["https://www.amazon.co.uk"]
}

const nativeExpression = /https?:\/\/(?:www.)?(?:[a-z]+)\.co(?:m|\.uk)/gi
while ((res = nativeExpression.exec(exampleText))) {
  console.log(res) // ["https://www.developerhandbook.com"] ["http://jpreecedev.com"] ["https://www.amazon.co.uk"]
}

const replacableExpression = /foo/gi
const replacableText = "This is foo and foo and then some more foo"
console.log(replacableText.replace(replacableExpression, "bar")) // This is bar and bar and then some more bar

console.log(exampleText.match(regexp)) //["https://www.developerhandbook.com", "http://jpreecedev.com", "https://www.amazon.co.uk"]

In my humble opinion, the last example of using string.match is the cleanest syntatically and will result in having to write less code. The trade-off is that string.match returns less information about each match, which you may or may not care about.

There is a CodeSandbox, very basic regex examples, for reference.

The fundamentals of regular expressions in JavaScript

Typically, in the real world, you will use regexes for the following reasons;

JavaScript Regex Metacharacters

Metacharacters are special reserved characters. When you use a metacharacter in a regex, like a period (”.”) for example, it will have some meaning to the regex engine. If this is not what you intended, make sure to escape the metacharacter using a forward slash (”\”), which will tell the engine that you meant to use the literal character as part of the match.

Some examples of metacharacters;

Metacharacter Meaning
()Capture group
|Logical OR, usually used within a capture group
(?<Name>)Named capture group
.Matches any character, including a space
* Star. Matches the preceding item, items, or nothing (doesn't fail)
?Optional. Optionally matches the preceding item (one)
?: Don't count capture group. Capture group is not included in `matches`
+Matches one or more items (fails if no match)
{min, max} Allows for a minimum or maximum number of items. Max is optional for specific number.
\ Escape character for escaping metacharacters. \$ makes $ a literal character rather than a metacharacter.
\s* Matches any number of literal whitespace characters. Space, tab, new line, carriage return
\S*Matches anything that is not whitespace
\dMatches a single digit
(?=)Positive Lookahead
(?<=)Positive Lookbehind

There are more metacharacters, but the above are probably all you need to know for 95% of scenarios.

Further examples of JavaScript regexes

To hopefully get the regex memories flooding back, here is a walkthrough of some simpler regexes followed by some with more complexity. I explain some of the decisions made and the thought processes involved at the time of writing.

Loosely match a British mobile phone number

Criteria;

Resulting expression; (?:0|\+44)7\d{9}

Explanation;

Find a URL(s)

Criteria;

Resulting expression; https?:\/\/(?:www\.)?(?:[a-z]+)\.co(?:m|\.uk)

Explanation;

Insert thousand separators

Criteria;

Resulting expression; (?<=\d)(?=(?:\d\d\d)+\b)

Explanation;

The result is best visualised with a screenshot from Regex101.com.

Matching Numbers

Note how the site highlights the position of each match, as an empty character. Replacing the empty character with one or more characters (i.e. a comma ,) using string.replace is how you do an insert.

Summary

You’re welcome.