Split a String with multiple Separators using JavaScript

# Table of Contents

1. Split a String with multiple Separators in JavaScript
2. Split a String with multiple Separators using replaceAll
3. Split a String with multiple Separators using split and join

# 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.

Copied!
const str = 'a-b_c-d';

const arr = str.split(/[-_]+/);
console.log(arr); // 👉️ ['a', 'b' , 'c', 'd']

The String.split() method takes a separator and splits the string into an array on each occurrence of the provided delimiter.

The String.split() method takes the following 2 parameters:

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

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

Copied!
const str = 'a-b_c-d';

const arr = str.split(/[-_]+/);
console.log(arr); // 👉️ ['a', 'b' , 'c', 'd']

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.

The following code sample splits by a space and a dot.

Copied!
const str = 'a.b c.d';

const arr = str.split(/[.\s]+/);
console.log(arr); // 👉️ ['a', 'b', 'c', 'd']

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

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

Copied!
const str = 'a.b c.d';

const arr = str.split(/\.|\s/);
console.log(arr); // 👉️ ['a', 'b', 'c', 'd']

The following characters: +,-,(,),*,?,. have a special meaning in regular expressions and have to be escaped using a backslash to be interpreted as a literal character.

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

If you ever need help reading a regular expression, check out this regular expression cheat sheet by MDN.

It contains a table with the name and the meaning of each special character with examples.

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

# Split a String with multiple Separators using replaceAll

This is a two-step process:

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.

Copied!
const str = 'one.two three.four';

const arr = str
  .replaceAll('.', '$')
  .replaceAll(' ', '$')
  .split('$');
console.log(arr); // 👉️ ['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.

Copied!
const str = 'one.two three.four';

const arr = str.replaceAll('.', '-')
               .replaceAll(' ', '-')
               .split('-');
console.log(arr); // 👉️ ['one', 'two', 'three', 'four']

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

You can define a reusable function if you have to do this often.

Copied!
function splitMultiple(str, separators) {
  let replacedStr = str

  for (const separator of separators) {
    replacedStr = replacedStr.replaceAll(separator, '$')
  }

  return replacedStr.split('$')

}

const str = 'one.two three.four,five';

// 👇️ [ 'one', 'two', 'three', 'four', 'five' ]
console.log(splitMultiple(str, ['.', ' ', ',']))

The splitMultiple function takes a string and an array of separators as parameters and splits the string into an array on each occurrence of a separator.

We used the same approach in the function:

1. Replace all occurrences of the separators with a unified character (a dollar sign).
2. Split the string on the unified character (the dollar sign).

# Split a String with multiple Separators using split and join

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

Copied!
// ✅ 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.

Copied!
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.

This is a two-step process:

1. Replace all dots and spaces with a single character.
2. Split the string by 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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Split a String on Capital Letters using JavaScript
• Split a String and get First or Last Array Element in JS
• Split on the Last Occurrence of a String in JavaScript
• Split a Number into an Array in JavaScript
• Split a String removing any Empty Elements in JavaScript
• Split a String at a specific Index using JavaScript
• How to Split a String by Newline in JavaScript
• How to Split a String by a Regex in JavaScript
• How to Split a string by Spaces in JavaScript
• Split a String only on the First Occurrence of a Character
• Split a String by Special Characters in JavaScript
• Split a String every N characters in JavaScript