Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

JavaScript | Split a string with multiple separators

  • Last Updated : 26 Jul, 2021

Given a statement which contains the string and separators, the task is to split the string into substring.
String split() Method: The str.split() function is used to split the given string into array of strings by separating it into substrings using a specified separator provided in the argument.
 

Syntax:  

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

str.split(separator, limit)

Parameters: This function accepts three parameters as mentioned above and described below: 

  • str: This parameter holds the string to be split.
  • separator: It is optional parameter. It defines the character or the regular expression to use for breaking the string. If not used, the same string is returned (single item array).
  • limit: It is optional parameter. It is an integer which specifies the number of splits. All the items after limit are discarded.

Array join() function: The Array.join() function is used to join the elements of the array together into a string. This method adds the elements of an array into a string and returns the newly created string. The elements separates by a specific separator. Default separator used is comma (, ).
 



Syntax: 

array.join(separator)

Parameters: This function accepts two parameters as mentioned above and described below: 

  • array: The array to be joined.
  • separator: It is optional parameter. It specifies the separator to be used. If not passes, the default separator comma is used.

Example 1: This example splits a string by 2 separators Comma(, ) and space(‘ ‘) using .split() function. 

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            JavaScript | Split a string with
            multiple separators.
        </title>
    </head>
     
    <body style = "text-align:center;" id = "body">
         
        <h1 style = "color:green;" >
            GeeksForGeeks
        </h1>
         
        <p id="GFG_UP" style="font-size:18px; font-weight:bold;"></p>
 
         
        <button onclick = "gfg_Run()">
            split
        </button>
         
        <p id="GFG_DOWN" style="font-size:25px; font-weight:bold;"></p>
 
         
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            var str = "A, computer science, portal!";
            el_up.innerHTML = str;
             
            function gfg_Run() { 
                var arr = str.split(/[\s, ]+/)
                el_down.innerHTML = arr;    
            }
        </script>
    </body>
</html>                   

Output: 
 

  • Before clicking on the button: 
     

  • After clicking on the button: 
     

Example 2: This example split the string by number of separators like Comma(, ), equal(=) and colon(:) using multiple .join() and .split() method.  

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            JavaScript | Split a string with
            multiple separators.
        </title>
    </head>
     
    <body style = "text-align:center;" id = "body">
         
        <h1 style = "color:green;" >
            GeeksForGeeks
        </h1>
         
        <p id = "GFG_UP" style = "font-size: 18px; font-weight: bold;">
        </p>
 
         
        <button onclick = "gfg_Run()">
            split
        </button>
         
        <p id = "GFG_DOWN" style = "font-size: 25px; font-weight: bold;">
        </p>
 
         
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            var str = "A, computer=science:portal!";
            el_up.innerHTML = str;
             
            function gfg_Run(){
                var arr =
                str.split('=').join(', ').split(':').join(', ').split(', ');
                el_down.innerHTML = arr;    
            }
             
        </script>
    </body>
</html>                   

Output: 
 

  • Before clicking on the button: 
     

  • After clicking on the button: 
     




My Personal Notes arrow_drop_up
Recommended Articles
Page :