JavaScript substring and substr Methods

JavaScript substring method featured image

The substring method in JavaScript

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 the JavaScript substring method.
  • The 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 the remaining string from the begin index will be returned as a substring.

(To learn about substr method, go to the last section of this tutorial)

 

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.

JavaScript substring

Complete code:

<!DOCTYPE html>
<html>
<head>
<style>
.substrdiv {
  background: #D26900;
  height: auto;
  width:300px;
  border-radius: 15px;
  padding:20px;
  font-size:16px;
  color:#fff;  
}
#substring {
    background: #5AB65A;
}
.paracls {
    background: #5AB65A;
}
.btncls{
    background-color:#4F6677;
    border: #2e6da4;
  	font-family: Arial, Geneva, Arial, Helvetica,  sans-serif;
	font-size: 15px;
    color: #FFFFFF;
    letter-spacing: 1px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: normal;

    border-radius: 4px;
    line-height: 1.5;
    text-decoration:none;
} 
</style>
</head>

<body>
<div class="substrdiv">Main String: "The JavaScript substring tutorial!" 
<p class="paracls">var str_sub = source_string.substring(4,24);</p>
<p>After substring method: <span id="substring"></span></p>

</div>

<p><button class="btncls" onclick="getsubstring()">Execute substring method</button></p>
<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>
</body>
</html>

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

<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 that both starting and end indices are given in the substring method.
  • The 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 the above example while in the substring method, only the start index is given. See the output:

JavaScript substring start index

JS code:

<script type="text/javascript">
function getsubstring(){
var source_string = ("The JavaScript substring tutorial!");
var str_sub = source_string.substring(4);

document.getElementById("substring").innerHTML = str_sub;
}
</script>

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 than 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 the above examples.

JavaScript substring dropdown

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:

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 a 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 the starting index.

JavaScript substring negative index

JavaScript code:

<script type="text/javascript">
function getsubstring(){
var source_string = ("The JavaScript substring tutorial!");
var str_sub = source_string.substring(-4, 15);

document.getElementById("substring").innerHTML = str_sub;
}
</script>

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:

Parameter/Point Description
starting index The first parameter species the starting index.
length The second parameter is the length of the returned substring.

This is unlike the substring method where the second parameter specifies the end index.

original string The original string remains the same after using the substr method just like in the case of the 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 the start index and length parameters.

See the code and output below.

The code:

<!DOCTYPE html>
<html>
<head>


<style>
.substrdiv {
  background: #D9524E;
  height: auto;
  width:300px;
  border-radius: 15px;
  padding:20px;
  font-size:16px;
  color:#fff;  
}
#substr {
    background: #4E6576;
}
.paracls {
    background: #4E6576;
}
.btncls{
    background-color:#5ABFDD;
    border: #2e6da4;
  	font-family: Arial, Geneva, Arial, Helvetica,  sans-serif;
	font-size: 15px;
    color: #FFFFFF;
    letter-spacing: 1px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: normal;

    border-radius: 4px;
    line-height: 1.5;
    text-decoration:none;
} 
</style>
</head>

<body>
<div class="substrdiv">Main String: "The JavaScript substr tutorial!" 
<p class="paracls">var str_sub = source_string.substr(4,17);</p>
<p>After substr method: <span id="substr"></span></p>

</div>

<p><button class="btncls" onclick="getsubstring()">Execute substr method</button></p>
<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>
</body>
</html>

Output as the button is clicked:

JavaScript substr

You can see, the JS function is called at the click event of the button where I have used the substr method:

<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 the 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 example where only the start index with a value of 4 is used, see the output:

JavaScript substr index only

JS code for this example:

<script type="text/javascript">
function getsubstring(){
var source_string = ("The JavaScript substr tutorial!");
var str_sub = source_string.substr(4);

document.getElementById("substr").innerHTML = str_sub;
}
</script>

You see, the substr returned the complete string from the 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 a 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 the above examples:

JavaScript substr negative

JavaScript:

<script type="text/javascript">
function getsubstring(){
var source_string = ("The JavaScript substr tutorial!");
var str_sub = source_string.substr(-10, 17);

document.getElementById("substr").innerHTML = str_sub;
}
</script>

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

Author - Atiq Zia

Atiq is the writer at jquery-az.com, an online tutorial website started in 2014. With a passion for coding and solutions, I navigate through various languages and frameworks. Follow along as we unravel the mysteries of coding together!