Skip to main content

How to Split a String by Multiple Separators in JavaScript

A common parsing task is to split a string into an array of substrings based on several different delimiter characters. For example, you might need to process a list of tags that could be separated by commas, spaces, or semicolons.

This guide will demonstrate the modern and most effective methods for this task. We'll cover the most powerful approach using String.prototype.split() with a regular expression, and a more explicit alternative using String.prototype.replaceAll().

The most concise and powerful way to split a string by multiple different separators is to use split() with a regular expression that contains a character set ([...]).

Problem: you have a string where items are separated by an inconsistent mix of commas, spaces, and periods.

// Problem: Split this string by ',', '.', and any whitespace.
let dataString = 'apple,banana.cherry orange';

Solution: use a regular expression that matches any of the desired separators.

let dataString = 'apple,banana.cherry orange';

// The regex /[,.\s]+/ matches one or more occurrences of a comma, a dot,
// OR a whitespace character.
let result = dataString.split(/[,.\s]+/);

console.log(result);

Output:

['apple', 'banana', 'cherry', 'orange']
note

This is the recommended best practice for its power and conciseness.

An Alternative Method: Chaining replaceAll()​

If you prefer to avoid regular expressions, you can achieve the same result by first standardizing all separators to a single, consistent character, and then splitting by that character.

The logic:

  1. Use replaceAll() to replace every separator (e.g., ., ) with a single, chosen delimiter (e.g., ,).
  2. Use split() with that single delimiter.

Solution:

let dataString = 'apple,banana.cherry orange';

// 1. Unify all separators to a comma.
let unifiedString = dataString.replaceAll('.', ',').replaceAll(' ', ',');

// 2. Split by the unified separator.
let result = unifiedString.split(',');

console.log(result);

Output:

['apple', 'banana', 'cherry', 'orange']
note

While more verbose, this method can be easier to read for developers who are not comfortable with regular expressions.

How the Regular Expression Works​

Let's break down the recommended regex: /[,.\s]+/.

  • / ... /: The delimiters for the regular expression.
  • [...]: A character set. It tells the regex engine to match any single character that appears inside the brackets.
    • ,.: Matches a literal comma or a literal dot.
    • \s: A special "metacharacter" that matches any whitespace character (space, tab, newline).
  • +: A quantifier. It matches the preceding token (our character set) one or more times. This is a crucial addition that handles cases where multiple delimiters are next to each other (e.g., "apple, banana"), treating the entire , sequence as a single split point.

How to Handle Empty Strings in the Result​

If your string has leading or trailing delimiters, or multiple delimiters grouped together, the split() method can produce empty strings in the output array.

Example of problem:

let messyData = ',apple,,banana.';

// The regex will match the single delimiters.
let result = messyData.split(/[,.]/);

console.log(result);

Output:

['', 'apple', '', 'banana', '']

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

let messyData = ',apple,,banana.';

let result = messyData
  .split(/[,.]+/)     // The `+` here helps group delimiters
  .filter(Boolean);   // `filter(Boolean)` is a concise way to remove falsy values

console.log(result);

Output:

['apple', 'banana']
note

This filter(Boolean) is a common and concise trick. The filter method keeps an element only if the callback returns a "truthy" value. The Boolean constructor, when used as a function, converts each item to its boolean equivalent. Since empty strings ("") are "falsy," they are automatically removed from the final array.

Conclusion​

Splitting a string by multiple separators is a simple task with the right modern tools.

  • The split() method with a regular expression is the recommended best practice. It is powerful, concise, and can handle complex patterns. A character set like split(/[,;\s]/) is the most common approach.
  • Chaining replaceAll() calls before a final split() is a valid and readable alternative, especially if you want to avoid regular expressions.
  • If your data might produce empty substrings, chain the .filter(Boolean) method to easily remove them from the result.

Table of Contents