0

I want to change image suffix for all image having class "thumb". They can be in jpg, png or gif

<img class="thumb" src="http://someting.com/images/abc-150X150.jpg"/>

Want to remove -150X150

<img class="thumb" src="http://someting.com/images/abc.jpg"/>

I've come to know this code, But it removes extensions and uses img tag instead of class. Thanks for watching my question.

Community
  • 1
  • 1
wp student
  • 755
  • 9
  • 24

2 Answers2

2

This uses regex to replace and pattern that matches a hyphen, followed by a digit, then an X and another digit

$('.thumb').attr('src', function (index, src) { 
    return src.replace(/-\d+x\d+/, ''); 
});

It is worth noting that this is just simple regex. If you wanted to get more complex then you could specify a minimum number of integers either side of the x to reduce matching the wrong thing, such as:

/-\d{3,}x\d{3,}/

The above will match 3 or more digits either side of the x

Cjmarkham
  • 9,484
  • 5
  • 48
  • 81
  • 2
    I'd recommend using the callback of `attr()`, rather than calling it twice: `attr('src', function(index, oldSRC){ return oldSRC.replace(/* regex */,''); });` (or using `prop()` instead, but that's a personal preference). – David Thomas Mar 29 '14 at 20:39
  • Regex is good for varring suffixes. It didn't work. http://jsfiddle.net/waqasss/n2uA5/1/ – wp student Mar 29 '14 at 20:54
  • That is because you are using an uppercase X in your question (so I added an uppercase X to the regex), but you are using a lowercase x in the fiddle. I've changed the answer and fiddle – Cjmarkham Mar 29 '14 at 20:57
  • I added some more information to the answer regarding the possibility of matching the wrong thing as mentioned in @raina77ow's comment – Cjmarkham Mar 29 '14 at 21:02
  • Well, the safer approach would be to replace the prefix only if it precedes an extension - by adding `(?=\.[^.]+$)` to it, for example. While that'll make this path more universal, I honestly doubt such a complexity is useful for this particular task. Still, I can be wrong. ) – raina77ow Mar 29 '14 at 21:04
1

One possible approach:

$('img.thumb').each(function() {
  this.src = this.src.replace('-150X150', '');
});
raina77ow
  • 103,633
  • 15
  • 192
  • 229
  • I tested it worked. And upvoted, don't know who downvoted. I was thinking about both @carl-markham and your answer. I think using regex will be slower it because it will be checking before replacing. I should use your method when suffix is same in all images. Is it? – wp student Mar 29 '14 at 20:52
  • 1
    Well, I don't think the difference in speed is really worth talking. What is, however, is that with string replace your target is clear - it's ONLY this '-150X150' line, nothing more. With regex, it's not so: consider what happens with `'pic_of_4x4_car-150x150.jpg'`, for example. – raina77ow Mar 29 '14 at 20:58
  • If it will always be 150x150 then this is the best answer. If it changes sometimes then you will need regex – Cjmarkham Mar 29 '14 at 20:59