JavaScript Split String

In this tutorial, you will learn to split strings in JavaScript with descriptions and various examples. You will learn how to convert string to array in JavaScript.

Table Of Contents

1. split method in JavaScript
   1. Syntax of the split method
2. Examples of the split method
   1. Split String at Comma
   2. Split using regex
   3. Split with no separator
   4. Split at each character
   5. Split with limit
   6. No match found in the string
   7. Match found at beginning or end
   8. Remove %20 from the URL
3. Conclusion

split Method In JavaScript

The split() method is used to split (break) a string into an array of substrings.

The method uses a string or regular expression to find where to split the original string. For example, if the original string is "Hello World" and we use space (" ") to split it, then it returns ["Hello", "World"].

The following example uses the split() method to split a string at every space:

var str = "To do or not to do";

// splitting string at every space
var arr = str.split(' ');
console.log(arr); // ["To","do","or","not","to","do"]

str = "HTML-CSS-JavaScript";
console.log(str.split('-')); // ["HTML","CSS","JavaScript"]

In the above example, the split() method divides the string into substrings from wherever there is a space, then put that substring into an array and returns the array as you can see in the output of the above example.

Syntax of split() method

The syntax of the split() method is as follows:

str.split()
str.split(separator)
str.split(separator, limit)

The split method accepts 2 arguments (both optional) that are used to control when to cut the string into substrings and how many substrings to return in the array.

Let's see both arguments.

1. separator (optional) - This is the first argument of the split() method. It is the pattern that describes where the split should occur in the string. The separator can be a string or a regular expression.

   • When the separator is an empty string ('') then the string is split at each of its UTF-16 characters.
   • In case there is more than one character in the separator then the entire character sequence must be found in order to split.
   • If the separator does not match any sequence or is omitted in the split method then the array is returned with one element as an entire string.
   • If the separator matches at the beginning or end of the string then the resulting array has the first or last element as an empty string depending on where the separator appears.

2. limit (optional) - It is a positive integer that specifies the limit of how many substrings the returning array can include. When the limit is provided then the split method stops entries of separated substring into the array when the limit is reached. If the limit is 0 then an empty array ([]) is returned.

Javascript String Split Examples

Let's see some useful examples of splitting a string, here we will cover every possible case for a split method with its separator and the limit.

# Example 1: Split String at Comma

The following example splits a string at the comma. The separator used here is a comma (",").

var str = "Books, Music, Movies, Games";

// splitting string at comma
var arr = str.split(',');
console.log(arr); // ["Books","Music","Movies","Games"]

# Example 2: split using regex

The split method accepts both string and regex as a separator. The following example uses the regular expression as a pattern to find the match and split the string.

var str = "Exercise1Exercise2Exercise3to be done";

// splitting at numbers or spaces using regex
var subStrings = str.split(/[0-9, ]/);
console.log(subStrings);
// [ "Exercise", "Exercise", "Exercise", "to", "be", "done" ]

In the above example, a regular expression is used as a separator that split the string wherever there is an integer or space.

# Example 3: Omitting separator

When the separator is omitted then the entire string is included in the returning array as the only member of the array.

var str = "To do or not to do";

var words = str.split();
console.log(words);

# Example 4: Split at each character

If you want to get an array that contains each character of the string including spaces then use an empty string ('') as a separator.

When you use an empty string ('') as a separator then the string is split at each of its UTF-16 characters.

var str = "ABC DEF";

// splitting at each character
var arr = str.split('');
console.log(arr); // [ "A", "B", "C", " ", "D", "E", "F" ]

# Example 5: Using limit in split method

The limit is the second parameter of the split method which controls how many entries can be made in the resulting array by the method.

var str = "To do or not to do";

// splitting at spaces
var subStrings = str.split(" ", 3);
// ["To","do","or"]
console.log(subStrings);

# Example 6: No match found in string

When the separator match no string sequence in the string then the entire string is included in the returning array as the only member of the array same as if the separator is omitted.

var str = "To do or not to do";

var words = str.split("work"); // no match
console.log(words);

# Example 7: Match found at beginning or end

When the separator match at the beginning or at the end of the string then an empty string is included as a representation of separation at the beginning or at the end of the returning array.

var str = " To do or not to do ";

var words = str.split(" "); // match at beginning
console.log(words);

# Example 8: Remove %20 from the URL

Use the split method to split the string at %20 into an array of strings, then use the join() method to join the strings of the array by using dash (-) as the new separator.

var str = "https://www.tutorialstonight.com/javascript%20split%20string";

var words = str.split("%20"); // split at %20
console.log(words);

// Using the join method
var finalURL = words.join("-");
console.log(finalURL);

Conclusion

If you want to convert a string to an array then you can use the split method. Also if you want to break the string into pieces in that situation also it is helpful.

The use of regular expression gives you the flexibility to use it for various complex cases.