DB. DB. - 1 year ago 45
jQuery Question

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

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

<img src="..." />

I need to get the src attribute of the first image. The image may or may not come after a
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>');


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


Answer Source


$("<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")


/<img/gi instead of "<img"