Using jQuery to find push all links in html to an array?

Question

given a block of html that is a var, not on the actual document:

var html_cmt = "Check out this awesome link: https://github.com/jquery/jquery-ui Check out this awesome link: https://github.com/jquery/jquery-ui Check out this awesome link: https://github.com/jquery/jquery-ui Check out this awesome link:"

I need to build an array of all links, I have the following but it's only building the first one, not all.

var hrefs = new Array();
hrefs.push( $("<div>").html(html_cmt).find('a').attr('href'));

Suggestions on how I can create an array of all the links, given html content that is not on the document just a JS var? thank you

AnApprentice. I just noticed that your html_cat variable doesn't contain any HTML tags. Is that correct? — Rob W
– Rob W, Commented Jan 12, 2012 at 21:49

Rob W · Accepted Answer · 2012-01-12 21:43:45Z

5

var hrefs = [];
$("<div>").html(html_cmt).find('a').each(function(){
    hrefs.push(this.href);
    //         ^^^^^^^^^ Resolves URLs automatically. See notes
});

Another approach:

var hrefs = $("<div>").html(html_cmt).find('a').map(function(){
    return this.href;
}).toArray();

Notes

this.href will return the fully resolved UR, $(this).attr('href') will return the real attribute.

Example (assume http://localhost/dir/test.php):

this.href            == http://localhost/foo.bar
$(this).attr('href') == /foo.bar

this.href            == http://localhost/dir/test.php#doo
$(this).attr('href') == #doo

this.href            == http://localhost/file.do
$(this).attr('href') == ../file.do

this.href            == http://localhost/dir/
$(this).attr('href') == .

edited Jan 12, 2012 at 21:43

answered Jan 12, 2012 at 21:38

Rob W

350k87 gold badges811 silver badges683 bronze badges

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

2 Comments

AnApprentice Over a year ago

Thanks, not sure by what you mean by "If you want the real attr, use $(this).attr('href')" ?

Rob W Over a year ago

@AnApprentice I have updated my answer to elaborate both methods. Unless you want to use possibly relative URLs, I recommend to use this.href.

pimvdb · Accepted Answer · 2012-01-12 21:39:54Z

2

You can use ..map and .get: http://jsfiddle.net/tyggq/.

var hrefs = $("<div>").html(html_cmt).find("a").map(function() {
  return this.href;
}).get();

// find <a> elements, replace them with their hrefs, and
// convert the jQuery object to an array

The string should contain actual <a> elements though; you say it works for the first <a> element so I guess your string is different from what you posted.

answered Jan 12, 2012 at 21:39

pimvdb

155k80 gold badges313 silver badges358 bronze badges

1 Comment

Matt Ball Over a year ago

Might want to assign the end result to a variable for clarity, but nicely done otherwise. +1

RoboKozo · Accepted Answer · 2012-01-12 21:55:07Z

1

I did it too... just a lot slower then everyone else :)

var html = "Check out this awesome link: https://URL-1 Check out this awesome link: https://URL-2 Check out this awesome link: https://URL-3 Check out this awesome link:";

var urls = [];


do
{
    var start = html.indexOf("http");
    var end = 0;

    if (start > 0)
    {
        for (var i = start; i < html.length; i++)
        {
            if (html[i] == " ")
            {
                end = i;
                break;
            }
        }
        urls.push(html.substring(start, end));
    }

    html = html.substring(end, html.length);
}
while(start >= 0);

console.log(urls);

on jsfiddle: http://jsfiddle.net/HfvyE/

answered Jan 12, 2012 at 21:55

RoboKozo

5,1125 gold badges53 silver badges80 bronze badges

Comments

Travis J · Accepted Answer · 2012-01-12 21:40:20Z

0

var links = $html_cmt.split("Check out this awesome link: ")

answered Jan 12, 2012 at 21:40

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Collectives™ on Stack Overflow

Using jQuery to find push all links in html to an array?

4 Answers 4

Another approach:

Notes

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Another approach:

Notes

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related