Understanding Regular Expressions in JavaScript

Understanding Regular Expressions in JavaScript

Regular expressions, often abbreviated as regex or regexp, are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. They can be used with the RegExp methods test() and exec() and with the String methods match(), replace(), search(), and split().

JavaScript's regular expressions provide a flexible and efficient way to perform complex string manipulations. Let's dive into how regular expressions work, and along the way, let's build a regex pattern to validate passwords based on certain criteria.

Regex Basics

A regular expression pattern consists of simple characters, such as /abc/, or a combination of simple and special characters, such as /ab*c/ or /Chapter (\d+)\.\d*/. The "simple characters" match the exact characters, whereas the "special characters" are known as "metacharacters," which have special meanings.

A few common metacharacters include:

  • .: Matches any single character except newline characters.

  • *: Matches the preceding expression 0 or more times.

  • +: Matches the preceding expression 1 or more times.

  • {n}: Matches exactly 'n' occurrences of the preceding expression.

  • [abc]: Matches any character among 'a', 'b', or 'c'.

(abc): Defines a group of characters that can be remembered and accessed later in the expression.

Flags in Regex

In JavaScript, regular expressions can use flags that follow the closing slash of the expression. These flags can modify the output of the regular expression. Common flags include:

  • g: global search, finds all matches rather than stopping at the first match.

  • i: case-insensitive search.

m: multiline search.

Regular Expressions for Password Validation

Let's create a regex pattern to validate a password based on the following criteria:

  • At least six characters long

  • Contains a lowercase letter

  • Contains an uppercase letter

  • Contains a digit

  • Only contains alphanumeric characters (note that '_' is not alphanumeric)

We can create our regular expression using positive lookaheads (?=), which are assertions that require the contained subpattern to match, but they don't consume characters in the string. We use this to check for multiple conditions without advancing through the string after each check.

Here's how we can write the regex:

let passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/;

Let's break this down:

  • ^: Matches the start of the string.

  • (?=.*[a-z]): Positive lookahead to ensure that at least one lowercase character exists.

  • (?=.*[A-Z]): Positive lookahead to ensure that at least one uppercase character exists.

  • (?=.*\d): Positive lookahead to ensure that at least one digit exists.

  • [a-zA-Z\d]{6,}: Ensures that the characters are alphanumeric, and that there are at least 6 of them. This forms the core part of the password, i.e., after all previous conditions are met, we require at least six alphanumeric characters.

  • $: Matches the end of the string.

Resources to learn more