JavaScript string split tutorial
The split method in JavaScript
The JavaScript split method is used to break a given string into pieces by a specified separator like a period (.), comma, space or a word/letter.
The method returns an array of split strings.
Syntax of split method
This is how you may use the split method of JS:
1 2 3 |
var src_str = "Sentence 1. Sentence 2. Sentence 3"; var str_spl = src_str.split(".",3); |
The above code will break the string (src_str) into three pieces by the dot (.) separator. The returned array will be of three elements.
- If you do not specify the separator, which is an optional parameter, the split JavaScript method will return the complete string.
- The other parameter is the limit that specifies the number of pieces of the given string.
I will show you different uses of the split method with online examples in the following section.
An example of split string with dot (.) operator
In this example of splitting a string, I am using the dot as a separator. So wherever dot (.) is found in the given string, the split method will break it and return an array of broken strings.
In that case, I am using the same string as shown in above syntax, i.e.
var src_str = “Sentence 1. Sentence 2. Sentence 3”;
See the split method is action by clicking the links below:
See online demo and code
This is how it is done;
First of all, the string is assigned to a JS variable:
1 var src_str = "Sentence 1. Sentence 2. Sentence 3";
After that, string’s split method is used:
1 var str_spl = src_str.split(".");
This is followed by accessing and displaying the returned array after executing the JS split method. This involved declaring a few variables and using a for loop with length property of arrays:
1 2 3 4 5 6 7 8 9 10 11 |
var num; var display_split_strings = '<p>After executing the split method: <span> src_str.split(".");</span></p>'; for (num=0; num < str_spl.length; num++){ display_split_strings += str_spl[num] + "<BR>"; } |
Finally, the array elements displayed in an HTML paragraph contained inside the main div:
1 document.getElementById("splitted_string").innerHTML = display_split_strings;
That’s it.
An example of split without a separator
What happens if no separator is provided as using the split method? See online yourself where I used the same string as in above example:
See online demo and code
Only this line of code is changed as compared the above example:
1 var str_spl = src_str.split();
You see, no separator is given and it returned a complete string, still as an array of one element.
A demo to use the limit parameter in JavaScript split string method
As mentioned earlier, you may limit the number of pieces of the given string by using the other optional parameter in split method. In this example, I will break the source string into two pieces by using the limit parameter.
See online demo and code
You see, the only two sentences are displayed after using the for loop to show array elements. Following JS code is used:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script type="text/javascript"> var src_str = "Sentence 1. Sentence 2. Sentence 3"; var str_spl = src_str.split("." , 2); var num; var display_split_strings = '<p>After executing split method: <span> src_str.split("." , 2);</span></p>'; for (num=0; num < str_spl.length; num++){ display_split_strings += str_spl[num] + "<BR>"; } document.getElementById("splitted_string").innerHTML = display_split_strings; </script> |
You can see the complete code with markup and style in the demo page.
Splitting a phone number with hyphen as separator demo
In this demo, I will use a hyphen separator to split the string, which is a phone number in this format:
012-345-6789
See the example online by clicking the links below:
See online demo and code
The following line of code is used in the <script> section to split the phone string:
1 2 3 |
var src_str = "012-345-6789"; var str_spl = src_str.split("-"); |
A demo of split method with HTML dropdown
In above examples, I used hard coded separators in the split method. In this example, I have used an HTML dropdown to select a separator from the pre-defined options. This includes dot, space, “pieces”, hyphen and others.
After selecting a separator from dropdown, press the button “Execute split method”. At the click event of that button, a JS function is called to execute the split method. See the demo online and try different separators.
See online demo and code
You can see the complete code in the demo page. This is how JS function executed the code:
First of all, the selected value from the dropdown is stored into a JS variable:
1 |
var split_seperator = document.getElementById("splitsep").value; |
Also, the source string, this time, is a paragraph text rather a direct JS string with hard coded value.
1 var src_str = document.getElementById("src_string").innerHTML;
After that, the split method is executed with selected separator which is followed by a for loop to display the returned array elements:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var str_spl = src_str.split(split_seperator); var num; var display_split_strings = '<p>After split method:</p>'; for (num=0; num < str_spl.length; num++){ display_split_strings += str_spl[num] + "<BR>"; } document.getElementById("splitted_string").innerHTML = display_split_strings; |
In other scenarios, the source string can be database driven or from some other source(s).