Compressing Image Source path in Javascript

Question

I have a web app which replaces few img's with other img's.

For example: Image with path http://example.com/example/example/images/dir/1.gif is repalced with http://cdn.example.com/dir/1.gif.

To do this I use jQuery attr().

So my code looks something like this:

$('img[src="http://www.example.com/dir/images/dir/1.gif"]').attr('src', "http://cdn.example.com/dir/1.gif");
$('img[src="http://www.example.com/dir/images/dir/2.gif"]').attr('src', "http://cdn.example.com/dir/2.gif");
$('img[src="http://www.example.com/dir/images/dir/3.gif"]').attr('src', "http://cdn.example.com/dir/3.gif");
$('img[src="http://www.example.com/dir/images/dir/4.gif"]').attr('src', "http://cdn.example.com/dir/4.gif");
$('img[src="http://www.example.com/dir/images/dir/5.gif"]').attr('src', "http://cdn.example.com/dir/5.gif");
$('img[src="http://www.example.com/dir/images/dir/6.gif"]').attr('src', "http://cdn.example.com/dir/6.gif");
$('img[src="http://www.example.com/dir/images/dir/7.gif"]').attr('src', "http://cdn.example.com/dir/7.gif");
$('img[src="http://www.example.com/dir/images/dir/8.gif"]').attr('src', "http://cdn.example.com/dir/8.gif");
$('img[src="http://www.example.com/dir/images/dir/9.gif"]').attr('src', "http://cdn.example.com/dir/9.gif");
$('img[src="http://www.example.com/dir/images/dir/10.gif"]').attr('src', "http://cdn.example.com/dir/10.gif")

So is there a way to compress this? So it's written in less characters?

Note: On each line, images on both websites are the same. Example, 1.gif is replaced again with 1.gif but a different server. So basically I want to replace the server. When http://www.example.com/dir/images/dir/ replace with http://cdn.example.com/dir/.

Thanks alot

Answer 1

It's as simple as using a loop:

var i;
for ( i = 1; i <= 10; i++ )
{
  $('img[src="http://www.example.com/dir/images/dir/'+i+'.gif"]').attr('src','http://cdn.example.com/dir/'+i+'.gif');
}

Or were you asking for a find and replace for all?

You could use the attr starts with selector:

$('img[src^="http://www.example.com/"]').each(function(index,element){
  var $this, src, newSrc;
  $this = $(this);
  src = $this.attr('src');
  //do your replacement here
  newSrc = src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir');
  $this.attr('src', newSrc);
});

as Moin Zaman pointed out, attr can take a function as a parameter as well, which shortens this script to:

$('img[src^="http://www.example.com/"]').attr('src', function(index, src){
  return src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir');
});

Answer 2

You need JavaScript's .replace() method with regular expressions to replace stuff.

in jQuery the attribute selector ^= means look for attribute value that starts with.

Try this, I'm assuming its all images that start with 'www.example.com':

$('img[src^="http://www.example.com/dir/images/dir"]').attr('src',
    function(i,src){ 
        return src.replace('example.com/dir/images/dir','cdn.example.com/dir') 
});