To get a substring from a string we can use the JavaScript slice method.

var newText = "Text".slice(0,3);

This would result in the following output:

Tex

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

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

Which would result in the following:

Exa
xam
mple text
Example text
text

The main things to remember with the JavaScript slice 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. I find it easiest to learn how the slice method works by just trying out a bunch of examples, as seen above.

One last thing, the JavaScript slice method is a lot like the substring method. One of the differences of the slice method from the substring method is with using negative numbers. As you can see from our last example above, when you use a negative number in a slice method, it will actually count backwards from the end of the String and return the number of characters from the end. Whereas the substring method will just count the negative number as a 0 and return the whole string.

An example using the JavaScript slice Method

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



Change image

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 slice method to get the image location.

Then we will use the indexOf and slice 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.slice(0,index1); //This will get the all the characters before "1";
  var lastPartOfString = oldImgAddress.slice(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 "https://daztech.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:



Change image


<script>

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

</script>

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

Categorized in:

JavaScript,

Last Update: March 1, 2024