Using javascript/jQuery to get attribute values from an HTML string

Question

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

Answer 1

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"