How to extract part of a url and populate in an img's src

Question

Hello guys,

I wanted to get some help on this. I need to take the link that is being pulled in from a feed and extract a portion of the url and then populate it in an img tags src.

html += '<'+ options.titletag +' class="rssRow '+row+'"><a href="'+ entry.link +'" title="View this feed at '+ feeds.title +'">'+ entry.title +'</a></'+ options.titletag +'>'
        if (options.date) html += '<div>'+ pubDate +'</div>'

So what I am looking to do here is grab the url generated from here + entry.link + and then from the generated link http://www.youtube.com/watch?v=acvh0CcSr8k&feature=youtube_gdata just grab the video ID acvh0CcSr8k

and push that into the img's source

<img src="http://img.youtube.com/vi/**""**/2.jpg" border="0" />

Answer 1

You can use a regular expression to extract the Id (I don't know why the API doesn't provide it though...)

/^http:\/\/(?:www\.)?youtube\.com\/watch\?v=(.*?)&/

Your id will be in $1.

Answer 2

Not sure how you're referencing the link, but once you have it, you could try something like this:

  // or whatever selector
var link = $('a')[0];

var str = link.search.split('=')[1].split('&')[0];

   // create the image
var $img = $('<img>',{src: "http://img.youtube.com/vi/" + str + "/2.jpg"} );

or instead of using .split(), you could .slice() the string, using .indexOf().

var str = link.search;
str = str.slice( str.indexOf('=') + 1, str.indexOf('&') );

or if you meant that the link is already a string, then you could start by splitting on the ?.

var str = entry.link.split('?')[1];

Then continue with the rest above.