The String split() method

split() breaks a string into an array of tokens every time it finds the separator you pass to it. The match is case sensitive, and the separator itself is removed from the result:

const phrase = 'I love my dog! Dogs are great'
const tokens = phrase.split('dog')

tokens //["I love my ", "! Dogs are great"]

Notice that Dogs did not match, because the separator was lowercase dog.

You reach for split() any time you have one string that contains several pieces of data. A comma-separated line is the classic case:

const csv = 'Flavio,38,Milan'
csv.split(',') //['Flavio', '38', 'Milan']

Or a sentence you want to break into words:

'the quick brown fox'.split(' ') //['the', 'quick', 'brown', 'fox']

What happens with edge cases?

If the separator is not found, you get an array with the whole string as its only item:

'hello'.split(',') //['hello']

If you call split() with no argument at all, you get the same thing: the entire string wrapped in an array.

An empty string as separator splits the string into individual characters:

'ciao'.split('') //['c', 'i', 'a', 'o']

Limiting the number of results

split() accepts a second argument, the maximum number of tokens to return:

'one,two,three,four'.split(',', 2) //['one', 'two']

Everything after the limit is discarded, not merged into the last token.

Splitting with a regular expression

The separator can also be a regular expression. This is handy when the input is messy, for example when words are separated by a variable number of spaces:

'apples   and    oranges'.split(/\s+/) //['apples', 'and', 'oranges']

Be careful with emojis

Splitting by the empty string works character by character, but JavaScript strings are sequences of UTF-16 code units (see also Unicode). Characters outside the basic range, like most emojis, take two code units, and split('') breaks them apart:

'hi🐶'.split('') //['h', 'i', '\uD83D', '\uDC36']

Spreading the string (or Array.from(str)) iterates by Unicode code points, so a single-code-point emoji stays intact:

[...'hi🐶'] //['h', 'i', '🐶']
Array.from('hi🐶') //['h', 'i', '🐶']

That is still not enough for every emoji. Some characters you see as one symbol are several code points joined together: family emoji built with ZWJ sequences, flags, skin tones. Spread splits those. To split by what a person sees as one character (a grapheme cluster), use Intl.Segmenter (Baseline 2024):

const text = 'hi👨‍👩‍👧'
const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' })
const chars = [...segmenter.segment(text)].map(s => s.segment)

chars //['h', 'i', '👨‍👩‍👧']

For words instead of characters, use { granularity: 'word' } and filter with isWordLike. See how to cut a string into words.

One last tip: split() and join() are natural companions. Split a string into an array, transform the items, then join() them back into a string.

Want me to talk about your product? You can sponsor this site.