Extract all links from a string

Question

I have a javascript variable containing the HTML source code of a page (not the source of the current page), I need to extract all links from this variable. Any clues as to what's the best way of doing this?

Is it possible to create a DOM for the HTML in the variable and then walk that?

I think your best approach will be using some kind of JS HTML document parser. Alternatively you could use regular expressions, but I don't think that's the best way of doing this. — Waleed Amjad, Sep 28 '09 at 15:11

score 12 · Accepted Answer · answered Sep 28 '09 at 15:52

12

I don't know if this is the recommended way, but it works: (JavaScript only)

var rawHTML = '<html><body><a href="foo">bar</a><a href="narf">zort</a></body></html>';

var doc = document.createElement("html");
doc.innerHTML = rawHTML;
var links = doc.getElementsByTagName("a")
var urls = [];

for (var i=0; i<links.length; i++) {
    urls.push(links[i].getAttribute("href"));
}
alert(urls)

answered Sep 28 '09 at 15:52

andre-r

2,685
19
23

If in node, this answer can be extended with JSDOM: `const { JSDOM } = jsdom;` `const dom = new JSDOM(rawHTML);` `const { document: doc } = dom.window;` then skip to `var links = doc.getElementsByTagName("a")` – Nth.gol Oct 17 '18 at 17:22

score 7 · Answer 2 · answered Sep 28 '09 at 15:15

7

If you're using jQuery, you can really easily I believe:

var doc = $(rawHTML);
var links = $('a', doc);

http://docs.jquery.com/Core/jQuery#htmlownerDocument

answered Sep 28 '09 at 15:15

brianreavis

11,562
3
43
50

score 2 · Answer 3 · answered Feb 18 '10 at 16:56

2

This is useful esepcially if you need to replace links...

var linkReg = /(<[Aa]\s(.*)<\/[Aa]>)/g;

var linksInText = text.match(linkReg);

answered Feb 18 '10 at 16:56

Wosis

29
1

When I tested this with this HTML string `var text = 'bar
dfgdfg
ghghhkhkhzort';` It returned the whole HTML text string and not just matches for A links – JasonDavis May 07 '16 at 01:50

score 1 · Answer 4 · answered Sep 28 '09 at 15:22

1

If you're running Firefox YES YOU CAN ! It's called DOMParser , check it out:

DOMParser is mainly useful for applications and extensions based on Mozilla platform. While it's available to web pages, it's not part of any standard and level of support in other browsers is unknown.

answered Sep 28 '09 at 15:22

xxxxxxx

5,037
6
28
26

3

"YES YOU CAN!" What is this? Bob the Builder? :P – brianreavis Sep 28 '09 at 15:46
1

:) Yes , it's bob the builder – xxxxxxx Sep 28 '09 at 16:02
Love this answer. It seems 2009 was still the golden age for websites `Optimized for [Broswer name] - [Browser version]` – Jérôme MEVEL Mar 30 '17 at 06:33

score 1 · Answer 5 · answered Feb 12 '23 at 23:40

If you are running outside a browser context and don't want to pull a HTML parser dependency, here's a naive approach:

var html = `
<html><body>
  <a href="https://example.com">Example</a>
  <p>text</p>
  <a download href='./doc.pdf'>Download</a>
</body></html>`

var anchors = /<a\s[^>]*?href=(["']?)([^\s]+?)\1[^>]*?>/ig;
var links = [];
html.replace(anchors, function (_anchor, _quote, url) {
  links.push(url);
});

console.log(links);

Extract all links from a string

5 Answers5

Linked