views:

42

answers:

2

I have a table that I screen scraped using the jQuery load function, the function returns a table with text and graphics. The website I scraped from uses relative paths for their images so when I return the code to my page the images are not showing up. I have been looking for a jQuery function to find the tag and either update it to add the scrapped sites url into the src attribute, but not having much luck.

The current tag looks like this:

<img style="border:thin solid black; margin-top:5-x;" src="/images/picture.jpg">

What I need to do is insert the http://www.somesite.com into the src atttribute, so it looks like this:

<img style="border:thin solid black; margin-top:5-x;" src="http://www.somesite.com/images/picture.jpg"&gt;

Can anyone point me to the proper feature I need to do this?

Thanks!

+1  A: 
$("table img").each(function(){
  $(this).attr("src", "http://www.somesite.com" + $(this).attr("src"));
});

<script src="path_to_jquery.js"></script> 
<script>
    $(document).ready(function(){
        $("#table").load("target_website table:nth-child(3)", function(){
            // info: actually I'm not sure if this inside this function will be #table
            // you look for each image in #table...
            $(this).find("img").each(function(){
                // ...and do things with src attribute of each image
                $(this).attr("src", "http://www.somesite.com" + $(this).attr("src"));
            });
        });
    });
</script>
<div id="table"></div>
Balon
This is changing every img on my page except for the ones I need! ;)
Jason
If this is before you've loaded the content into the document, set a context node in the selector to make it apply to the new content not the existing document.
bobince
Hehe! If you would post some more code, I'd be able to help you. Post the code of load function.
Balon
Here is the script I am currently using: <script src="path_to_jquery.js"> </script> <script> $(document).ready(function() { $("#table").load("target_website table:nth-child(3)"); }); </script><div id="table"></div>
Jason
I've edited my answer.
Balon
This is getting so freakin close! what is happening is that it is inserting the proper url into the src attr, however it is not replacing what is there, it mereley appends it making the src look like this: http : / / www . somesite . com//my_website.com/images/picture.jpg</code> I suppose I need to actually find and then replace the path/string because all the image names are going to be differnt, but the path will always be the same. Thanks for the help so far though!
Jason
A: 

It's returned as a text string right (albeit with html tags). So you could just manipulate the text directly:

data = data.replace(/<img(.*?)src="/ig,'<img$1src="http://somesite.com')

EDIT: Sorry, just realized load puts the content directly in there. Unless there's a compelling reason to do so, don't use load. Instead, use $.get and then insert the text.

So instead of:

$("el").load(url);

Use:

$.get(url, function (data) {
    data = data.replace(/<img(.*?)src="/ig,'<img$1src="http://somesite.com');
    $("el").html(data);
  }
);
Jordan Reiter
The reason is manipulating all of the src elements using jQuery is probably much slower than just manipulating the html source directly.
Jordan Reiter
No, not really. Updating a few DOM properties is easy and fast. Processing HTML with regex is foolhardy. Your regex is far too greedy and can easily match multiple `<img>` tags in one go.
bobince
Thanks forgot to make it ungreedy. But I do think that jQuery DOM operations can take a while for large tables and I think so long as you double-check your regex processing it with a regex is fine.
Jordan Reiter