JavaScript - Convert Comma Separated String To Array

Last Updated : 26 Nov, 2024

Here are the various methods to convert comma-separated string to array using JavaScript.

1. Using the split() Method (Most Common)

The split() method is the simplest and most commonly used way to convert a comma-separated string into an array. It splits a string into an array based on a specified character, such as a comma.

JavaScript

const s = "apple,banana,cherry";
const a = s.split(","); 
console.log(a);

Output

[ 'apple', 'banana', 'cherry' ]

s.split(",") splits the string s wherever a comma appears.
Returns an array of substrings.

2. Using Array.prototype.reduce() Method

You can use the reduce() method to build an array from a string for more control over the conversion process.

JavaScript

const s = "apple,banana,cherry";
const a = s.split("").reduce((obj, char) => {
    if (char === ",") {
        obj.push("");
    } else {
        obj[obj.length - 1] += char;
    }
    return obj;
}, [""]);

console.log(a);

Output

[ 'apple', 'banana', 'cherry' ]

The string is split into individual characters using s.split("").
The reduce() function builds an array by concatenating characters until a comma is encountered.

3. Using Loops and slice() Method

You can manually process the string using loops and the slice() method to extract substrings.

JavaScript

const s = "apple,banana,cherry";
const a = [];
let start = 0;

for (let i = 0; i < s.length; i++) {
    if (s[i] === ",") {
        a.push(s.slice(start, i));
        start = i + 1;
    }
}
a.push(s.slice(start));
console.log(a);

Output

[ 'apple', 'banana', 'cherry' ]

The loop iterates through the string, finding commas.
The slice() method extracts substrings between indexes and adds them to the array.

4. Using Regular Expressions (RegExp) and match() Method

The match() method, combined with a regular expression, is useful if the input string contains irregular spacing or special characters around the commas.

JavaScript

const s = "apple , banana , cherry ";
const a = s.match(/[^,\s]+/g); 
console.log(a);

Output

[ 'apple', 'banana', 'cherry' ]

[^,\s]+ matches sequences of characters that are not commas or spaces.
The g flag ensures the regex matches all occurrences in the string.

Handling Edge Cases

When working with user-generated or inconsistent data, consider the following cases

Case 1: Trailing Commas

The filter() method removes empty strings caused by trailing commas.

JavaScript

const s = "apple,banana,cherry,";
const a = s.split(",").filter(item => item !== "");
console.log(a);

Output

[ 'apple', 'banana', 'cherry' ]

Case 2: Extra Spaces

The map() method trims unnecessary spaces from each substring.

JavaScript

const s = " apple , banana , cherry ";
const a = s.split(",").map(item => item.trim());
console.log(a);

Output

[ 'apple', 'banana', 'cherry' ]

Comparison of Methods

Approach	Use Case	Complexity
`split()`	Ideal for clean, comma-separated strings without extra processing.	O(n)
`reduce()`	Great for custom parsing logic or transformations.	O(n)
`slice() +` Loops	Offers low-level control but can be complicated.	O(n)
Regex + match()	Best for handling irregular input with spaces or special characters.	O(n)
Edge Case Handling	Necessary for real-world scenarios like trailing commas and extra spaces.	Depends on the case

JavaScript - Convert Comma Separated String To Array

sayantanm19

Improve

Article Tags :

JavaScript - Convert Comma Separated String To Array

1. Using the split() Method (Most Common)

2. Using Array.prototype.reduce() Method

3. Using Loops and slice() Method

4. Using Regular Expressions (RegExp) and match() Method

Handling Edge Cases

Case 1: Trailing Commas

Case 2: Extra Spaces

Comparison of Methods

Similar Reads

Thank You!

What kind of Experience do you want to share?