Extract href from html with jQuery

Question

I'm trying to get the value of href from an anchor. The code looks like this

var html = "<a href='http://path/to/file.pdf'>File</a&gt;";
alert(jQuery("a",html).attr("href"));

The only output I get is 'undefined'. I'm want to get "http://path/to/file.pdf".

Any help is greatly appreciated.

Answer 1

Try:

jQuery(html).attr('href');

Or if the <a> tag is deeper in the html than your example:

jQuery(html).find('a').attr('href');

The jQuery() function will convert HTML strings into DOM objects, and return a jQuery object containing them for you.

Answer 2

To explain why your method doesn't work - when you do jQuery("a",html), you are searching for a elements inside the context of the element stored in html.

The only thing currently inside is the File text. If your string was wrapped in a div for example, it would work. <div><a href='...'>File</a></div>

---

I assume you have some other reason for creating a jQuery object. If not, and you don't want the extra overhead, you could use a regular expression.

Example: http://jsfiddle.net/e3Gyc/

var html = "<a href='http://path/to/file.pdf'>File</a>";

var result = html.match(/href='([^']+)'/)[1];

Otherwise the answers that gnarf and Dzida gave are excellent.