How to cut a string into words in JavaScript

By

Learn how to cut a string into words in JavaScript using the split() method with a space separator, which returns an array of the individual words.

~~~

To cut a string into words in JavaScript, use the split() method of the string instance, passing a space as the separator. It returns an array with the individual words.

const text = 'Hello World! Hey, hello!'
text.split(' ')

The result is an array. In this case, an array with 4 items:

[ 'Hello', 'World!', 'Hey,', 'hello!' ]

The original string is not modified. Strings in JavaScript are immutable, so split() always gives you a new array and leaves text untouched.

Once you have the array, you can do the usual array things. Count the words with .length, grab the first one with [0], or loop over them with forEach() or map().

Watch out for multiple spaces

Here’s the pitfall that bites everyone sooner or later. If the string contains two spaces in a row, split(' ') produces an empty string in the result:

const text = 'Hello  World! Hey'
text.split(' ')
//[ 'Hello', '', 'World!', 'Hey' ]

That empty string in the middle is rarely what you want. It shows up whenever the text comes from user input, because people type double spaces all the time.

The fix is to split on a regular expression instead of a plain space. The pattern /\s+/ matches one or more whitespace characters, so runs of spaces (and tabs, and newlines) count as a single separator:

const text = 'Hello  World! Hey'
text.split(/\s+/)
//[ 'Hello', 'World!', 'Hey' ]

If the string might start or end with spaces, call trim() first, otherwise you get an empty string at the beginning or the end of the array:

const input = '  hi there '
input.trim().split(/\s+/)
//[ 'hi', 'there' ]

Punctuation stays attached

Notice that in the first example we got 'World!' and 'Hey,' as words. split() only cuts on the separator you give it, it doesn’t know anything about punctuation.

If you need clean words without punctuation, strip it before splitting:

const text = 'Hello World! Hey, hello!'
text.replace(/[!,.?]/g, '').split(/\s+/)
//[ 'Hello', 'World', 'Hey', 'hello' ]

For most cases, plain split(' ') is all you need. Reach for the regular expression version when the input is messy.

~~~

Related posts about js: