How to Convert Comma Separated String into an Array in JavaScript?

Let’s take a new example for 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"]

Let’s Take Separator Varieties Examples

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:

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

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"]

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:

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"]

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" ]

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:

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" ]

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"]

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.

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

Source code:

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

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 technic for convert string into an array in javascript.

Источник

JavaScript Arrays

An array is a special variable, which can hold more than one value:

Why Use Arrays?

If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:

However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?

An array can hold many values under a single name, and you can access the values by referring to an index number.

Creating an Array

Using an array literal is the easiest way to create a JavaScript Array.

It is a common practice to declare arrays with the const keyword.

Learn more about const with arrays in the chapter: JS Array Const.

Example

Spaces and line breaks are not important. A declaration can span multiple lines:

Example

You can also create an array, and then provide the elements:

Example

Using the JavaScript Keyword new

The following example also creates an Array, and assigns values to it:

Example

The two examples above do exactly the same.

There is no need to use new Array() .

For simplicity, readability and execution speed, use the array literal method.

Accessing Array Elements

You access an array element by referring to the index number:

Note: Array indexes start with 0.

[0] is the first element. [1] is the second element.

Changing an Array Element

This statement changes the value of the first element in cars :

Example

Converting an Array to a String

The JavaScript method toString() converts an array to a string of (comma separated) array values.

Example

const fruits = [«Banana», «Orange», «Apple», «Mango»];
document.getElementById(«demo»).innerHTML = fruits.toString();

Access the Full Array

With JavaScript, the full array can be accessed by referring to the array name:

Example

Arrays are Objects

Arrays are a special type of objects. The typeof operator in JavaScript returns «object» for arrays.

But, JavaScript arrays are best described as arrays.

Arrays use numbers to access its «elements». In this example, person[0] returns John:

Array:

Objects use names to access its «members». In this example, person.firstName returns John:

Object:

Array Elements Can Be Objects

JavaScript variables can be objects. Arrays are special kinds of objects.

Because of this, you can have variables of different types in the same Array.

You can have objects in an Array. You can have functions in an Array. You can have arrays in an Array:

Array Properties and Methods

The real strength of JavaScript arrays are the built-in array properties and methods:

Array methods are covered in the next chapters.

The length Property

The length property of an array returns the length of an array (the number of array elements).

Example

The length property is always one more than the highest array index.

Accessing the First Array Element

Example

Accessing the Last Array Element

Example

Looping Array Elements

One way to loop through an array, is using a for loop:

Example

const fruits = [«Banana», «Orange», «Apple», «Mango»];
let fLen = fruits.length;

You can also use the Array.forEach() function:

Example

const fruits = [«Banana», «Orange», «Apple», «Mango»];

Adding Array Elements

The easiest way to add a new element to an array is using the push() method:

Example

const fruits = [«Banana», «Orange», «Apple»];
fruits.push(«Lemon»); // Adds a new element (Lemon) to fruits

New element can also be added to an array using the length property:

Example

const fruits = [«Banana», «Orange», «Apple»];
fruits[fruits.length] = «Lemon»; // Adds «Lemon» to fruits

Adding elements with high indexes can create undefined «holes» in an array:

Example

const fruits = [«Banana», «Orange», «Apple»];
fruits[6] = «Lemon»; // Creates undefined «holes» in fruits

Associative Arrays

Many programming languages support arrays with named indexes.

Arrays with named indexes are called associative arrays (or hashes).

JavaScript does not support arrays with named indexes.

In JavaScript, arrays always use numbered indexes.

Example

const person = [];
person[0] = «John»;
person[1] = «Doe»;
person[2] = 46;
person.length; // Will return 3
person[0]; // Will return «John»

WARNING !!
If you use named indexes, JavaScript will redefine the array to an object.

After that, some array methods and properties will produce incorrect results.

Example:

const person = [];
person[«firstName»] = «John»;
person[«lastName»] = «Doe»;
person[«age»] = 46;
person.length; // Will return 0
person[0]; // Will return undefined

The Difference Between Arrays and Objects

In JavaScript, arrays use numbered indexes.

In JavaScript, objects use named indexes.

Arrays are a special kind of objects, with numbered indexes.

When to Use Arrays. When to use Objects.

JavaScript does not support associative arrays.
You should use objects when you want the element names to be strings (text).
You should use arrays when you want the element names to be numbers.

JavaScript new Array()

JavaScript has a built-in array constructor new Array() .

But you can safely use [] instead.

These two different statements both create a new empty array named points:

These two different statements both create a new array containing 6 numbers:

The new keyword can produce some unexpected results:

Источник

How to Convert Comma Separated String into an Array in JavaScript?

JavaScript Convert String to Array JavaScript

Convert String to Array JavaScript

Split() Method JavaScript

Note

Syntax

Parameter And Values

Various Example Below:-