How to Split a String into an Array in JavaScript?

Are you looking for solutions on how to split a string into an array in JavaScript?

Discover the different ways to split a string into an array of substrings.

This tutorial covers the split() method, the Array.from() method, the spread operator, and advanced methods providing clear examples and explanations for each.

So without further ado, let’s get started and learn how to use these methods to manipulate strings and improve your JavaScript skills.

What is split() method in JavaScript?

The split() method is a built-in JavaScript function that allows you to split a string into an array of substrings based on a specified separator.

This separator can be a string, a regular expression, or it can be omitted. If the separator is omitted, the entire string is returned as the only element in an array.

The limit parameter is an integer that specifies the maximum number of splits to be made.

Syntax

string.split(separator, limit) 

Parameters

The split() method takes two optional parameters: separator and limit.

The separator parameter specifies the character, regular expression, or substring to use for splitting the string.

Return value

This method returns an array of strings containing the splitted values.

Remember this, if you use the split method in an empty string (“”) and there’s no empty separator specified. The split() will return[“”].

However, if both string and separator are empty strings, an empty array is returned [].

Here’s an example:

const str = "";

// string is empty and separator is non-empty
console.log(str.split("sample")); ✅ 
// [""]

// string and separator are both empty strings
console.log(str.split(str)); ✅ 
// []

Output:

[ "" ]
[]

How to Split a String into an Array in JavaScript?

Here’s an example that demonstrates how to use the split() method:

let msg = "Hi Welcome to Itsourcecode!";
const myArray = msg.split(" "); ✅
console.log(myArray);

In this example, we split the string “Hi Welcome to Itsourcecode” into an array of substrings using the space character as the separator.

The resulting array contains each word from the original string as a separate element.

Output:

[ 'Hi', 'Welcome', 'to', 'Itsourcecode!' ]

There are several ways to split a string into an array in JavaScript. Here are some of the most common methods:

Solution 1: Use the split() method

As we mentioned earlier, the split() method is a built-in JavaScript function that allows you to split a string into an array of substrings based on a specified separator.

Here’s an example:

let subjects = "English, Math, Science";
let subject = subjects.split(", "); ✅
console.log(subject);

Output:

[ 'English', 'Math', 'Science' ]

Solution 2: Using the Array.from() method

The Array.from() method creates a new Array instance from an array-like or iterable object.

You can use this method to convert a string into an array of characters.

Here’s an example:

let str = "Itsourcecode";
let chars = Array.from(str); ✅ 
console.log(chars);

Output:

[
  'I', 't', 's', 'o',
  'u', 'r', 'c', 'e',
  'c', 'o', 'd', 'e'
]

Solution 3: Use the spread operator

The spread operator (…) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected.

You can use the spread operator to convert a string into an array of characters.

Here’s an example:

let str = "Welcome to Itsourcecode";
let chars = [...str];  ✅
console.log(chars);

Output:

[
  'W', 'e', 'l', 'c', 'o',
  'm', 'e', ' ', 't', 'o',
  ' ', 'I', 't', 's', 'o',
  'u', 'r', 'c', 'e', 'c',
  'o', 'd', 'e'
]

Advanced Method for Splitting Strings into Arrays

Now that we know the basics, let’s learn more advanced ways to break strings into arrays in JavaScript.

These methods give us more options and control in the splitting process, so we can use them for different purposes.

Solution 4: Use regular expressions

Using regular expressions to split strings provides a powerful and versatile way to define separators.

The split() method can take a regular expression as its argument, allowing us to split the string based on complex patterns.

Here’s an example:

const subjects = "English Math;Science History";
const separators = /[,;-\s]/; ✅
const resultsubject = subjects.split(separators); ✅
console.log(resultsubject); 

Output:

[ 'English', 'Math', 'Science', 'History' ]

Split a string into an array in JavaScript with a limit

The split() method also allows us to control the maximum number of elements in the resulting array by specifying a limit.

const subjects = "English,Math,Science,History,Programming";
const separator = ",";
const limit = 3; ✅
const resultsubject = subjects.split(separator, limit); ✅
console.log(resultsubject);

Output:

[ 'English', 'Math', 'Science' ]

Conclusion

In conclusion, this article explores different methods to split a string into an array in JavaScript.

We explain in detail the usage of the split() method with various examples.

Also, we have provided alternative approaches using Array.from(), the spread operator, and advanced techniques like using regular expressions and setting a limit for the number of splits.

By mastering these methods, you can enhance your JavaScript skills and effectively manipulate strings in your code.

We are hoping that this article provides you with enough information that help you understand the JavaScript split string into an array.

You can also check out the following article:

• typeof JavaScript
• Is JavaScript similar to Java
• Convert string to boolean in JavaScript

Thank you for reading itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel
 · View all posts by Caren Bautista →