Convert comma separated string to array using JavaScript

A comma-separated string can be converted to an array by 2 approaches:

Method 1: Using split() method
The split() method is used to split a string on the basis of a separator. This separator could be defined as a comma to separate the string whenever a comma is encountered. This method returns an array of strings that are separated.

Syntax:



string.split(', ')

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
      Convert comma separated 
      string to array using JavaScript
  </title>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>Convert comma separated string 
      to array using JavaScript</b>
    <p>Original string is
      "One, Two, Three, Four, Five"</p>
    <p>
      Separated Array is: <span class="output"></span>
  </p>
  
    <button onclick="separateString()">
      Remove Text
  </button>
    <script type="text/javascript">
        function separateString() {
            originalString = "One, Two, Three, Four, Five";
            separatedArray = originalString.split(', ');
  
            console.log(separatedArray);
            document.querySelector('.output').textContent = 
              separatedArray;
        }
    </script>
</body>
  
</html>

chevron_right






                        filter_none








Output:


    

  • After clicking the button:
    
split-output

    • 

  • Console Output:
    
split-console

    • 



Method 2: Iterating through the array keeping track of any comma encountered and creating a new array with the separated strings.

This approach involves iterating through each character in the string and checking for the comma. A variable previousIndex is defined which keeps the track of the first character of the next string. The slice method is then used to remove the portion of the string between the previous index and the current location of the comma found. This string is then pushed on to a new array. This process is then repeated for the whole length of the string. The final array contains all the separated strings.


Syntax:













                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















originalString = "One, Two, Three, Four, Five"; 


separatedArray = []; 


 


// index of end of the last string  


let previousIndex = 0; 


 


for(i = 0; i < originalString.length; i++) { 


 


    // check the character for a comma 


    if (originalString[i] == ', ') { 


 


        // split the string from the last index 


        // to the comma 


        separated = originalString.slice(previousIndex, i); 


        separatedArray.push(separated); 


 


        // update the index of the last string 


        previousIndex = i + 1; 


    } 


} 


 


// push the last string into the array 


separatedArray.push(originalString.slice(previousIndex, i)); 



















                        chevron_right







                        filter_none










Example:











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <title> 


      Convert comma separated string 


      to array using JavaScript 


  </title> 


</head> 


  


<body> 


    <h1 style="color: green"> 


      GeeksforGeeks 


  </h1> 


    <b>Convert comma separated  


      string to array using JavaScript</b> 


    <p>Original string is 


      "One, Two, Three, Four, Five"</p> 


    <p> 


      Separated Array is: <span class="output"></span> 


  </p> 


  


    <button onclick="separateString()"> 


      Remove Text 


  </button> 


    <script type="text/javascript"> 


        


        function separateString() { 


            


            originalString = 


              "One, Two, Three, Four, Five"; 


            separatedArray = []; 


  


            // index of end of the last string  


            let previousIndex = 0; 


  


            for (i = 0; i < originalString.length; i++) { 


  


                // check the character for a comma 


                if (originalString[i] == ', ') { 


  


                    // split the string from the last index 


                    // to the comma 


                    separated =  


                      originalString.slice(previousIndex, i); 


                    separatedArray.push(separated); 


  


                    // update the index of the last string 


                    previousIndex = i + 1; 


                } 


            } 


  


            // push the last string into the array 


            separatedArray.push( 


              originalString.slice(previousIndex, i)); 


  


            console.log(separatedArray); 


            document.querySelector( 


              '.output').textContent = separatedArray; 


        } 


    </script> 


</body> 


  


</html> 



















                        chevron_right







                        filter_none








Output:


    

  • After clicking the button:
    
js-output

    • 

  • Console Output:
    
js-console

    • 






    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
sayantanm19
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.