title: Using javascript/jQuery to get attribute values from an HTML string
body: <p>I have an HTML string that contains text and images, e.g.</p>
  
  <pre><code>&lt;p&gt;...&lt;/p&gt;
  &lt;img src="..." /&gt;
  &lt;p&gt;...&lt;/p&gt;
  </code></pre>
  
  <p>I need to get the src attribute of the first image. The image may or may not come after a <code>&lt;p&gt;</code> and there could be more than one image, or no image at all.</p>
  
  <p>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.</p>
  
  <p>My initial approach:</p>
  
  <pre><code>var holder = $('&lt;div&gt;&lt;/div&gt;'); 
  
  holder.html(content);
  
  var src = holder.find('img:first').attr('src'); 
  </code></pre>
  
  <p>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?</p>
  
  <p>The solution needs to be javascript/jQuery based – I'm not using any server side languages.</p>
  
  <p>My question is very similar to: <a href="http://forum.jquery.com/topic/parsing-html-without-retrieving-external-resources" rel="noreferrer">http://forum.jquery.com/topic/parsing-html-without-retrieving-external-resources</a></p>
  
  <p>Thanks</p>