• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / JavaScript substring – How to Get a Substring From a String

JavaScript substring – How to Get a Substring From a String

December 27, 2021 Leave a Comment

To get a substring from a string in JavaScript, we can use the substring() method.

"Text".substring(0,3);

This would result in the following output:

Tex

Some other examples of the substring() method are below:

var text = "Example text";
var str1 = text.substring(0,3);
var str2 = text.substring(1,4);
var str3 = text.substring(3);
var str4 = text.substring(3,0);
var str5 = text.substring(0);

Which would result in the following:

Exa
xam
mple text
Exa
Example text

The main things to remember with the JavaScript substring method are that the first number is the start position and the first character starts at index 0, not 1. And then the only other tricky part is that the last number is the end position of the string, not including that number. We find it easiest to learn how the substring method works by just trying out a bunch of examples, as seen above.

An example using the JavaScript Substring Method

Below is an example of replacing an image using JavaScript substring() and other JavaScript methods.

<img id="img1" src="http://theprogrammingexpert.com/wp-content/uploads/example-img1.png">
<div id="click-me">Change image</div>

Let’s say we have another image called “example-img2” which is in the same location as the image above. When we click the button, we want to swap out that image. This can be useful when we have images in order of img1, img2, im3, etc… So we will use the JavaScript substring method to get the image location. Then we will use the indexOf and substring methods to build the new image link. And finally, we will replace the old image. Here is the JavaScript code below:

$("#click-me").click(function(){
  var oldImgAddress = $('#img1').attr('src');
  //Since we know the image will have the same address, we just need to change the number from "example-img1" to "example-img2". To do this we will find the indexOf the number "1", and then build a new string using this information.
  var index1 = oldImgAddress.indexOf('1');
  var firstPartOfString = oldImgAddress.substring(0,index1); //This will get the all the characters before "1";
  var lastPartOfString = oldImgAddress.substring(index1+1); //This will get all the characters after "1";
  //We then just have to add in "2" between the two strings;
  var newImgAddress = firstPartOfString + "2" + lastPartOfString;
  //This new string should now be "http://theprogrammingexpert.com/wp-content/uploads/example-img2.png"
  //We can now use jQuery to replace the old image  
  $('#img1').attr('src',newImgAddress);
});

The final code and output for this example is below:

Code Output:

Change image

Full Code:

<img id="img1" src="http://theprogrammingexpert.com/wp-content/uploads/example-img1.png">
<div id="click-me">Change image</div>

<script>

$("#click-me").click(function(){
  var oldImgAddress = $('#img1').attr('src');
  var index1 = oldImgAddress.indexOf('1');
  var firstPartOfString = oldImgAddress.substring(0,index1);
  var lastPartOfString = oldImgAddress.substring(index1+1);
  var newImgAddress = firstPartOfString + "2" + lastPartOfString;
  $('#img1').attr('src',newImgAddress);
});

</script>

Hopefully this article has been useful in helping you understand the JavaScript substring() method.

Other Articles You'll Also Like:

  • 1.  Using JavaScript to Remove Leading Zeros
  • 2.  Convert String to Array in JavaScript
  • 3.  Add Commas to Number in JavaScript
  • 4.  Using JavaScript to Replace a Character at an Index
  • 5.  Using JavaScript to Capitalize the First Letter of a String
  • 6.  Using JavaScript to Remove Backslash From a String
  • 7.  React Axios Interceptor to Prevent Infinite Loops in JWT Authentication
  • 8.  Using JavaScript to Replace Space With Dash
  • 9.  Using JavaScript to Check if String Contains Only Letters
  • 10.  outerHTML – How to Get and Change the outerHTML Property of an Element

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy