current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 5 down vote favorite
3

I have an HTML string that contains text and images, e.g.

<p>...</p>
<img src="..." />
<p>...</p>

I need to get the src attribute of the first image. The image may or may not come after a <p> and there could be more than one image, or no image at all.

Initially, I tried appending the string to the DOM and filtering. But, if I do this the browser requests all of the external resources. In my situation, this adds a lot of unnecessary overhead.

My initial approach:

var holder = $('<div></div>'); 

holder.html(content);

var src = holder.find('img:first').attr('src');

How can I get the src of the first image without appending the HTML? Do I need to use a regular expression, or is there a better way?

The solution needs to be javascript/jQuery based – I'm not using any server side languages.

My question is very similar to: http://forum.jquery.com/topic/parsing-html-without-retrieving-external-resources

Thanks

share|improve this question
    
your question is not clear enough to answer, may be an Example can help. Can u post an example ? what is content in your code ? – user372551 Sep 14 '10 at 19:18
    
content refers to the HTML string. The HTML string describes a news article – it could contain text, images or videos. The string comes from a JSON object, e.g. var content = myJSONObj.articleText; where the value could be something like: Some text...<img src="http://..." border="0" alt="My alt text"><br>More text... – DB. Sep 15 '10 at 2:21
up vote 11 down vote accepted

This 

$("<p><blargh src='whatever.jpg' /></p>").find("blargh:first").attr("src")

returns whatever.jpg so I think you could try

$(content.replace(/<img/gi, "<blargh")).find("blargh:first").attr("src")

Edit

/<img/gi instead of "<img"

share|improve this answer
1  
Why do you replace img with blargh? – hacksteak25 Sep 14 '10 at 18:27
1  
@DB mentioned that his original approach, loading jQuery objects according to his code, caused the browser to download all the resources. By getting rid of img tags I hoped to avoid that problem. – Dave Aaron Smith Sep 14 '10 at 18:49
    
This approach works, but I had to do $(content.replace(/<img/gi, "<blargh")).find("blargh:first").attr("src"); It feels a bit dirty... – DB. Sep 15 '10 at 2:36
    
@DB, I hear that. Uuuuugly. – Dave Aaron Smith Sep 15 '10 at 14:26
    
wow.. this is the best solution i found till now. Just a thing. In your solution, you have to scan twice the string, and if is a big string this isn't the best solution.. is there another way to find img tag inside a string without loading resource? something like $.parseHTML(myHTML).find('img:first') gives me error.. – JackTurky Jun 1 '13 at 20:46
up vote 5 down vote

This should work:

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        //Document Ready: Everything inside this function fires after the page is loaded
        $(document).ready(function () {
                    //Your html string
            var t = "<p><img src='test.jpg'/></p>"
            alert($(t).find('img:first').attr('src'));
        });
    </script>
</head>
<body>
</body>
</html>
share|improve this answer
    
You just have to take care about having a root element... maybe you must encapsulate your HTML, eg. $('<myRoot>' + htmlStuff + '</myRoot>').find... – hacksteak25 Sep 14 '10 at 18:25
    
I think this will still have the problem of downloading image files even though you aren't appending the html to the dom. If you create new image elements, browsers download the files right away regardless of whether you append the image elements to the dom. – Dave Aaron Smith Sep 14 '10 at 20:16
    
Dave Aaron Smith is right – external resources are still downloaded. – DB. Sep 15 '10 at 2:10
up vote 0 down vote

I normally use the below:

$(content).attr("src")
where 
content = "img src='/somesource/image.jpg'>" //removed < before img for html rendering in this comment
share|improve this answer
up vote 0 down vote

I solved this same issue trying to pull out the src url from an iframe. Here is a plain JavaScript function that will work for any string:

function getSourceUrl(iframe) {
  var startFromSrc = iframe.slice(iframe.search('src'));
  return startFromSrc.slice(5, startFromSrc.search(' ') - 1);
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.