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:

JavaScript substring

See online demo and code

As you click the button, following JS function is called where substring method is executed:

 

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:

JavaScript substring start index

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.

JavaScript substring dropdown

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:

 

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.

JavaScript substring negative 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:

JavaScript substr

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:

 

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:

JavaScript substr index only

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:

JavaScript substr negative

See online demo and code

The returned string is “tutorial!” only, although the length of the string was 17.