Find Links in HTML Document using Javascript/jQuery

Question

Hi!

This is a challenge for any Javascript/jQuery ninjas out there:

What is the best way (using aforementioned languages), to find all of the links in an HTML document and return them all?

In other words, a function that like this - findLinks(document.html.innerHTML) that would return all links found in that HTML.

Thanks,

DLiKS

Answer 1

To get all hrefs from existing anchor elements, you can do the following, which will return them as an array:

var links = $("a").map(function() {
                return this.href;
            }).get();

If you just want to grab each anchor element and do something with them thereafter, you would just need to select them:

$("a").hide(); // or whatever

Answer 2

Well, you could fiddle around with a chunky library (and it might be a good idea to do that if you end up wanting to do interesting things to manipulate the results), but just to get the links I think I'd stick to DOM 0:

document.links

Answer 3

I have a bookmarklet that finds all the hyperlinks and writes them to an HTML page:

javascript:ctDL=document.links;ctWI=open('','','width=400,height=300,scrollbars,resizable,menubar');ctDO=ctWI.document;ctDO.writeln('');for(ctI=0;%20ctI')}void(ctDO.close())

Answer 4

It's either I don't understand the question, or it's not really that much of a challenge:

function findLinks(innerHTML){
    var fragment = document.createElement('div');
    fragment.innerHTML = innerHTML;

    var links = [];
    fragment.find('a').each(function(index, element){
        links.push($(element).attr('href'));
    });
    return links;
}