Skip to content
Tutorial Reference

How to Split a String by a Regex in JavaScript

Learn how to use regular expressions with JavaScript's split() method to parse strings by complex patterns, multiple delimiters, or character types, including handling empty strings in results.

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, possibly 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']

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.

Navigation