Using getElementsByTagName to find all hrefs in a variable

Question

In a variable I'm holding HTML source code, which I obtained from DB. I'd like to search this content through for all the "a href" attributes and list them in a table.

Now I've found here how to search it in a DOM (like below), but how to use it to search within a variable?

var links = document.getElementsByTagName("a").getElementsByAttribute("href");

Got this currently, which is searching by RegEx, but it doesn't work very well:

matches_temp = result_content.match(/\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’&quote]))/ig);

In result_content I'm holding that HTML Source.

Answer 1

getElementsByTagName returns a nodelist that does not have a method called getElementsByAttribute but ONLY if you have DOM access

Without DOM (for example node.js)

const hrefRe = /href="(.*?)"/g;
const urlRe = /\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’&quote]))/ig;

 
const stringFromDB = `<a href="http://000">000</a>
Something something <a href="http://001">001</a> something`

stringFromDB.match(hrefRe).forEach(
 (href) => console.log(href.match(urlRe)[0] ) 
);

// oldschool: 
// stringFromDB.match(hrefRe).forEach(function(href) {  console.log(href.match(urlRe)[0] )      });

In this code I create a DOM snippet first Also I ONLY get anchors that have an href to begin with

NOTE the getAttribute so the browser does not try to interpret the URL

With the regex if you wanted to only match SPECIFIC types of href:

const re = /\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’&quote]))/ig;

const stringFromDB = `<a href="http://000">000</a>
<a href="http://001">001</a>`

let doc = document.createElement("div");
doc.innerHTML = stringFromDB

doc.querySelectorAll("a[href]").forEach(
  (x) => console.log(x.getAttribute("href").match(re)[0])
);

Without the regex

const stringFromDB = `<a href="http://000">000</a>
<a href="http://001">001</a>`

let doc = document.createElement("div");
doc.innerHTML = stringFromDB

doc.querySelectorAll("a[href]").forEach(
 (x) => console.log(x.getAttribute("href")) 
);

Answer 2

Firstly, you shouldn't be using RegEx to parse HTML. This answer explains why.

Secondly, you're using getElementsByAttribute incorrectly - it does exactly what it says and gets elements by attributes. You should just use querySelectorAll on all elements with a href, and then map out the hrefs:

var hrefs = document.querySelectorAll("a[href*=http]");
var test = Array.prototype.slice.call(hrefs).map(e => e.href);
console.log(test);

<a href="http://example.com">Example</a>
<a href="http://example1.com">Example 1</a>
<a href="http://example2.com">Example 2</a>
<a href="http://example3.com">Example 3</a>