How to get the href value of an anchor tag with javascript from a string

Question

How do I get the href value of last anchor tag in the string content below, with pure javascript, without Jquery.

var contents = '<div id="content"><a href="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba.jpg"><img title="Ruffcoin-Made-In-Aba.jpg" class="alignnone size-full" alt="image" src="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba.jpg" /></a>↵↵↵↵Indigenous heavyweight, <a href="http://www.okhype.com/tag/ruffcoin">Ruffcoin</a> recently dropped a new album titled “Made In Aba“. I’ve been giving it a few spins, and I must say, the album is quite solid.↵↵[matrix]↵↵Two of my early faves are “Aba Made” and “Higher Higher which feature <a href="http://www.okhype.com/tag/sparkle">Sparkle</a>)”. You should check ’em out, then download on iTunes <a href="https://itunes.apple.com/us/album/made-in-aba/id1180901826?ign-mpt=uo%3D4"><strong>hereq</strong></a>.↵↵Cop below.↵↵[audio mp3="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_-_Aba_Made_Okhype.com_.mp3"][/audio]<strong><a href="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_-_Aba_Made_Okhype.com_.mp3">DOWNLOAD Ruffcoin - Aba Made</a></strong>↵↵[audio mp3="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_ft_Sparkle_-_Higher_Higher_Okhype.com_.mp3"][/audio]<strong><a href="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_ft_Sparkle_-_Higher_Higher_Okhype.com_.mp3">DOWNLOAD Ruffcoin ft Sparkle - Higher Higher</a></strong></div>';

this is the section I want to get

href="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_ft_Sparkle_-_Higher_Higher_Okhype.com_.mp3"

What did you try? How to you get that string? Is it part of the DOM? Lots of missing information here — Dekel, Dec 30 '16 at 18:31
`console.log(document.querySelector('div a:last-of-type'))` should give you all the attributes of the last a inside a div, you could narrow that down by adding a class or id to the parent div too, prone to errors tho but it's on the right track — Dale, Dec 30 '16 at 18:34
Parse the HTML into a DOM element, traverse/query the element to get the `` element and access its `href` attribute. — Felix Kling, Dec 30 '16 at 18:34
You can achieve that easier using regex, see my answer below :) — Tha'er AlAjlouni ثائر العجلوني, Dec 30 '16 at 18:40

mplungjan · Accepted Answer · 2017-03-01T06:41:06.093

If you create an element and insert the HTML string into it, you can manipulate the HTML using the usual DOM methods getElementsByTagName or querySelector/querySelectorAll:

var contents = '<div id="content"><a href="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba.jpg"><img title="Ruffcoin-Made-In-Aba.jpg" class="alignnone size-full" alt="image" src="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba.jpg" /></a>↵↵↵↵Indigenous heavyweight, <a href="http://www.okhype.com/tag/ruffcoin">Ruffcoin</a> recently dropped a new album titled “Made In Aba“. I’ve been giving it a few spins, and I must say, the album is quite solid.↵↵[matrix]↵↵Two of my early faves are “Aba Made” and “Higher Higher which feature <a href="http://www.okhype.com/tag/sparkle">Sparkle</a>)”. You should check ’em out, then download on iTunes <a href="https://itunes.apple.com/us/album/made-in-aba/id1180901826?ign-mpt=uo%3D4"><strong>hereq</strong></a>.↵↵Cop below.↵↵[audio mp3="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_-_Aba_Made_Okhype.com_.mp3"][/audio]<strong><a href="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_-_Aba_Made_Okhype.com_.mp3">DOWNLOAD Ruffcoin - Aba Made</a></strong>↵↵[audio mp3="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_ft_Sparkle_-_Higher_Higher_Okhype.com_.mp3"][/audio]<strong><a href="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_ft_Sparkle_-_Higher_Higher_Okhype.com_.mp3">DOWNLOAD Ruffcoin ft Sparkle - Higher Higher</a></strong></div>';

var snippet = document.createElement("div");
snippet.innerHTML=contents;
var links = snippet.getElementsByTagName("a"),
    lastURL = links[links.length-1].href; // or getAttribute("href")
console.log(lastURL);

yes @mplungjan i want to know, please can you help me? – Uti Mac Dec 30 '16 at 19:42 — Uti Mac, Dec 30 '16 at 19:42

score 4 · Answer 2 · edited Mar 01 '17 at 06:44

Try this:

var contents = '<div id="content"><a href="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba.jpg"><img title="Ruffcoin-Made-In-Aba.jpg" class="alignnone size-full" alt="image" src="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba.jpg" /></a>↵↵↵↵Indigenous heavyweight, <a href="http://www.okhype.com/tag/ruffcoin">Ruffcoin</a> recently dropped a new album titled “Made In Aba“. I’ve been giving it a few spins, and I must say, the album is quite solid.↵↵[matrix]↵↵Two of my early faves are “Aba Made” and “Higher Higher which feature <a href="http://www.okhype.com/tag/sparkle">Sparkle</a>)”. You should check ’em out, then download on iTunes <a href="https://itunes.apple.com/us/album/made-in-aba/id1180901826?ign-mpt=uo%3D4"><strong>hereq</strong></a>.↵↵Cop below.↵↵[audio mp3="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_-_Aba_Made_Okhype.com_.mp3"][/audio]<strong><a href="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_-_Aba_Made_Okhype.com_.mp3">DOWNLOAD Ruffcoin - Aba Made</a></strong>↵↵[audio mp3="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_ft_Sparkle_-_Higher_Higher_Okhype.com_.mp3"][/audio]<strong><a href="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_ft_Sparkle_-_Higher_Higher_Okhype.com_.mp3">DOWNLOAD Ruffcoin ft Sparkle - Higher Higher</a></strong></div>';

var hrefs = contents.match(/href="([^"]*)/g);
var href = hrefs[hrefs.length-1];
console.log(href);

This code results in `href="http://................` - another good reason not to use RegEx to parse HTML and a good reason to create snippets to test code — mplungjan, Mar 01 '17 at 06:44

Pranav C Balan · Answer 3 · 2016-12-30T18:48:02.620

3

Generate a temporary element(or use DOMParser) with the html content and get the attribute of a tag within it.

var contents = '<div id="content"><a href="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba.jpg"><img title="Ruffcoin-Made-In-Aba.jpg" class="alignnone size-full" alt="image" src="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba.jpg" /></a>↵↵↵↵Indigenous heavyweight, <a href="http://www.okhype.com/tag/ruffcoin">Ruffcoin</a> recently dropped a new album titled “Made In Aba“. I’ve been giving it a few spins, and I must say, the album is quite solid.↵↵[matrix]↵↵Two of my early faves are “Aba Made” and “Higher Higher which feature <a href="http://www.okhype.com/tag/sparkle">Sparkle</a>)”. You should check ’em out, then download on iTunes <a href="https://itunes.apple.com/us/album/made-in-aba/id1180901826?ign-mpt=uo%3D4"><strong>hereq</strong></a>.↵↵Cop below.↵↵[audio mp3="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_-_Aba_Made_Okhype.com_.mp3"][/audio]<strong><a href="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_-_Aba_Made_Okhype.com_.mp3">DOWNLOAD Ruffcoin - Aba Made</a></strong>↵↵[audio mp3="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_ft_Sparkle_-_Higher_Higher_Okhype.com_.mp3"][/audio]<strong><a href="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_ft_Sparkle_-_Higher_Higher_Okhype.com_.mp3">DOWNLOAD Ruffcoin ft Sparkle - Higher Higher</a></strong></div>';

var temp = document.createElement('div');
temp.innerHTML = contents;

// if you want to get a tag within strong tag
console.log(
  temp.querySelector('strong a').getAttribute('href')
);

// if you want to get the last link
var ele = temp.getElementsByTagName('a');
console.log(
  ele[ele.length - 1].getAttribute('href')
);

edited Dec 30 '16 at 18:48

answered Dec 30 '16 at 18:36

Pranav C Balan

113,687
23
165
188

It could be achieved easier using regex. – Tha'er AlAjlouni ثائر العجلوني Dec 30 '16 at 18:38
If it was pure HTML yes, but this is a string. So why to parse it then query it? at least regex get it in one step. – Tha'er AlAjlouni ثائر العجلوني Dec 30 '16 at 18:44
@PranavCBalan : The asker isn't trying to parse HTML, he is try to get a string from another, this is why regex is more proper in my opinion :) – Tha'er AlAjlouni ثائر العجلوني Dec 30 '16 at 18:48
@Tha'erAl-Ajlouni : I will give you a small example string and try it with regex...... ` href="fdfdf" ` – Pranav C Balan Dec 30 '16 at 18:50
I see your point, but if the string contains invalid html it won't be parse-able too, every solution has its ups and downs. But I answered regarding the exact case asked. Thanks for the enlightenment :) – Tha'er AlAjlouni ثائر العجلوني Dec 30 '16 at 18:52
@Tha'erAl-Ajlouni : please go through : http://stackoverflow.com/questions/590747/using-regular-expressions-to-parse-html-why-not – Pranav C Balan Dec 30 '16 at 18:53
Sir, that is a different case, that is asking about parsing HTML by regex, not finding a string in a string using regex. That is appreciated but I see it as a totally different case :) – Tha'er AlAjlouni ثائر العجلوني Dec 30 '16 at 18:54
@Tha'erAl-Ajlouni : I don't prefer regex to parse HTML.... it may work here but at some point, it may fail or will be more complex :) – Pranav C Balan Dec 30 '16 at 18:54
1

@PranavCBalan Thanks :) – Tha'er AlAjlouni ثائر العجلوني Dec 30 '16 at 18:57

score 2 · Answer 4 · edited Mar 01 '17 at 06:47

If you know the string comes from a trusted source you could just pop it into a div and use DOM functions, like so:

var contents = '<div id="content"><a href="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba.jpg"><img title="Ruffcoin-Made-In-Aba.jpg" class="alignnone size-full" alt="image" src="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba.jpg" /></a>↵↵↵↵Indigenous heavyweight, <a href="http://www.okhype.com/tag/ruffcoin">Ruffcoin</a> recently dropped a new album titled “Made In Aba“. I’ve been giving it a few spins, and I must say, the album is quite solid.↵↵[matrix]↵↵Two of my early faves are “Aba Made” and “Higher Higher which feature <a href="http://www.okhype.com/tag/sparkle">Sparkle</a>)”. You should check ’em out, then download on iTunes <a href="https://itunes.apple.com/us/album/made-in-aba/id1180901826?ign-mpt=uo%3D4"><strong>hereq</strong></a>.↵↵Cop below.↵↵[audio mp3="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_-_Aba_Made_Okhype.com_.mp3"][/audio]<strong><a href="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_-_Aba_Made_Okhype.com_.mp3">DOWNLOAD Ruffcoin - Aba Made</a></strong>↵↵[audio mp3="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_ft_Sparkle_-_Higher_Higher_Okhype.com_.mp3"][/audio]<strong><a href="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_ft_Sparkle_-_Higher_Higher_Okhype.com_.mp3">DOWNLOAD Ruffcoin ft Sparkle - Higher Higher</a></strong></div>';
var container = document.createElement('div');
container.innerHTML = contents;

var anchorTags = Array.prototype.slice.call(container.getElementsByTagName('a')); // Get all anchor tags && convert collection to array
console.log(anchorTags.pop().href); // Get last anchor tag and log its href property

score 2 · Answer 5 · answered Dec 30 '16 at 18:58

var contents = '<div id="content"><a href="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba.jpg"><img title="Ruffcoin-Made-In-Aba.jpg" class="alignnone size-full" alt="image" src="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba.jpg" /></a>↵↵↵↵Indigenous heavyweight, <a href="http://www.okhype.com/tag/ruffcoin">Ruffcoin</a> recently dropped a new album titled “Made In Aba“. I’ve been giving it a few spins, and I must say, the album is quite solid.↵↵[matrix]↵↵Two of my early faves are “Aba Made” and “Higher Higher which feature <a href="http://www.okhype.com/tag/sparkle">Sparkle</a>)”. You should check ’em out, then download on iTunes <a href="https://itunes.apple.com/us/album/made-in-aba/id1180901826?ign-mpt=uo%3D4"><strong>hereq</strong></a>.↵↵Cop below.↵↵[audio mp3="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_-_Aba_Made_Okhype.com_.mp3"][/audio]<strong><a href="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_-_Aba_Made_Okhype.com_.mp3">DOWNLOAD Ruffcoin - Aba Made</a></strong>↵↵[audio mp3="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_ft_Sparkle_-_Higher_Higher_Okhype.com_.mp3"][/audio]<strong><a href="http://www.okhype.com/wp-content/uploads/2016/12/Ruffcoin_ft_Sparkle_-_Higher_Higher_Okhype.com_.mp3">DOWNLOAD Ruffcoin ft Sparkle - Higher Higher</a></strong></div>';

// Create element that will temporarially house the elements in the string
var temp = document.createElement('div');

// Convert the string to child elements
temp.innerHTML = contents;

// Get all the links
var links = temp.querySelectorAll("a");

// Get the contents of the href attribute of the last link:
console.log(links[links.length-1].href);

score 2 · Answer 6 · answered Dec 30 '16 at 19:06

2

Try This :

  var links = snippet.getElementsByTagName("a");
  links(links.length - 1).getAttribute('href');

answered Dec 30 '16 at 19:06

Gaurav Varshney

502
5
15

How to get the href value of an anchor tag with javascript from a string

6 Answers6

Linked