jQuery get image link from string

Question

Hey all i am trying to get the png link from a string that houses some HTML in it.

The string looks like this:

var thecode = '[caption id="attachment_1794" align="alignleft" width="210"]
  <a href="http://www.website.com/wp-content/uploads/2012/10/Screen-Shot-2012-10-30-at-
  8.52.48-AM.png"><img class="size-medium wp-image-1794" title="Difference between and 
  affiliate programs" src="http://www.website.com/wp-content/uploads/2012/10/Screen-
  Shot-2012-10-30-at-8.52.48-AM-210x300.png" alt="Learn the and affiliate programs" 
  width="210" height="300" /></a> Learn the and affiliate programs[/caption]<p><span 
  style="font-size: small;">An article by CEO of AD, Inc. (AD®), has been published by 
  <a title="Learn the and affiliate programs" href="http://www.mmag.com/articles/85281" 
  target="_blank">M Magazine</a>. The article is titled: "Putting The Right Place." </span>';

I have been trying to get the image link via jQuery code:

var newString = $('a[href$=".png"]', thecode).attr('href');
console.log(newString);

But the example above returns back SCRIPT5022: Syntax error, unrecognized expression:

What would i be missing?

Here is a JS Fiddle with the error duplicated: jsfiddle.net/X3u4H — Pat Burke
– Pat Burke, Commented Feb 15, 2013 at 20:47

j08691 · Accepted Answer · 2013-02-15 20:48:00Z

6

Try this:

var thecode = '[caption id="attachment_1794" align="alignleft" width="210"] <a href="http://www.website.com/wp-content/uploads/2012/10/Screen-Shot-2012-10-30-at-8.52.48-AM.png"><img class="size-medium wp-image-1794" title="Difference between and affiliate programs" src="http://www.website.com/wp-content/uploads/2012/10/Screen-Shot-2012-10-30-at-8.52.48-AM-210x300.png" alt="Learn the and affiliate programs" width="210" height="300" /></a> Learn the and affiliate programs[/caption]<p><span style="font-size: small;">An article by CEO of AD, Inc. (AD®), has been published by <a title="Learn the and affiliate programs" href="http://www.mmag.com/articles/85281" target="_blank">M Magazine</a>. The article is titled: "Putting The Right Place." </span>';

var newString = $('<div>'+ thecode + '</div>');
console.log($('a[href$=".png"]',newString).attr('href'));

jsFiddle example

answered Feb 15, 2013 at 20:48

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

StealthRT Over a year ago

AH, so thats the reason... the [ and ]. Thanks j08691!

JSuar Over a year ago

Why does the string need to be wrapped in a div?

user400654 Over a year ago

@JSuar Due to how jquery parses html, it has to be wrapped in a div otherwise it won't get all of the elements. jquery doesn't handle text nodes at the top level very well.

Gaurav Pandey Over a year ago

Yeah bascially its creating a real temp div element and then only jquery can parse the html.

user400654 Over a year ago

For example, you could avoid the error by using $.parseHTML(thecode), but you won't be able to find your target element because it doesn't properly parse the html.

Collectives™ on Stack Overflow

jQuery get image link from string

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related