Split a String with multiple Separators using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Split a String with multiple Separators in JavaScript #

Use the String.split() method to split a string with multiple separators, e.g. str.split(/[-_]+/). The split method can be passed a regular expression containing multiple characters to split the string with multiple separators.

index.js
const str = 'a-b_c-d'; const split1 = str.split(/[-_]+/); console.log(split1); // 👉️ ['a', 'b' , 'c', 'd']
If you're looking to avoid regular expressions, scroll down to the example that uses the replaceAll method.

We passed a regular expression to the String.split method.

The forward slashes / / mark the beginning and end of the regular expression.

The square brackets [] are called a character class and match either one of the provided characters. In the example, we match a hyphen or an underscore.

The plus + matches the preceding item one or more times. In the example, it matches a hyphen or an underscore one or more times.

You can adjust the separators by adding the characters you need to match between the square brackets. This example splits on a space and a dot.
index.js
const str = 'a.b c.d'; const split1 = str.split(/[.\s]+/); console.log(split1); // 👉️ ['a', 'b', 'c', 'd']

The \s special character matches whitespace (spaces, tabs, newlines).

If you need a regex cheatsheet, check out this one from MDN.

You could also use a pipe | (or) to simplify your regular expression, for example a|b matches a or b.

index.js
const str = 'a.b c.d'; const split2 = str.split(/\.|\s/); console.log(split2); // 👉️ ['a', 'b', 'c', 'd']
We used a pipe | (or) symbol in our regular expression. The dot . is a special character, so we had to escape it using a backslash.

This code snippet achieves the same result as the regex that used a character class [].

If you're looking to avoid using regular expressions, use the String.replaceAll method.

Split a String with multiple Separators using replaceAll #

To split a string with multiple separators:

  1. Use the String.replaceAll() method to replace the separators with a single, unified character.
  2. Use the String.split() method to split the string on the unified character.
index.js
const str = 'one.two three.four'; const split4 = str.replaceAll('.', '$').replaceAll(' ', '$').split('$'); console.log(split4); // 👉️ ['one', 'two', 'three', 'four']

By replacing all occurrences of the multiple separators with the same character, we get a string with a single separator, on which we can use the split method without any regular expressions.

This is a bit unintuitive at first, but the dollar sign $ doesn't matter in this example, it could be any character, e.g. a comma.

All we care about is unifying the separators into a single character, which we can pass to the split() method.

Alternatively, you could chain calls to the String.split and Array.join methods.

Split a String with multiple Separators using split and join #

index.js
// ✅ split on each dot and space const str = 'a.b c.d'; const split3 = str.split('.').join('$').split(' ').join('$').split('$'); console.log(split3); // 👉️ ['a', 'b', 'c', 'd']

The first call to the split() method splits the string on each dot.

We then join the string with a dollar sign separator.

index.js
const str = 'a.b c.d'; // 👇️ "a$b c$d" console.log(str.split('.').join('$'));

The next step is to split by a space and join by a dollar sign again.

We are essentially replacing the dots and spaces with dollar signs, so we can unify the two separators into 1 and split using the single separator.

This is a two-step process:

  1. Replace all dots and spaces with a single character
  2. Split the string on the single character
I'm not a huge fan of using regular expressions, however in this scenario, I find the regex approach to be the most intuitive.

The replaceAll method is also easy to read, but it's a bit more indirect and takes a second to understand.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.