Is there a way to get a number from an image src url with javascript?

Question

I've been searching everywhere and can't find an answer to my question. Maybe I'm asking the wrong questions...

So, my problem is: I have a blogroll that displays the latest post images, where I have sites and blogs from diferent platforms that I want to share with my readers, including WordPress. Most images (thumbnails) are square but the ones from WP blogs are with multiple sizes. Analysing the image src, I was able to find out that replacing the last part of the url did the trick and I can make those images fit with the rest without screwing my site's design. :)

Example:

http://colecaodisney.files.wordpress.com/2014/08/casty.jpg?w=112 <---original image src http://colecaodisney.files.wordpress.com/2014/08/casty.jpg?w=126&h=126&crop=TRUE <---edited by me to fit my blogroll

Since I don't have access to those images src, and with CSS isn't an option due to my blogroll works with javascript, I did this changes with jquery:

img = $(this).find('img').attr('src').replace('?w=112', '?w=126&h=126&crop=TRUE');

The problem is that where is the number 112, that means the width of the thumbnail, isn't always the same number. My solution so far is chain some replaces for every new width number that eventually show up. And I was wondering, and looking everywhere, if there is a way to write that line of code so that it works no matter what the number that represents the width might be...

Thank you for any help.

Often using regexps to solve a problem means you then have 2 problems. But in this case it's the solution. — Niels Keurentjes
– Niels Keurentjes, Commented Aug 30, 2014 at 14:10

Community · Accepted Answer · 2017-05-23 11:57:15Z

6

Because attr() returns the given attribute for only the first matched element, to change (potentially many) elements I would suggest:

$(this).find('img').prop('src', function(i, src) {
    return src.replace(/(w=\d+)$/, '?w=126&h=126&crop=TRUE');
});

JS Fiddle demo (kindly offered by Brian).

If you need to store a reference the changed images (as from your question), you can chain get() to return an array:

var changedImages = $(this).find('img').prop('src', function(i, src) {
    return src.replace(/(w=\d+)$/, '?w=126&h=126&crop=TRUE');
}).get();

References:

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Aug 30, 2014 at 14:12

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Brian Dillingham Over a year ago

function(i,src{ to function(i,src){

David Thomas Over a year ago

@Brian: sigh, iPad really is not the tool for JavaScript/coding. :-/

Osvaldo Correia Over a year ago

This is a good solution, but I need something that works just in one line as the line I posted is part of a large coding that makes my blogroll.

Dávid Szabó Over a year ago

@OsvaldoCorreia If you want to replace only that line, you can still use my answer.

Brian Dillingham Over a year ago

If line count is a concern, move the call back to one line with this answer like so jsfiddle.net/vo6cf1k3/1

|

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

You need to use Regular Expressions.

img = $(this).find('img').attr('src').replace(/w=[0-9]+/, 'w=126&h=126&crop=TRUE');

This will match:

w=(digits)

[0-9] Match a digit

[0-9]+ Match consecutive digits

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 30, 2014 at 14:11

Dávid Szabó

2,2672 gold badges17 silver badges26 bronze badges

6 Comments

Niels Keurentjes Over a year ago

I would recommend using /w=[1-9][0-9]*/ instead of /w=[0-9]+/ - a regexp on arbitrary text can never be too specific.

Pointy Over a year ago

Note that the result of this will be to set the variable "img" to the modified URL - it'll be necessary to reassign the "src" attribute afterwards.

Osvaldo Correia Over a year ago

I got it to work with your solution, but had to make it like this: .replace(/w=[0-9]+/, 'w=126&h=126&crop=TRUE');

Dávid Szabó Over a year ago

@OsvaldoCorreia Yes,i just saw that problem, i edited it just some secs ago.

Dávid Szabó Over a year ago

@Brian You need to use like this: jsfiddle.net/vo6cf1k3/5 BTW why downvote?

|

Collectives™ on Stack Overflow

Is there a way to get a number from an image src url with javascript?

2 Answers 2

8 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related