How do I split a string with multiple separators in JavaScript?

javascript

regex

string-manipulation

functions

byNikita Barsukov·Dec 9, 2024

Achieve string splitting with multiple separators by crafting a regular expression that signifies these separators. Voila!:

const text = "I, for one; like Roman numerals.";
//Regex directs splitting on ',', ' ', ';'
const splitText = text.split(/[, ;]+/);

Result: ["I", "for", "one", "like", "Roman", "numerals."]. This regex covers commas, spaces, and semicolons as separators. Revise your regex to handle your specific requirements.

Deciphering Regex Syntax

Regular expressions (regex) provide tremendous power in dealing with string manipulations. A regular expression to split strings with multiple separators includes key components:

Square brackets [] form a character set matching any one character enclosed.
Plus sign + indicates one or more repetitions of the preceding character.
Non-capturing groups (?:) enable grouping without changing array content.

So let's witness their confluence in a tangible solution:

const longWords = "Pneumonoultramicroscopicsilicovolcanoconiosis,
Hippopotomonstrosesquippedaliophobia.
Floccinaucinihilipilification;Supercalifragilisticexpialidocious";
// Regex to split string at every ',' ' ', '.' or ';'
const words = longWords.split(/[, .;]+/);

The regex pattern /[, .;]+/ interprets as splitting the string at every comma, space, period or semicolon with consecutive separators considered as one. Who said regular expressions are as friendly as a rattlesnake?

Edge cases Tackling

With multiple separators or complex string manipulation, keep in mind potential pitfalls:

If the pattern doesn't match anything, behold - the whole string will be returned as a one-element array.
Prevent extra separators in your result by utilizing non-capturing groups in your regular expression.
Validate your regex with diverse sample strings and edge cases.
Think about browser discrepancies. Even Internet Explorer has feelings!

Inputs for Advanced Use Cases

Consolidating separators before splitting, less drama

When dealing with strings having nested separators or avant-garde patterns, split might show you a cold shoulder. replace is your comrade in those situations to consolidate separators to a single character before splitting:

const crypticText = "one |two ;; three,four";
const harmonizedText = crypticText.replace(/[,|; ]+/g, ' '); // Replace separators with space, serenity achieved
const splitResult = harmonizedText.split(' '); // Splitting with the space

Creating a custom function for the conscious programmers

For a tighter reign on your code, encapsulate split() within a custom function:

function preciseSplit(string, separators) {
  // Crafting a regex like a Picasso with a paintbrush
  const pattern = new RegExp(`[${separators.join('')}]+`);
  // Returning the artwork, not on canvas but in an array
  return string.split(pattern);
}

const tailoredSplit = preciseSplit("one, two; three four", [',', ';', ' ']);