Question

I am trying to write a script in jQuery that first, takes src of an image tag (with ID “#image”).

Then strips away the first part of the image path (“images/big/”) and the image extension (“.jpg”). This leaves just the image name, which is just a number (ranging from 1 to 7).

Then, increments that number by 1.

Then puts image path and the image extension (the stuff removed at the beginning) back in the proper place. Then assign this new path to the img tag (with ID “#image”)

Essentially the script is meant to increment the number that is the image’s name.

This is the code I managed to write:

var imagePath = ( $("#image").prop("src") );
    var imagePath = imagePath.replace('images/big/', '');
    var imagePath = imagePath.replace('.jpg', '');
    var imagePath = imagePath++;
    var imagePath = "images/big/"+imagePath+".jpg";
    $("#image").attr("src", imagePath);

Sadly, however, it does not work, its seems to just return a value of “NaN”. Any help you can give would be greatly appreciated.

Answer 1

You have too much code to replace a single number.

$("#image").attr("src", $("#image").attr("src").replace(/\d/, function(s) {
    return +s+1;
}));

Fiddle

Or a more sturdy version (makes sure the number is followed by .jpg and may accept more than single-digit numbers):

$("#image").attr("src", $("#image").attr("src").replace(/(\d+)\.jpg/, function(s, m) {
    return (parseInt(m, 10)+1) + '.jpg';
}));

Fiddle

parseInt() parses a string into an integer with the radix/base specified — 10 corresponds to decimals. It’s done so the JS engine doesn’t assume that a number should be an octal if it starts with 0 for example. Well, always when you use decimals, use parseInt(myNumber, 10) to be sure that it’s parsed as decimal integer.

The .attr you should be familiar with, it retrieves the given HTML attribute when passed 1 argument and sets the given attribute when passed 2 arguments. So basically, I’m setting the src attribute with the same src after having the replace method applied to it.

The string.replace method takes 2 arguments, in this case I’m using a regex (Regular Expression) to match digit characters (\d is a character class representing [0-9]) followed by the literal .jpg string and replacing them with the matched number incremented by 1.

The function object in the 2nd parameter of the replace method takes as arguments the whole match (s) followed by N number of capturing groups (m = \d+ = one or more digit characters). As I only have one capturing group, I give 2 parameters to the function so I can use the captured group and increment it inside the function object, returning the incremented number + .jpg to replace the number.jpg in the original source.

And for the reason your code was not working, my only guess is that you weren’t stripping out all non-number characters from the string, hence when the ++ increment operator tries to force a typecast it just returns a NaN, as the given string fails to be parsed as integer. With my replace method, it takes only the number from the string and increments it, independently of the rest of the string.

---

Edit:

I found the main problem of your code, $("#image").prop("src") retrieves the FULL URL of the image, that is why, as my paragraph above implies, you weren’t removing all non-number characters and it failed to evaluate as integer. Replacing that .prop with .attr may allow your original code to work as well.

Though you shouldn’t assign a variable to itself after using the post-increment operator ++ and declaring the same variable name in the same scope more than once is considered bad practice (most JS interpreters ignore re-declarations but it is sloppy coding).

So another corrected version of the code:

var imagePath = $("#image").attr("src"); //use .attr as .prop returns full URL
imagePath = imagePath.replace('images/big/', '').replace('.jpg', '');
imagePath++;
imagePath = "images/big/"+imagePath+".jpg";
$("#image").attr("src", imagePath);