Convert Comma Separated String to Array javaScript


In js, multiple approaches to converting a comma-separated string to an array; In this tutorial, we will show you how to convert comma separated string to array in javascript using split().

Ezoic

If you want to convert array or object array to comma separated string in js or convert object array to a comma-separated string in js. So you can read this post-https://www.tutsmake.com/javascript-array-to-comma-separated-string.

How to Convert Comma Separated String to Array javaScript

Here are split() method and has multiple approaches to convert comma separated string to Array in js:

Split() Method JavaScript

The JavaScript string splitting method returns an array of substrings obtained by splitting a string on the divider you specify. The separator can be a string or a regular expression.

Ezoic

Note

If an empty string (“”) is used as the separator, the string is split between each character.

The split() method does not change the original string.

Basic Syntax

 The syntax of the function is as follows:

str.split(separator, limit) 

Parameter And Values

Parameter Description
separator Optional. Specifies the character, or the regular expression, to use for splitting the string. If omitted, the entire string will be returned (an array with only one item)
limit Optional. An integer that specifies the number of splits, items after the split limit will not be included in the array

Ezoic

Approaches to convert comma separated string to array in JavaScript

Here are different approaches to converting a comma-separated string to an array in JavaScript:

Approach 1: Convert Comma Separated String into an Array in JavaScript

You can use the javascript string.split method to split a string into an array. Pass the separator in string.split() method as the first argument, and return new array. A simple example shows:

var string = 'hello, world, test, test2, rummy, words';
var arr = string.split(', '); // split string on comma space
console.log( arr );
//Output
["hello", "world", "test", "test2", "rummy", "words"]

<html>
<head>
<title>How to Convert Comma Separated String into an Array in JavaScript?</title>
</head>
<body>
<script type="text/javascript">
 var string = 'hello, world, test, test2, rummy, words';
 var arr = string.split(', '); // split string on comma space
 console.log( arr );
</script>
</body>
</html>

Ezoic

Approach 2: Split() – No Separator:

If you do not pass a separator argument to the method to be split, the resulting array will contain a single element that contains the entire string:

Ezoic

  var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var arr = str.split(); // no separator passed to split
  console.log( arr ); 
// Output
// ["ABCDEFGHIJKLMNOPQRSTUVWXYZ"]

Approach 3: Split() – Empty String Separator:

If you pass an empty string as a separator, each character in the string will create an element in the return array:

  var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var arr = str.split(''); // using the empty string separator
  console.log( arr );
  
  //(26) ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

Approach 4: Split() – Separator at Beginning/End:

If a separator is found at the beginning or end of a string, the first and last elements of the resulting array may be empty strings:

Ezoic

  var str = 'A|B|C|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z';
  var arr = str.split('|'); // using the empty string separator
  console.log( arr );
 
  //(26) ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

Approach 5: Regular Expression Separator:

In this example, we will use separator and it can be a regular expression:

var str = 'favorite desserts: brownies, banana bread, ice cream, chocolate chip cookies';
// regular expression separator
var re = /:\s|,\s/; // split on colon space or comma space
var ar = str.split(re);
console.log( ar );
// [ "favorite desserts", "brownies", "banana bread", "ice cream", "chocolate chip cookies" ]

Approach 6: Capturing Parentheses:

The separator is usually not included in the array returned by the split method. However, if your regular expression separator involves capturing parentheses, the separators will be included in the separate elements of the resulting array:

Ezoic

var str = 'favorite desserts: brownies, banana bread, ice cream, chocolate chip cookies';
var re = /(:\s|,\s)/; // regular expression with capturing parentheses
var ar = str.split(re);
console.log( ar );
// [ "favorite desserts", ": ", "brownies", ", ", "banana bread", ", ", "ice cream", ", ", "chocolate chip cookies" ]

Approach 7: Split() with Limit Argument

An optional second argument to the partition method sets a limit on the number of elements in a given array:

  var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var arr = str.split('', 5);  // with limit
  console.log( arr );
  //(5) ["A", "B", "C", "D", "E"]

Approach 8: How do you split a string, breaking at a particular character or array in javascript?

In this example, we have a string, we will break a string into a particular character or split string by comma using the javascript split() method.

Ezoic

    var str = "This-javascript-tutorial-string-split-method-examples."
    var result = str.split('-'); 
    
    console.log(result);
    
    document.getElementById("show").innerHTML = result; 

Source code:

<html>
<head>
<title>How do you split a string, breaking at a particular character in javascript?</title>
</head>
<body>
<p id="show"></p> 
<script> 
    var str = "This-javascript-tutorial-string-split-method-examples."
    var result = str.split('-'); 
    
    console.log(result);
    
    document.getElementById("show").innerHTML = result; 
  
</script> 
</body>
</html>

Conclusion

In this javascript split method tutorial, you have learned how to convert comma-separated strings into an array in javascript using the split method. Also, you have learned different techniques for converting a string into an array in javascript.

Recommended JavaScript Tutorials

Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Jassweb.com/

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Contact
San Vito Al Tagliamento 33078
Pordenone Italy
Item added to cart.
0 items - 0.00
Open chat
Scan the code
Hello 👋
Can we help you?