How to create a regular expression in JavaScript

Regular expressions, often abbreviated as regex, are sequences of characters that form a search pattern. They are incredibly useful for validating, searching, or manipulating strings in programming. Understanding them can feel daunting at first, but once you grasp the core concepts, you’ll find them to be an invaluable tool in your coding arsenal.

At their essence, regular expressions allow you to describe a set of strings using a concise syntax. For instance, the expression /abc/ matches any string containing “abc” anywhere within it. This straightforward principle becomes the foundation for much more complex patterns.

A key aspect of regex is its ability to define rules for matching. You start with literal characters, but can incorporate special characters for advanced functionality. For example, the dot . matches any single character, while the asterisk * matches zero or more of the preceding element.

The syntax can certainly be cryptic at times. Here’s a basic example to illustrate the structure:

let regex = /hello/;
let testString = "hello world";
console.log(regex.test(testString)); // true

As you dive deeper, you’ll encounter character classes. These are defined using square brackets, allowing you to match a set of characters. For example, the regex /[aeiou]/ will match any vowel in the string. Using this, you can find all vowels in a sentence with:

let vowelRegex = /[aeiou]/g;
let sentence = "The quick brown fox.";
let matches = sentence.match(vowelRegex);
console.log(matches); // ['e', 'u', 'i', 'o', 'o', 'o']

Anchors also come into play, which help in specifying the position of a match within a string. The caret ^ signifies the start of a string, whereas the dollar sign $ indicates the end. This is particularly useful for validating input formats, such as an email or a URL.

Another important concept is grouping, which is done using parentheses (). Grouping can capture parts of the match and be referenced later. For example:

let dateRegex = /(d{2})/(d{2})/(d{4})/;
let dateString = "25/12/2022";
let parts = dateRegex.exec(dateString);
console.log(parts); // ["25/12/2022", "25", "12", "2022"]

The flexibility of regular expressions allows developers to match almost any pattern they can think of. It’s worth mentioning that mastering regex does require practice and patience.

Creating your first regular expression

In JavaScript, there are two ways to create a regular expression. You’ve seen the literal syntax, /pattern/flags, which is what you should use 99% of the time. It’s clean, and more importantly, it’s efficient. The JavaScript engine can parse and compile the expression when the script itself is loaded, not at runtime. However, sometimes you don’t know the exact pattern ahead of time. Perhaps it’s being constructed from user input or built dynamically from other variables. For these cases, you use the RegExp object constructor.

let userSearchTerm = "world";
// Note: flags are passed as a second string argument
let dynamicRegex = new RegExp(userSearchTerm, "i"); // 'i' flag for case-insensitivity

console.log(dynamicRegex.test("Hello World!")); // true

The biggest trap with the RegExp constructor is handling backslashes. Because you’re creating the pattern from a regular string, you have to escape any backslashes that are part of the regex syntax. A special character sequence like d (for any digit) in a regex literal must be written as '\d' when passed as a string to the constructor. This is a common source of bugs that will have you scratching your head until you remember that you’re dealing with string escaping rules first, before the string is even parsed as a pattern.

// Literal regex for one or more digits
let literalDigitRegex = /d+/;

// The equivalent using the constructor. Note the double backslash.
let constructorDigitRegex = new RegExp('\d+');

let testString = "Order #12345 is complete.";
console.log(testString.match(literalDigitRegex)[0]);      // "12345"
console.log(testString.match(constructorDigitRegex)[0]); // "12345"

Now, let’s talk more about quantifiers, which specify how many times a character or group must appear. We’ve seen the asterisk * for “zero or more,” but that can sometimes be too broad. Its cousins, the plus sign + and the question mark ?, are often more useful. The plus sign + means “one or more.” It’s just like * but it insists on finding at least one match. The question mark ? means “zero or one,” which is perfect for matching optional characters, like the ‘s’ in ‘https’ or an optional middle initial in a name.

// Matches a username that must contain at least one character
let usernameRegex = /^[a-z0-9_]+$/i;
console.log(usernameRegex.test("test_user_01")); // true
console.log(usernameRegex.test(""));             // false

// Matches 'color' or 'colour'
let colorRegex = /colou?r/;
console.log(colorRegex.test("The color is red."));   // true
console.log(colorRegex.test("The colour is red.")); // true

For even more precise control, you use curly braces {}. They let you specify an exact number of repetitions, a minimum, or a range. For example, d{4} will match exactly four digits-no more, no less. d{2,4} will match a sequence of digits that is between two and four characters long. This is indispensable for validating things like postal codes or phone number segments where you know the exact length of the components you’re looking for. You can also specify an open-ended range. For instance, w{5,} matches any word character that repeats five or more times.

Common patterns and syntax explained

When it comes to more advanced matching, you have lookaheads and lookbehinds. These are zero-width assertions that check for a condition without consuming characters in the string. A lookahead is denoted by (?=...) , while a lookbehind is denoted by (?<=...) . For example, you can use a positive lookahead to find all instances of “foo” that are followed by “bar”:

let lookaheadRegex = /foo(?=bar)/g;
let testString = "foobar foobar baz";
let matches = testString.match(lookaheadRegex);
console.log(matches); // ['foo', 'foo']

Lookbehinds work in a similar manner. If you wanted to match a “bar” that is preceded by “foo”, you would use:

let lookbehindRegex = /(?<=foo)bar/g;
let testString = "foobar foobar baz";
let matches = testString.match(lookbehindRegex);
console.log(matches); // ['bar', 'bar']

Another valuable feature of regex is the ability to combine multiple patterns using alternation. This is achieved with the pipe character |. For example, if you want to match either “cat” or “dog”, you can write:

let animalRegex = /cat|dog/g;
let testString = "I have a dog and a cat.";
let matches = testString.match(animalRegex);
console.log(matches); // ['dog', 'cat']

Additionally, you can control the scope of alternation with parentheses, allowing you to group expressions together. For instance, if you want to match either “cat” followed by “fish” or “dog” followed by “bone”, you can write:

let petFoodRegex = /(catfish|dogbone)/g;
let testString = "I own catfish and dogbone.";
let matches = testString.match(petFoodRegex);
console.log(matches); // ['catfish', 'dogbone']

Regular expressions can also be modified with flags that alter their behavior. The g flag enables global matching, which means that the regex will search through the entire string, returning all matches rather than stopping after the first. The i flag makes the search case-insensitive, and the m flag changes the behavior of ^ and $ so that they match the start and end of each line within a multi-line string. For instance, if you want to find all instances of “hello” in a case-insensitive manner, you would use:

let helloRegex = /hello/gi;
let testString = "Hello there, hello world!";
let matches = testString.match(helloRegex);
console.log(matches); // ['Hello', 'hello']

As you can see, regular expressions are not just about finding patterns; they allow for a wide array of complex string manipulations. Understanding these components and how they interact will greatly enhance your ability to work with strings efficiently. As you become more comfortable with regex, you’ll discover that you can construct expressions that are both powerful and elegant, capable of expressing even the most intricate string requirements.

Now, let’s look at practical examples and use cases in JavaScript…

Practical examples and use cases in JavaScript

All this theory is well and good, but the real power of regular expressions becomes apparent when you apply them to solve day-to-day programming problems. One of the most common applications is input validation. You want to ensure that user-provided data, like a phone number or an email address, conforms to a specific format before you even think about sending it to your server.

Let’s take a simple North American phone number. Users might enter it in various ways: (123) 456-7890, 123-456-7890, 123.456.7890, or just 1234567890. Writing a bunch of if/else statements to handle this is a nightmare. A single regular expression can handle all of these cases elegantly.

// Matches common US phone number formats
const phoneRegex = /^(?:(?(d{3}))?[-.s]?)?(d{3})[-.s]?(d{4})$/;

console.log(phoneRegex.test("(555) 555-5555")); // true
console.log(phoneRegex.test("555-555-5555"));   // true
console.log(phoneRegex.test("555.555.5555"));   // true
console.log(phoneRegex.test("555 555 5555"));   // true
console.log(phoneRegex.test("5555555555"));     // true
console.log(phoneRegex.test("555-5555"));       // false

Another classic validation task is checking for password strength. This is a perfect use case for the lookaheads we discussed earlier. You can enforce several rules-such as requiring an uppercase letter, a lowercase letter, a digit, and a minimum length-without the regex becoming impossibly convoluted. The trick is to stack multiple lookaheads at the start of the pattern. Each one asserts a condition without consuming any characters.

// Password must be at least 8 characters, with one lowercase, one uppercase, and one digit.
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d).{8,}$/;

console.log(passwordRegex.test("Password123")); // true
console.log(passwordRegex.test("password123")); // false (no uppercase)
console.log(passwordRegex.test("PASSWORD123")); // false (no lowercase)
console.log(passwordRegex.test("Password"));    // false (no digit)
console.log(passwordRegex.test("Pass123"));     // false (too short)

Beyond validation, regex is indispensable for parsing strings and extracting structured data. Imagine you need to break a URL down into its constituent parts. You can use capturing groups to pull out the protocol, domain, and path in one fell swoop. The .exec() method is your friend here, as it returns an array containing the full match and all the captured substrings.

const urlRegex = /^(https?://)?([^/]+)(/.*)?$/;
const url = "https://www.example.com/path/to/page?query=string";

const parts = urlRegex.exec(url);

if (parts) {
  console.log("Full match:", parts[0]);
  console.log("Protocol:", parts[1]); // "https://""
  console.log("Domain:", parts[2]);   // "www.example.com"
  console.log("Path:", parts[3]);     // "/path/to/page?query=string"
}

Finally, let’s look at search-and-replace operations. The String.prototype.replace() method becomes a precision tool when paired with a regex. You can perform simple substitutions, but the real magic happens when you pass a function as the second argument. This function gets called for every match, and its return value is used as the replacement. This allows for complex, conditional logic during the replacement process. A great example is converting simple markdown links into HTML anchor tags.

const markdown = "Check out this guide: [A Cool Guide](https://example.com/guide). Also see [Another Page](/another).";
const linkRegex = /[(.*?)]((.*?))/g;

const html = markdown.replace(linkRegex, (match, text, url) => {
  // You could add more logic here, like validating the URL
  // or adding target="_blank" to external links.
  return &lt;a href="${url}"&gt;${text}&lt;/a&gt;; }); console.log(html); // "Check out this guide: <a href="https://example.com/guide">A Cool Guide</a>. Also see <a href="/another">Another Page</a>."

Of course, the real world is messy, and you’ll find plenty of edge cases that these patterns don’t cover. Feel free to share any particularly nasty ones you’ve encountered.