html - How to get the href value of an anchor tag with javascript from a string - Stack Overflow

admin管理员组

文章数量:1221252

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=".jpg"><img title="Ruffcoin-Made-In-Aba.jpg" class="alignnone size-full" alt="image" src=".jpg" /></a>↵↵↵↵Indigenous heavyweight, <a href="">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="">Sparkle</a>)”. You should check ’em out, then download on iTunes <a href=""><strong>hereq</strong></a>.↵↵Cop below.↵↵[audio mp3="_.mp3"][/audio]<strong><a href="_.mp3">DOWNLOAD Ruffcoin - Aba Made</a></strong>↵↵[audio mp3="_.mp3"][/audio]<strong><a href="_.mp3">DOWNLOAD Ruffcoin ft Sparkle - Higher Higher</a></strong></div>';

this is the section I want to get

href="_.mp3"

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"

• javascript
• html

Share Improve this question Follow edited Dec 30, 2016 at 18:33 mplungjan 178k2828 gold badges180180 silver badges240240 bronze badges asked Dec 30, 2016 at 18:28 Uti MacUti Mac 6111 silver badge55 bronze badges 7

• 1 What did you try? How to you get that string? Is it part of the DOM? Lots of missing information here – Dekel Commented Dec 30, 2016 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 Commented Dec 30, 2016 at 18:34
• 1 Parse the HTML into a DOM element, traverse/query the element to get the <a> element and access its href attribute. – Felix Kling Commented Dec 30, 2016 at 18:34
• You can achieve that easier using regex, see my answer below :) – Tha'er AlAjlouni ثائر العجلوني Commented Dec 30, 2016 at 18:40
• @Tha'erAl-Ajlouni - not a safe solution – mplungjan Commented Dec 30, 2016 at 18:45

 |  Show 2 more comments

6 Answers 6

Sorted by: Reset to default 6

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);

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);

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')
);

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);

Try This :

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

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

本文标签： htmlHow to get the href value of an anchor tag with javascript from a stringStack Overflow