ChatGPT解决这个技术问题 Extra ChatGPT

How can I convert a comma-separated string to an array?

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.

Just wanted to comment that this does not require jquery this is part of javascript itself.
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
Easy. string.split(',');
Not sure why this is marked as "too localized". String splitting comes up a lot, and is generally applicable to the worldwide audience of the internet (as evidenced by the fact that my answer still somehow gets upvotes regularly). I doubt 4 other people will come along and reopen it, but, still. Weird.

M
Matchu
var array = string.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"].)


Short and sweet, nice to see that JavaScript string has some the richness of the Java String.
Best practice for support all types of strings. See here stackoverflow.com/a/32657055/2632619
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(',') === ['']
@MichaelShopsin and All, split function is not working with IE11 as its saying Unable to get property 'Split' of undefined or null reference.
@DLV that sounds like a new question, perhaps you should ask after checking around the IE questions already on StackOverflow.
P
Peter Mortensen

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.


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).
I would upvote Alvaro's comment more if I could. I learnt that lesson a while back and have never forgotten it.
+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)
This is not the most efficient solution. According to my experiments under Chrome 49. JSON.parse('[' + str + ']') is 40% faster than this solution.
P
Peter Mortensen

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);

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?
o
om-nom-nom

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

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

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.
Your answer is working for me but,my new array is not replacing the old one. Can you help me? var sampleTags = ['vinita@itsabacus.com']; console.log(sampleTags); $("#order_id").on("change", function() { var order_id = document.getElementById('order_id').value; $.ajax({url: "model/getUserMailIds.php",data:{order_id:order_id},type:'POST', success: function(result){ alert(result); var sampleTags = result.split(',');; console.log(sampleTags); }}); });
P
Peter Mortensen

Note that the following:

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

will alert 1


P
Peter Mortensen

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;
}

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
r
radu122

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

I created this function because split throws out an error if there isn't any separator character in the string (only one item).


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...
I
Inigo

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(/[ ,]+/) ) // spaces trimmed, empty values skipped // ["a", "b", "c", "d", "e", "f", "g"] console.log( str.split(/\s*,\s*/) ) // spaces trimmed, empty values NOT 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(/[ ,]+/).map(Number) ) // numbers, skips empty values // [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"]


Adding my two cents here... this is great and I love these examples. Well done.
M
Mosbah
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(',')

P
Peter Mortensen

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/


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
P
Peter Mortensen

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.


P
Peter Mortensen

A good solution for that:

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

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

K
Kamil Kiełczewski

Shortest

str.split`,`

var str = "January,February,March,April,May,June,July,August,September,October,November,December"; let arr = str.split`,`; console.log(arr);


What is up with literal backticks? What is the explanation?
here is some info about template literals
P
Peter Mortensen

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')

R
Rahmad Al Habib

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>";
}
?>

F
Force Bolt
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.


A
Anton Kouliavtsev

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(",");
};

R
Radim Šafrán

Easiest way to do it:

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

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

P
Peter Mortensen

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

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

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
i know that man just incase for someone else looking for the opposite 🙏