JavaScript Split with Multiple Separators: Easy Guide

If you have ever tried to split a JavaScript string using commas, spaces, semicolons, pipes, or several other delimiters at once, you may have noticed that split() does not accept a simple list of separators. The good news is that JavaScript already provides a clean solution: use a regular expression as the separator.

This approach is especially useful when the input format is inconsistent. For example, a value might contain commas in one place, semicolons in another, and extra spaces throughout. Instead of calling split() repeatedly, you can describe all acceptable separators in one regular expression.

How Does split() Work in JavaScript?

The JavaScript split() method divides a string into an array of smaller strings. You provide a separator that tells JavaScript where each division should occur. The separator can be a string or a regular expression.

The basic syntax is:

string.split(separator);

You can also provide an optional limit:

string.split(separator, limit);

For a single separator, the method is straightforward:

const fruits = "Apple,Banana,Orange";

const result = fruits.split(",");

console.log(result);

Output:

["Apple", "Banana", "Orange"]

Here, every comma is treated as a delimiter and removed from the returned array.

The problem starts when the same data may use different separators.

Splitting With a Single Character

Suppose your string contains names separated only by semicolons:

const names = "John;Sarah;Mike;David";

const result = names.split(";");

console.log(result);

Output:

["John", "Sarah", "Mike", "David"]

This is the simplest and most readable approach when you know that only one delimiter is possible.

What Happens With Multiple-Character Separators?

A common misunderstanding is that passing a string containing several characters automatically means "split on any of these characters."

For example:

const value = "one,two;three";

console.log(value.split(",;"));

This does not mean "split on comma or semicolon."

A string separator is treated as a sequence. JavaScript looks for the exact ",;" sequence. If your goal is to split on either comma or semicolon, a regular expression is the better choice.

How to Split a String With Multiple Separators

The easiest solution is to pass a regular expression to split().

For example, suppose a string contains commas, semicolons, and colons:

const text = "Apple,Banana;Orange:grape";

const result = text.split(/[,;:]/);

console.log(result);

Output:

["Apple", "Banana", "Orange", "grape"]

The character class [ , ; : ] tells the regular expression to match any one of the listed characters.

In actual JavaScript, you should write it without the spaces:

const result = text.split(/[,;:]/);

This is generally the cleanest answer when you need to split a JavaScript string using multiple single-character delimiters.

Split on Commas, Semicolons, and Pipes

You can add a pipe character to the same pattern:

const text = "Apple,Banana;Orange|Grape";

const result = text.split(/[,;|]/);

console.log(result);

Output:

["Apple", "Banana", "Orange", "Grape"]

This technique works with many other delimiter characters as well.

For example:

const text = "one,two;three|four:five";

const result = text.split(/[,;|:]/);

console.log(result);

Output:

["one", "two", "three", "four", "five"]

Split on Multiple Separators With Spaces

Real-world strings often contain inconsistent spacing:

Apple, Banana; Orange | Grape

If you use:

const result = text.split(/[,;|]/);

you will get values containing leading spaces:

["Apple", " Banana", " Orange ", " Grape"]

That may not be what you want.

One option is to remove the extra whitespace afterward:

const result = text
  .split(/[,;|]/)
  .map(item => item.trim());

console.log(result);

Output:

["Apple", "Banana", "Orange", "Grape"]

This is often preferable because it keeps the regular expression simple and makes the cleanup step explicit.

Split on Separators and Ignore Surrounding Whitespace

You can also include whitespace directly in the regular expression:

const text = "Apple, Banana; Orange | Grape";

const result = text.split(/\s*[,;|]\s*/);

console.log(result);

Output:

["Apple", "Banana", "Orange", "Grape"]

Here, \s* means zero or more whitespace characters. The pattern therefore matches the delimiter plus any spaces immediately before or after it.

For maintainable code, however, .trim() can sometimes be easier for other developers to understand.

Split on One or More Separators

Another useful situation occurs when several delimiters appear next to one another.

Consider:

const text = "Apple,,,Banana;;;Orange";

Using:

const result = text.split(/[,;]/);

can produce empty strings because each delimiter is treated as a separate split point.

If repeated separators should behave like one separator, use +:

const result = text.split(/[,;]+/);

console.log(result);

Output:

["Apple", "Banana", "Orange"]

The + quantifier means "one or more" occurrences of the preceding character class.

This is particularly useful when input comes from users or external systems where duplicate delimiters may appear.

A Practical Example With Different Delimiters

Imagine you receive this string:

const data =
  "Name:John, Age:30; Country:India | Role:Developer";

If you want to separate the individual fields regardless of whether they are separated by commas, semicolons, or pipes, you can write:

const fields = data.split(/\s*[,;|]\s*/);

console.log(fields);

The result is:

[
  "Name:John",
  "Age:30",
  "Country:India",
  "Role:Developer"
]

You can then process each field separately:

fields.forEach(field => {
  console.log(field);
});

This is much cleaner than repeatedly calling split() for each delimiter.

How to Split on Spaces, Commas, and Other Characters

Sometimes the requirement is broader: split whenever whitespace or punctuation appears.

For example:

const text = "JavaScript,HTML CSS;React";

const result = text.split(/[\s,;]+/);

console.log(result);

Output:

["JavaScript", "HTML", "CSS", "React"]

The pattern contains:

• \s — whitespace
• , — comma
• ; — semicolon
• + — one or more consecutive matches

This can be useful for converting loosely formatted text into a list of individual values.

Be careful with broad patterns, though. If punctuation has meaning inside your data, splitting on it may destroy information you need.

Using split() With the limit Parameter

The second argument of split() lets you limit the number of items returned.

For example:

const text = "Apple,Banana,Orange,Grape";

const result = text.split(",", 2);

console.log(result);

Output:

["Apple", "Banana"]

The limit controls the maximum number of returned array entries. Text beyond that point is not included in the result. A limit of 0 returns an empty array.

You can use the same idea with a regular expression:

const text = "Apple,Banana;Orange|Grape";

const result = text.split(/[,;|]/, 3);

console.log(result);

Output:

["Apple", "Banana", "Orange"]

Common Mistakes When Splitting Strings

Knowing the syntax is only part of the solution. Several small mistakes can produce unexpected results.

Mistake 1: Passing Multiple Separators as a String

This code is usually incorrect:

const result = text.split(",;");

It searches for the exact ",;" sequence rather than treating comma and semicolon as alternatives.

Use:

const result = text.split(/[,;]/);

Mistake 2: Forgetting to Escape Special Regex Characters

Some characters have special meanings in regular expressions.

For example, a period is not simply a literal period inside a regex:

const text = "one.two,three";

To split on a literal period or comma, you can use:

const result = text.split(/[.,]/);

Inside a character class, the period does not need the same escaping as it would outside one.

For more complex patterns, make sure each regex metacharacter is handled correctly.

Mistake 3: Leaving Extra Whitespace

Consider:

const text = "Apple, Banana, Orange";

const result = text.split(",");

The output contains spaces:

["Apple", " Banana", " Orange"]

Clean the values when necessary:

const result = text
  .split(",")
  .map(item => item.trim());

For multiple delimiters:

const result = text
  .split(/[,;|]/)
  .map(item => item.trim());

Mistake 4: Creating Empty Items Accidentally

Consecutive delimiters can create empty strings:

const text = "Apple,,Banana;;;Orange";

const result = text.split(/[,;]/);

console.log(result);

Depending on the pattern and input, empty entries can appear.

If repeated delimiters should be treated as one, use:

const result = text.split(/[,;]+/);

If you need additional cleanup, you can also filter empty values:

const result = text
  .split(/[,;|]/)
  .map(item => item.trim())
  .filter(Boolean);

This removes empty strings from the final array.

Should You Use Regex or Multiple split() Calls?

For a small, predictable transformation, either approach can work.

Suppose you want to split on commas and then semicolons. You could write multiple operations, but a single regular expression is usually clearer:

const result = text.split(/[,;]/);

Use a regular expression when:

• Several characters can act as delimiters.
• You want to treat repeated separators as one.
• Whitespace around delimiters needs to be handled.
• The input format is inconsistent.
• You want one operation that describes the complete splitting rule.

Use a normal string separator when:

• There is only one delimiter.
• The input format is predictable.
• You want maximum readability.
• No pattern matching is necessary.

In other words, don't reach for regex automatically. Use the simplest separator that correctly represents your data.

What Happens When a Regex Has Capturing Groups?

There is one less obvious behavior worth knowing. If the regular expression passed to split() contains capturing parentheses, the captured text can be included in the returned array.

For example:

const text = "one-1-two-2";

const result = text.split(/(\d)/);

console.log(result);

The digits captured by (\d) appear in the result.

If you only want to split the string, avoid unnecessary capturing groups. Use non-capturing groups such as (?:...) when grouping is needed but the matched text should not be returned.

For example:

const result = text.split(/(?:,|;)/);

For a simple character list, though, this is even cleaner:

const result = text.split(/[,;]/);

A Reusable Function for Multiple Delimiters

If your application performs this operation frequently, you can wrap it in a small helper:

function splitBySeparators(value) {
  return value
    .split(/[,;|]+/)
    .map(item => item.trim())
    .filter(Boolean);
}

const text = "Apple, Banana; Orange | Grape";

console.log(splitBySeparators(text));

Output:

["Apple", "Banana", "Orange", "Grape"]

This makes the intention obvious wherever the helper is used.

If different parts of your application require different separators, you can make the pattern configurable:

function splitBySeparators(value, pattern = /[,;|]+/) {
  return value
    .split(pattern)
    .map(item => item.trim())
    .filter(Boolean);
}

Then:

const result = splitBySeparators(
  "Apple/Banana,Orange;Grape",
  /[,;|/]+/
);

console.log(result);

This produces a clean array while keeping the splitting logic reusable.

FAQ

How do I split a string by multiple delimiters in JavaScript?

Pass a regular expression to split() that contains all acceptable delimiters:

const result = text.split(/[,;|]/);

This splits the string whenever it encounters a comma, semicolon, or pipe.

Can JavaScript split on multiple characters?

Yes. A regular expression can define multiple delimiter characters or more complex patterns. For example:

const result = text.split(/[,;:|]/);

Each character in the character class is treated as an alternative delimiter.

How do I split a string by comma and space?

You can use:

const result = text.split(/,\s*/);

Or split first and clean the resulting values:

const result = text.split(",").map(item => item.trim());

The second option is often easier to read.

How do I remove empty strings after splitting?

Use filter(Boolean):

const result = text
  .split(/[,;]+/)
  .filter(Boolean);

If whitespace may surround the values, trim them first:

const result = text
  .split(/[,;]+/)
  .map(item => item.trim())
  .filter(Boolean);

Do I need a regular expression to split on multiple separators?

Not always. If there is only one separator, a normal string is simpler:

text.split(",");

For multiple alternative delimiters, a regular expression is usually the most concise solution.

Does split() modify the original string?

No. Strings are immutable in JavaScript. split() returns a new array containing the resulting substrings; it does not modify the original string.

Can I split on whitespace and punctuation together?

Yes. For example:

const result = text.split(/[\s,;]+/);

This treats whitespace, commas, and semicolons as delimiters.

Conclusion

The JavaScript split() method is powerful enough to handle much more than simple comma-separated strings. When your input contains multiple possible separators, the most practical solution is usually to pass a regular expression to split().

For example:

const result = text.split(/[,;|]+/);

If your input may contain spaces, clean the resulting values:

const result = text
  .split(/[,;|]+/)
  .map(item => item.trim())
  .filter(Boolean);

The key is to match the splitting rule to the data. Use a plain string separator for simple, predictable input. Use a regular expression when several delimiters, repeated separators, or inconsistent formatting are part of the problem. The split() method supports both approaches and is widely available in modern JavaScript environments.