split() JavaScript String Method – How to Split a String

Whenever you use split() on a string, the method does the following:

1. It splits (divides) the string into substrings.
2. It puts the substrings into an array.
3. It returns the newly created array—without changing the original string.

Note

split() is sometimes written as String.prototype.split() because it is a method of the String object’s prototype property.

Use split() to create an array containing the result of splitting a string into substrings.

Syntax of the split() Method

Here is split()’s syntax:

string.split("separation-point", "array-limit");

The snippet above shows that split() accepts two arguments: a separation-point and an array-limit.

Argument 1: separation-point

A separation-point is the first argument accepted by the split() method. It is an optional argument that specifies the exact position where you want to split the string.

Example 1: Split string at whitespaces

"Color preferences: 1. White 2. Brown 3. Purple".split(" ");

// The invocation above will return:
["Color", "preferences:", "1.", "White", "2.", "Brown", "3.", "Purple"];

Try Editing It

The snippet above told the computer to split the calling string at each whitespace character.

Note

You can use any character or regular expression as the separation-point.

Example 2: Split string at each letter o

"Color preferences: 1. White 2. Brown 3. Purple".split("o");

// The invocation above will return:
["C", "l", "r preferences: 1. White 2. Br", "wn 3. Purple"];

Try Editing It

Example 3: Split string at each digit character

"Color preferences: 1. White 2. Brown 3. Purple".split(/\d/);

// The invocation above will return:
["Color preferences: ", ". White ", ". Brown ", ". Purple"];

Try Editing It

Note

• /\d/ is a regular expression syntax that is equivalent to numbers zero (0) to nine (9).
• Suppose the regular expression contains a capturing group. In that case, the computer will include the matched patterns in the returned array.

Here’s an example:

"Color preferences: 1. White 2. Brown 3. Purple".split(/(\d)/);

// The invocation above will return:
["Color preferences: ", "1", ". White ", "2", ". Brown ", "3", ". Purple"];

Try Editing It

Example 4: Split string at each hit pattern

"Color preferences: 1. White 2. Brown 3. Purple".split("hit");

// The invocation above will return:
["Color preferences: 1. W", "e 2. Brown 3. Purple"];

Try Editing It

Note

Suppose you specify an empty string as the separation point. In that case, the computer will split the string after each character (whitespaces inclusive).

CodeSweetly ads

Learn Flexbox with Images

Use beautiful images to learn CSS Flexbox.

Find out more

Example 5: Split string after each character

"On the day".split("");

// The invocation above will return:
["O", "n", " ", "t", "h", "e", " ", "d", "a", "y"];

Try Editing It

Note

Suppose you omit the separation-point argument. In that case, no split will occur. Therefore, the computer will return an array containing only one element (the unsplit calling string).

Argument 2: array-limit

An array-limit is the second argument accepted by the split() method. It is an optional argument indicating the limit of items the computer should put in the new array.

In other words, once the number of items in the new array equals the array-limit, the computer will ignore the rest of the calling string’s characters.

Note

The array-limit argument must be a positive integer.

Example 1: Split string at whitespaces but limit the returned array to one item only

"Color preferences: 1. White 2. Brown 3. Purple".split(" ", 1);

// The invocation above will return:
["Color"];

Try Editing It

Example 2: Split string at whitespaces but limit the returned array to two items

"Color preferences: 1. White 2. Brown 3. Purple".split(" ", 2);

// The invocation above will return:
["Color", "preferences:"];

Try Editing It

Note

Suppose the array-limit argument is zero (0). In that case, the computer will return an empty array.

Example 3: Split string at whitespaces but limit the returned array to zero items

"Color preferences: 1. White 2. Brown 3. Purple".split(" ", 0);

// The invocation above will return:
[];

Try Editing It

Example 4: Split string at each letter o but limit the returned array to two items

"Color preferences: 1. White 2. Brown 3. Purple".split("o", 2);

// The invocation above will return:
["C", "l"];

Try Editing It

Important Stuff to Know about split()’s First Argument

When the separation-point argument is an empty string (""), the computer will use UTF-16 code units to split the calling string—not user-perceived characters (grapheme cluster).

Therefore, using an empty string as a separation point argument will destroy surrogate pairs and cause bugs in your application.

For instance, let’s use a surrogate character (💟) in a split statement:

"In💟".split("");

// The invocation above will return:
["I", "n", "\ud83d", "\udc9f"];

Try Editing It

You can see that split() divided the calling string into four substrings—not three.

split() returned an array of four substrings because the heart decoration character (💟) is a surrogate formed by a combination of the "\ud83d" and "\udc9f" code points.

In other words, split() use UTF-16 code points to divide a string into an array of substrings—which can cause bugs that are difficult to spot.

A better alternative is to use the spread operator to split a string into a list of individual characters.

Here’s an example:

[..."In💟"];

// The invocation above will return:
["I", "n", "💟"];

Try Editing It

You can see that the spread syntax split the string correctly.