Add base url to all images in an element

Question

I am using a javascript editor called NicEdit which doesn't come with an option to change or reference the base url. I was wondering if this can be done in jquery or javascript?

The image src of all images in the DIV element are the same, <IMG border=0 src="/image.jpg"> except the actually images is stored under a different domain and directory altogether.

I like the src to remain /image.jpg, but make reference to all images as with the domain http://www.domain.com/image.jpg within the that DIV only.

Possible?

Answer 1

I guess this would work:

   $('#divid img').each(function() {
       var newsrc = 'http://www.domain.com' + $(this).attr('src');
       $(this).attr('src', newsrc)
    })

Answer 2

Not too difficult with jQuery, but the kind of thing you should consider doing server-side so that your links don't all break when JS is turned off.

$("#div img").each(function(i, e) {
  $(e).attr("src", "http://www.domain.com/" + $(e).attr("src"));
});

Answer 3

this allows external images to exist and not be affected (not a very deep check though)

$( 'img' ).not( '[src*="://"]' ).each( function( )
{
    $( this ).attr( 'src', 'http://whatevs.com' + $( this ).attr( 'src' ) ); }
} );

Answer 4

These are all great answers and work, except my problem looks deeper than I wish for, when a http:// is missing from the src this NicEdit script places the URL of the web site in return.

This with your answers displays 2 hrefs within the src. Looks like my only solutions at this point is add and remove domains through PHP or find another editor the behaves nicely.

Thanks Again.