915

I have a comma-separated string that I want to convert into an array, so I can loop through it.

Is there anything built-in to do this?

For example, I have this string

var str = "January,February,March,April,May,June,July,August,September,October,November,December";

Now I want to split this by the comma, and then store it in an array.

2
  • 3
    possible duplicate of How can I parse a CSV string with Javascript? Commented Jan 14, 2013 at 17:28
  • 4
    Regarding duplicate: this predates the referenced question by 18 months. If anything, the other is not only a dupe but offers an extremely complicated solution for a very simple problem due to the regex requirement Commented Jan 14, 2013 at 17:30

20 Answers 20

1513
const array = str.split(',');

MDN reference, mostly helpful for the possibly unexpected behavior of the limit parameter. (Hint: "a,b,c".split(",", 2) comes out to ["a", "b"], not ["a", "b,c"].)

Sign up to request clarification or add additional context in comments.

2 Comments

While split will work fine if you are sure you have elements in array, if you're expecting data from a server / database you will run into trouble since ''.split(',') has a length === 1 IE: ''.split(',') === ['']
a way of solving empty string element when ''.split(',') === [''] is filtering string.split(',').filter(e => e !== '')
147

Watch out if you are aiming at integers, like 1,2,3,4,5. If you intend to use the elements of your array as integers and not as strings after splitting the string, consider converting them into such.

var str = "1,2,3,4,5,6";
var temp = new Array();
// This will return an array with strings "1", "2", etc.
temp = str.split(",");

Adding a loop like this,

for (a in temp ) {
    temp[a] = parseInt(temp[a], 10); // Explicitly include base as per Álvaro's comment
}

will return an array containing integers, and not strings.

10 Comments

Please note that parseInt() tries to guess the base unless you explicit set it, which can cause unexpected results when dealing with leading zeros ("001,002,003..."). Compare parseInt('010') with parseInt('010', 10).
+1 This example is more clear, demonstrating that string is not a static object but in fact the variable that is the string.
The map function can be used to do the integer parsing in one line: str.split(',').map(parseInt)
My first number always still has a quote character in front. ""25342","56743","457863"" becomes "25342,56743,457863" This makes parseInt unable to number-ise the first number "25342 giving me NaN. I strip them now first before parseInting (in a for loop, not for..in; does that matter?). Would be nice to avoid that extra line if possible.
This is not the most efficient solution. According to my experiments under Chrome 49. JSON.parse('[' + str + ']') is 40% faster than this solution.
|
38

Hmm, split is dangerous IMHO as a string can always contain a comma. Observe the following:

var myArr = "a,b,c,d,e,f,g,','";
result = myArr.split(',');

So how would you interpret that? And what do you want the result to be? An array with:

['a', 'b', 'c', 'd', 'e', 'f', 'g', '\'', '\''] or
['a', 'b', 'c', 'd', 'e', 'f', 'g', ',']

Even if you escape the comma, you'd have a problem.

I quickly fiddled this together:

(function($) {
    $.extend({
        splitAttrString: function(theStr) {
            var attrs = [];

            var RefString = function(s) {
                this.value = s;
            };
            RefString.prototype.toString = function() {
                return this.value;
            };
            RefString.prototype.charAt = String.prototype.charAt;
            var data = new RefString(theStr);

            var getBlock = function(endChr, restString) {
                var block = '';
                var currChr = '';
                while ((currChr != endChr) && (restString.value !== '')) {
                    if (/'|"/.test(currChr)) {
                        block = $.trim(block) + getBlock(currChr, restString);
                    }
                    else if (/\{/.test(currChr)) {
                        block = $.trim(block) + getBlock('}', restString);
                    }
                    else if (/\[/.test(currChr)) {
                        block = $.trim(block) + getBlock(']', restString);
                    }
                    else {
                        block += currChr;
                    }
                    currChr = restString.charAt(0);
                    restString.value = restString.value.slice(1);
                }
                return $.trim(block);
            };

            do {
                var attr = getBlock(',', data);
                attrs.push(attr);
            }
            while (data.value !== '')
                ;
            return attrs;
        }
    });
})(jQuery);

2 Comments

This works great with numbers also and we don't have to run a separate parseInt loop for them as mentioned in another answer below. This is real deep thinking. Appreciate it very much and I think the best answer among all !!
Your code is useful, but you didn't answer the question: "Is there anything built-in to do this?" Of course we can write a custom function as you did, or even better import one of the many existing libraries already written and well tested (e.g. jquery-csv). But is there something built in?
31

The split() method is used to split a string into an array of substrings, and returns the new array.

var array = string.split(',');

2 Comments

what would the outcome be? for example if i have var a = "hello,world,baby"; and var array = a.split(','); --> would my array look like this: array = ["hello","world","baby"]; ??
Yes, that is correct. The resulting array would be just as you mention.
31

Upgraded str.split(',')

The simple str.split(',') doesn't have much smarts. Here are some upgrades for different needs. You can customize the functionality to your heart's content.

const str = "a, b,c,  d  ,e  ,f,,g"
const num = "1, 2,3,  4  ,5  ,6,,7.495"
const mix = "a, 2,3,  d  ,5  ,f,,7.495,g"

console.log(    str.split(',')
) // spaces NOT trimmed, empty values included
  // ["a", " b", "c", "  d  ", "e  ", "f", "", "g"] 

console.log(    str.split(/\s*,\s*/)
) // spaces trimmed, empty values included
  // ["a", "b", "c", "d", "e", "f", "", "g"]

console.log(    str.split(/\s*,\s*(?:,\s*)*/)
) // spaces trimmed, empty values skipped
  // ["a", "b", "c", "d", "e", "f", "g"] 

console.log(    num.split(',').map(Number)
) // numbers, empty values default to zero
  // [1, 2, 3, 4, 5, 6, 0, 7.495] 

console.log(    num.split(/,(?:\s*,)*/).map(Number)
) // numbers, empty values skipped
  // [1, 2, 3, 4, 5, 6, 7.495]

console.log(    mix.split(/\s*,\s*/)
                .map(x => (x === '') ? '' : (isNaN(Number(x)) ? x : Number(x)) )
) // mixed values, empty values included
  // ["a", 2, 3, "d", 5, "f", "", 7.495, "g"]

Using JSON.parse

It may feel like a bit of a hack, but it's simple and highly optimized by most Javascript engines.

It has some other advantages such as support for nested lists. But there are disadvantages, such as requiring the input to be properly formatted JSON.

By using string.replace similar to how I used string.split above, you can fix the input. In the first two examples below, I customize how I want empty values handled:

const num = "1, 2,3,  4  ,5  ,6,,7.495"
const mix = "a, 2,3,  d  ,5  ,f,7.495,g"

console.log(    JSON.parse('['+num.replace(/,\s*,/,',0,')+']')
) // numbers, empty values default to zero
  // [1, 2, 3, 4, 5, 6, 0, 7.495]

console.log(    JSON.parse('['+num.replace(/,\s*,/,',')+']')
) // numbers, skips empty values
  // [1, 2, 3, 4, 5, 6, 7.495]

console.log(    JSON.parse('['+mix.replace(/(^|,)\s*([^,]*[^0-9, ][^,]*?)\s*(?=,|$)/g,'$1"$2"')+']') 
) // mixed values, will ERROR on empty values
  // ["a", 2, 3, "d", 5, "f", "7.495", "g"]  

4 Comments

Please take into account that an item may contain space characters, e.g. "New York, San Francisco, Los Angeles". With split(/[ ,]+/), you would get 6 items instead of 3.
@www.admiraalit.nl good catch. Answer updated.
Thanks. Note that spaces that the beginning and the end are still not trimmed. str.trim().split(/\s*,\s*/) would solve this.
Sure, but i'm going to leave the answer as-is. The point is that one can do better than simple str.split(','), and I want to limit the answer to usages of String.split. As I said at the top, You can customize the functionality to your heart's content.
19

Note that the following:

var a = "";
var x = new Array();
x = a.split(",");
alert(x.length);

will alert 1

Comments

15

Pass your comma-separated string into this function and it will return an array, and if a comma-separated string is not found then it will return null.

function splitTheString(CommaSepStr) {
    var ResultArray = null;

    // Check if the string is null or so.
    if (CommaSepStr!= null) {

        var SplitChars = ',';

        // Check if the string has comma of not will go to else
        if (CommaSepStr.indexOf(SplitChars) >= 0) {
            ResultArray = CommaSepStr.split(SplitChars);

        }
        else {

            // The string has only one value, and we can also check
            // the length of the string or time and cross-check too.
            ResultArray = [CommaSepStr];
        }
    }
    return ResultArray;
}

4 Comments

Rather than only post a block of code, please explain why this code solves the problem posed. Without an explanation, this is not an answer.
This is the most correct solution if you aren't sure the string will contain your split value. This function will keep the split method from erroring out if the string doesn't have a comma (given the above example).
Note: functions that start with a capital letter are, most of the time, designed to be invoked. best to use lower case letters on functions that are not designed to be invoked.
This failed for me when I had only one value with no commas. Added else { ResultArray = [CommaSepStr]; } after the second if
12

Here is a function that will convert a string to an array, even if there is only one item in the list (no separator character):

function listToAray(fullString, separator) {
  var fullArray = [];

  if (fullString !== undefined) {
    if (fullString.indexOf(separator) == -1) {
      fullArray.push(fullString);
    } else {
      fullArray = fullString.split(separator);
    }
  }

  return fullArray;
}

Use it like this:

var myString = 'alpha,bravo,charlie,delta';
var myArray = listToArray(myString, ',');
myArray[2]; // charlie

var yourString = 'echo';
var yourArray = listToArray(yourString, ',');
yourArray[0]; // echo

2 Comments

No error is thrown if the separator is not found: 'echo'.split(',') returns ['echo'], and ''.split(',') returns ['']. You will get an error if you call x.split(',') when x is not a string (including when x is undefined or null), because there is no split function available for other types.
Ah, I see that I was in fact trying to use split for an undefined object when I wrote up my listToArray function. Thanks for pointing that out...
9
let str = "January,February,March,April,May,June,July,August,September,October,November,December"

let arr = str.split(',');

it will result:

["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

and if you want to convert following to:

["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

this:

"January,February,March,April,May,June,July,August,September,October,November,December";

use:

str = arr.join(',')

Comments

8

Return function

var array = (new Function("return [" + str+ "];")());

Its accept string and objectstrings:

var string = "0,1";

var objectstring = '{Name:"Tshirt", CatGroupName:"Clothes", Gender:"male-female"}, {Name:"Dress", CatGroupName:"Clothes", Gender:"female"}, {Name:"Belt", CatGroupName:"Leather", Gender:"child"}';

var stringArray = (new Function("return [" + string+ "];")());

var objectStringArray = (new Function("return [" + objectstring+ "];")());

JSFiddle https://jsfiddle.net/7ne9L4Lj/1/

1 Comment

text strings are having errors - SyntaxError: Unexpected identifier number strings are ok. eg. var stringtext = "String, text, I, am"; var stringtextArray = (new Function("return [" + string text + "];")()); result is: SyntaxError: Unexpected identifier
6

I had a similar issue, but more complex as I needed to transform a CSV file into an array of arrays (each line is one array element that inside has an array of items split by comma).

The easiest solution (and more secure I bet) was to use PapaParse which has a "no-header" option that transform the CSV file into an array of arrays, plus, it automatically detected the "," as my delimiter.

Plus, it is registered in Bower, so I only had to:

bower install papa-parse --save

And then use it in my code as follows:

var arrayOfArrays = Papa.parse(csvStringWithEnters), {header:false}).data;

I really liked it.

Comments

3

As @oportocala mentions, an empty string will not result in the expected empty array.

So to counter, do:

str
.split(',')
.map(entry => entry.trim())
.filter(entry => entry)

For an array of expected integers, do:

str
.split(',')
.map(entry => parseInt(entry))
.filter(entry => typeof entry ==='number')

Comments

3

Easiest way to do it:

let myStr = '1, 2, 3, 4, 5, 7, 8';

const stringToArr = (myStr) => {
    return myStr.split(',').map(x => x.trim());
};

Comments

2

A good solution for that:

let obj = ['A','B','C']

obj.map((c) => { return c. }).join(', ')

Comments

1

Shortest

str.split`,`

var str = "January,February,March,April,May,June,July,August,September,October,November,December";

let arr = str.split`,`;

console.log(arr);

2 Comments

What is up with literal backticks? What is the explanation?
here is some info about template literals
1
let myString = "January,February,March,April,May,June,July,August,September,October,November,December";
      const temp=myString .split(",");
      console.log(temp);

Output:-  ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

Very simple you can use the split default javascript function for this.

Comments

0

I made php script to convert string to array, and you can run it into your browser, so is easy

<form method="POST">
    <div>
        <label>String</label> <br>
        <input name="string" type="text">
    </div>
    <div style="margin-top: 1rem;">
        <button>konvert</button>
    </div>
</form>

<?php

$string = @$_POST['string'];

if ($string) {
    $result = json_encode(explode(",",$string));
    echo " '$result' <br>";
}
?>

Comments

0

If the user makes a typo by adding an extra space. You could use something like this.

tags: foo,  zar, gar
const stringToArr = (string) => {
  return string.trim.split(",");
};

Comments

0

Pretty old question but I didn't see any answers for more complex cases then 1,2,3 (expect one but it was written in jQuery), so here is my solution in plain JS:

function csvRowToArray(str, seperator, block) {
  const columns = [];
  let column = '',
      findNextBlock = false;
    for(i = 0; i < str.length; i++) {
    let letter = str[i];
    if (letter === seperator && !findNextBlock) {
      columns.push(column);
      column = '';
      continue;
    }
    
    column += letter;
    
    if (letter === block && str[i - 1] != '\\') {
      findNextBlock = !findNextBlock;
    }
  }
  columns.push(column);
  
  return columns;
}

And with string like this: 165020,"Unijne logo produkcji ekologicznej, tzw. “Eko liść”","hi said \\"Hello\\" to me",DE-ÖKO-003,1/31/2025

The result is:

[
  "165020",
  "Unijne logo produkcji ekologicznej, tzw. “Eko liść”",
  "hi said \"Hello\" to me",
  "DE-ÖKO-003",
  "1/31/2025"
]

2 Comments

what is block param ?
@meYnot It refers to the letter that defines start and stop of the "block of content" (" or '). Couldn't really find a better word for it :D.
-2

For an array of strings to a comma-separated string:

let months = ["January","Feb"];
let monthsString = months.join(", ");

3 Comments

That's the reverse of what they're asking for
@camille i know that did u read the text i said "For an array of strings to a comma-separated string"
Yes, I did read the text of your answer, but I also read the text of the question. What you've provided is an answer to the opposite operation of what they're trying to do. It would be a fine answer to a question on joining an array, but that's not what this question is

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.