JavaScript substring and substr methods to get substrings with 7 demos
The substring method in JavaScript
In order to get the substring from a source string, you can use the substring or substr methods of JavaScript. For example, this is how the substring method can be used:
var sub_string = main_string.substring (5, 30);
You have to specify the start index that represents where to start creating the substring from the source string. This is the required parameter of JavaScript substring method which index starts at zero.
The other parameter specifies the end index that tells where to end the substring. This is an optional parameter. If you do not specify the end parameter, then remaining string from begin index will be returned as a substring.
(To learn about substr method, go to the last section of this tutorial)
To understand it better, see the following online examples.
An example of substring JS method with both parameters
In this example, I have created a source string “The JavaScript substring tutorial!” to demonstrate the substring method.
As you click the button, “Execute substring method”, it will display the substring extracted from the source string. See the demo online:
See online demo and code
As you click the button, following JS function is called where substring method is executed:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> function getsubstring(){ var source_string = ("The JavaScript substring tutorial!"); var str_sub = source_string.substring(4,24); document.getElementById("substring").innerHTML = str_sub; } </script> |
You can see, both starting and end indices are given in the substring method, which returned value is assigned to another variable. Finally, its value is displayed in the HTML <span> tag.
An example without end index
In this example, I will use the same string as in above example while in the substring method only the start index is given. See the output:
See online demo and code
You can see in the output, the remaining string is displayed in the <span> tag after 4th character. Only this line is changed as compared to the above example:
var str_sub = source_string.substring(4);
That means, if you do not specify the end index number, the substring method will extract the remaining string from the start index.
A demo of substring with user-selected start and end index numbers
In this demo, rather using the hard coded or fixed start and end index numbers, I have given two HTML dropdowns to select the start and end indices.
As you select the start and end indices and press the button, the JavaScript substring method will execute and return the substring from specified index numbers. For that, I have used the same source string as in above examples.
See online demo and code
In the <script> section, first I got the values of start and end dropdowns to JS variables. After that, the substring method is used where those variables are used to specify the start and end indices:
|
1 2 3 4 5 6 7 |
var start_index = document.getElementById("st_index").value;; var end_index = document.getElementById("end_index").value;; var source_string = ("The JavaScript substring tutorial!"); var str_sub = source_string.substring(start_index,end_index); |
Finally, the returned substring is displayed by using this statement:
document.getElementById(“substring”).innerHTML = str_sub;
What happens if you use a negative index number?
You may also use a negative number as start or end index. In that case, it will act as zero. For example, if you use:
Source_string.substring(-5);
It will be taken as zero. See the following example online where I used a negative value for starting index.
See online demo and code
The following command is used for substring in <script> section:
var str_sub = source_string.substring(-4, 15);
You can see in the output, the extracted substring is started from the first letter i.e. “The JavaScript”.
JavaScript substr method to get substrings
You can also use the substr method of JavaScript to get the substrings from the source string. The substr method also takes two parameters, e.g.
var sub_string = main_string.substr (5, 30);
Where the first parameter species the starting index while the second parameter is the length of the returned substring. This is unlike the substring method where the second parameter specifies the end index.
The original string remains the same after using the substr method just like in the case of substring method.
See the following examples for using the substr JavaScript method.
A simple example of substr method
In this example, a source string is created and assigned to a JS variable. After that, the substr method is used to get the substring by using both start index and length parameters. See the code and output by clicking the links below:
See online demo and code
You can see, the JS function is called at the click event of the button where I have used the substr method:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> function getsubstring(){ var source_string = ("The JavaScript substr tutorial!"); var str_sub = source_string.substr(4,17); document.getElementById("substr").innerHTML = str_sub; } </script> |
The substr started from the 5th letter and returned 17 characters ahead of 4th character.
Using substr method without length parameter
If you do not provide the length parameter, the substr method will return the remaining string to the end. See the following online example where only start index with value of 4 is used, see the output:
See online demo and code
You see, the substr returned the complete string from starting character. This line of code is used to create the substring:
var str_sub = source_string.substr(4);
An example of JS substr with negative index
If you specify a negative index number, the counting will be started from the end of the source string. See the following example where I used -10 to the same source string as in above examples:
See online demo and code
The returned string is “tutorial!” only, although the length of the string was 17.