javascript - Using jQuery to find push all links in html to an array? - Stack Overflow

admin管理员组

文章数量:1022982

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

var html_cmt = "Check out this awesome link:  Check out this awesome link:  Check out this awesome link:  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

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

var html_cmt = "Check out this awesome link: https://github./jquery/jquery-ui Check out this awesome link: https://github./jquery/jquery-ui Check out this awesome link: https://github./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

• javascript
• jquery

Share Improve this question Follow asked Jan 12, 2012 at 21:36 AnApprenticeAnApprentice 111k202202 gold badges637637 silver badges1k1k bronze badges 1

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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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') == .

You can use ..map and .get: http://jsfiddle/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.

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/HfvyE/

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

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

var html_cmt = "Check out this awesome link:  Check out this awesome link:  Check out this awesome link:  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

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

var html_cmt = "Check out this awesome link: https://github./jquery/jquery-ui Check out this awesome link: https://github./jquery/jquery-ui Check out this awesome link: https://github./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

• javascript
• jquery

Share Improve this question Follow asked Jan 12, 2012 at 21:36 AnApprenticeAnApprentice 111k202202 gold badges637637 silver badges1k1k bronze badges 1

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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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') == .

You can use ..map and .get: http://jsfiddle/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.

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/HfvyE/

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

本文标签： javascriptUsing jQuery to find push all links in html to an arrayStack Overflow