A comma-separated values (CSV) file represents a structured file format that utilizes commas to differentiate between data points. Each data entry consists of one or multiple fields, which are separated by commas. This file format is commonly referred to as the comma-separated file format, highlighting the role of the comma as a delimiter for the fields.
You can transform a comma-separated string into an array utilizing the two methods outlined below.
- By employing the split function
- By iterating through the list and keeping a record of each comma encountered to create a new collection of distinct strings.
By using the split method
The split function serves to divide a sequence according to a specified extractor. This delimiter may be defined as a comma, allowing for the separation of the string whenever a comma is present. The outcome of this operation is an array comprising unique strings.
Syntax
string.split(' , ')
Example
Below is an illustration provided for this purpose.
<!DOCTYPE html>
<html>
<head>
<title>
Conversion of comma separated
string to array in JavaScript
</title>
</head>
<body>
<h2 style="color: green">
C# Tutorial
</h2>
<b>Conversion of comma separated string
to array in JavaScript</b>
<p>Original string is
"Twenty, Thirty, Fourty, Fifty, Sixty"</p>
<p>
The values of the Separated Array is: <span class="output"></span>
</p>
<button onclick="separateString()">
Remove Text
</button>
<script type="text/javascript">
function separateString() {
originalString = "Twenty, Thirty, Fourty, Fifty, Sixty";
separatedArray = originalString.split(', ');
console.log(separatedArray);
document.querySelector('.output').textContent =
separatedArray;
}
</script>
</body>
</html>
Output
Upon the successful completion of the output process, we obtained the subsequent results.
Append through the list and put track of each comma you find to generate a new sequence with different strings
This approach enables you to loop through the characters of the string and check for the presence of a comma. You can establish a variable to track the previous index, which records the initial character of the subsequent string. The slice method is employed to extract the portion of the string from the previous index up to the identified position of the comma. This extracted substring is then added to a new array. This process is repeated throughout the entire length of the string. The end result consists of all the individual strings.
Syntax
originalString = " Twenty, Thirty, Fourty, Fifty, Sixty ";
separatedArray = [];
let previousIndex = 0; // index of end of the last string
for(i = 0; i < originalString.length; i++)
{
if (originalString[i] == ', ') { // check the character for a comma
// split the string from the last index to the comma
separated = originalString.slice(previousIndex, i);
separatedArray.push(separated);
previousIndex = i + 1; // update the index of the last string
}
}
// push the last string into the array
separatedArray.push(originalString.slice(previousIndex, i));
Example
Below is an illustration provided for this purpose.
<!DOCTYPE html>
<html>
<head>
<title>Conversion of comma separated string to array in JavaScript
</title>
</head>
<body>
<h1 style="color: green">
C# Tutorial
</h1>
<b>Conversion of comma separated string
to array in JavaScript</b>
<p>Original string is
"Twenty, Thirty, Fourty, Fifty, Sixty"</p>
<p>
Separated Array is: <span class="output"></span>
</p>
<button onclick="separateString()">
Remove Text
</button>
<script type="text/javascript">
function separateString()
{
originalString =
"Twenty, Thirty, Fourty, Fifty, Sixty";
separatedArray = [];
let previousIndex = 0; // index of end of the last string
for (i = 0; i < originalString.length; i++)
{
if (originalString[i] == ', ') // check the character for a comma
{
separated = // split the string from the last index to the comma
originalString.slice(previousIndex, i);
separatedArray.push(separated);
previousIndex = i + 1; // update the index of the last string
}
}
separatedArray.push( // push the last string into the array
originalString.slice(previousIndex, i));
console.log(separatedArray);
document.querySelector(
'.output').textContent = separatedArray;
}
</script>
</body>
</html>
Output
Upon running the code, you will receive the subsequent snippet.