Skip to main content

How to Split a String by a Regex in JavaScript

While the String.prototype.split() method is commonly used with a simple string delimiter, its real power is unlocked when you pass it a regular expression. This allows you to split a string based on complex patterns, multiple different delimiters, or character types, providing a flexible and powerful way to parse structured text.

This guide will teach you how to use a regular expression with the split() method, how to handle multiple delimiters, and how to clean up the resulting array by removing any empty strings.

The Core Method: String.prototype.split() with a Regex​

The split() method can accept either a string or a regular expression as its separator. When a regex is provided, the string is split at every point that matches the pattern.

Syntax:

'your-string'.split(/regex-pattern/);

where:

  • / ... /: These are the delimiters that mark the beginning and end of the regular expression.
  • regex-pattern: The pattern that defines where the splits should occur.

Basic Example: Splitting by Multiple Delimiters​

This is the most common use case for a regex split. Imagine you have a string where the separators are inconsistent—it might be a comma, a period, or a space.

For example, you need to split a string into words, but the delimiters are mixed.

// Problem: Split this string by ',', '.', and any whitespace.
const dataString = 'one,two.three four';

The solution is to use a character set ([...]) in your regular expression. A character set matches any single character contained within the brackets.

const dataString = 'one,two.three four';

// The regex /[,.\s]/ matches a comma, a dot, OR a whitespace character.
const result = dataString.split(/[,.\s]/);

console.log(result);
// Output: ['one', 'two', 'three', 'four']

How the Regex Split Works​

In the example str.split(/[,.\s]/), the split() method scans the dataString.

  • It first finds a ,, splits the string, and adds "one" to the result.
  • It then finds a ., splits again, and adds "two".
  • Finally, it finds a space (represented by the special character \s), splits, and adds "three".
  • The remainder of the string, "four", is added as the last element.

The split() method does not require the global (g) flag; it will always split on all matches it finds in the string.

Common Use Cases​

Splitting by Any Digit​

You can use the special character \d to match any digit from 0 to 9. This is useful for parsing strings where numbers act as separators.

const code = 'partA1partB2partC';

const result = code.split(/\d/);

console.log(result);
// Output: ['partA', 'partB', 'partC']

Performing a Case-Insensitive Split​

You can use the i flag with your regular expression to make the split case-insensitive.

const data = 'valueA-dataB-moreData';

// The regex /[ab]/i will split on 'a', 'A', 'b', or 'B'.
const result = data.split(/[ab]/i);

console.log(result);
// Output: ['v', 'lue', '-d', 't', '', '-moreD', 't', '']

Handling Empty Strings in the Result​

A common side effect of splitting by a regex is the creation of empty strings in the output array. This happens if you have multiple delimiters next to each other, or if a delimiter is at the very beginning or end of the string.

// Problem: The double commas and trailing dot will create empty strings.
const messyData = 'one,,two.three.';

const result = messyData.split(/[,.]/);

console.log(result);
// Output: ['one', '', 'two', 'three', '']

The cleanest way to remove these empty strings is to chain the Array.prototype.filter() method directly after the split().

const messyData = 'one,,two.three.';

const result = messyData.split(/[,.]/).filter(item => item);

console.log(result);
// Output: ['one', 'two', 'three']
note

This filter(item => item) is a concise trick. The filter method keeps an element only if the callback function returns a "truthy" value. Empty strings ("") are "falsy" in JavaScript, so they are automatically removed from the final array.

Conclusion​

Using a regular expression with String.prototype.split() provides a powerful and flexible way to parse complex strings.

  • Use a character set ([...]) to split a string by multiple different delimiters (e.g., split(/[,;|\s]/)).
  • Use special characters like \d (digits) or flags like i (case-insensitive) for more advanced splitting logic.
  • If your pattern might produce empty strings in the result, chain the .filter(Boolean) or .filter(item => item) method to easily remove them.

By leveraging regular expressions, you can turn split() from a simple tool into a sophisticated parsing engine.

Table of Contents