Split a String with multiple Separators using JavaScript

avatar

Borislav Hadzhiev

Tue Nov 16 20213 min read

banner

Photo by Cody Board

Split a String with multiple Separators in JavaScript #

To split a string with multiple separators, pass a regular expression to the split() method. For example, str.split(/[-_]+/) splits the string on all occurrences of a hyphen or underscore. The split method will split the string on any match of the regular expression.

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, which 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. It's by far the best one out there.

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. Because a dot . is a special character, 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, you can use the String.replaceAll method.

Split a String with multiple Separators using replaceAll #

To split a string with multiple separators, use the replaceAll() method to replace the separators with a single, unified character, and use the split method on the string, passing it the new separator.

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.

Split a String with multiple Separators using split / join #

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

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 a bit more indirect and takes a second to understand.

The only reason I've added the split method approach is, because the replaceAll method is not supported in Internet Explorer, so the split / join approach is an alternative, if you're looking to avoid regular expressions.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee