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:

 

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:

 

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:

 

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:

 

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:

 

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:

 

In other scenarios, the source string can be database driven or from some other source(s).