Split String in JavaScript: A Complete Guide (with Examples)

This guide teaches you how to split strings in JavaScript.

How to Split a String in JavaScript?

In JavaScript, the string type has a built-in method called split(). You can use this method to split a string by a specific separator, such as a blank space or a dash. This method places the split string parts into an array.

For example, let’s split a string into parts based on dashes between the words:

const message = "my-car-looks-cool"
parts = message.split("-")

console.log(parts)

Output:

[ 'my', 'car', 'looks', 'cool' ]

Notice that the split() method doesn’t touch the original string. This means the original string remains as it was before splitting. As a matter of fact, all the JavaScript string methods operate on a copy of a string and none of them modifies the original one.

Now you know the basic idea behind the String.split() method in JavaScript.

But let’s take a closer look at the syntax, its variations, as well as some more examples.

Deep Dive: JavaScript String.split() Method

In total, there are three ways for calling the String.split() method in JavaScript:

split()
split(separator)
split(separator, limit)

1. If you do split() without arguments, no split will take place but the result is the original string wrapped inside an array.
2. If you do split(separator) with a separator argument, the method splits the string based on the separator values.
3. If you call split(separator, limit) with a separator and limit arguments, the method splits the string based on the separators until it has performed a number of splits indicated by the limit parameter.

All the above use cases return the same result: An array of split substrings.

Notice that the separator can be a string or a regular expression. To split strings in more sophisticated ways, regular expressions can help.

For instance, you can split a string by email addresses or phone numbers with regular expressions.

Even though this probably wouldn’t make any sense, it highlights the power of regular expressions.

Anyway, let’s see some examples of splitting the strings.

These examples cover all the different syntaxes mentioned above as well as a regular expression example.

Example 1: String.split()

If you don’t specify any arguments to the split() method, it returns the original string inside an array.

For example, let’s call the split() method without any arguments:

const message = "my car looks cool"
parts = message.split()

console.log(parts)

Output:

[ 'my car looks cool' ]

As you can see, no split took place. Instead, the result is the original string inside an array. Not a particularly useful action!

Example 2: String.split(separator) with String Separator

The most common use case for calling the split() method is by calling it by specifying a separator string. This way the method splits the string based on separator values.

For example, let’s split the string based on empty spaces:

const message = "This is nothing but a test of splitting strings"
parts = message.split(" ")

console.log(parts)

Output:

[
  'This',
  'is',
  'nothing',
  'but',
  'a',
  'test',
  'of',
  'splitting',
  'strings'
]

Example 3: String.split(separator) with Regular Expressions

Sometimes you might need to split the strings based on a pattern, rather than a particular string. In this case, you need to use a regular expression.

For example, let’s split the string by either “+“, “@“, or “/” as a separator:

const message = "my+car@looks/cool"
parts = message.split(/\+|@|\//g)

console.log(parts)

Output:

[ 'my', 'car', 'looks', 'cool' ]

Notice that if you are not familiar with regular expressions, you can’t make much out of the above example. But basically, the message.split(/\+|@|\//g) runs a global regular expression //g and matches with:

1. “+” symbol using the escaping \+ pattern.
2. “@” symbol using the @ pattern.
3. “/” symbol using the escaping \/ pattern.

If you read the guide about regular expressions, all of this will make more sense.

Example 4: String.split(separator, limit)

Last but not least, you might sometimes need to limit the number of splits. In other words, you might want to split a string by a separator value but only up until the first n substrings. In this case, you can specify the limit as the second argument to the split() call.

For example, let’s only split the first three strings separated by “+”:

const message = "my+car+looks+cool+or+does+it?"
parts = message.split("+", 3)

console.log(parts)

Output:

[ 'my', 'car', 'looks' ]

Notice that this method doesn’t return the rest of the strings. It only returns the split values up until that limit you specified.

Summary

Today you learned how to split strings in JavaScript.

To take home, JavaScript strings have a built-in split() method. This method splits the string based on a separator string. The result of this method call is an array of substrings. There are three ways you can call the split() method:

1. String.split()
2. String.split(separator)
3. String.split(separator, limit)

Where the separator can be a string or a regular expression. The limit is the number of splits you want to do. The most common way to call the split() method is by using the String.split(separator) approach.

Thanks for reading. Happy coding!