如何使用字符串中的javascript获取锚标记的href值

时间:2016-12-30 18:28:26

标签: javascript html

如何使用纯javascript,在没有Jquery的情况下,在下面的字符串内容中获取最后一个锚标记的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>';

这是我想要的部分

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

6 个答案:

答案 0 :(得分:5)

如果您create an element并将HTML字符串插入其中,则可以使用常用的DOM方法getElementsByTagName或querySelector / querySelectorAll来操作HTML:

&#13;
&#13;
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);
&#13;
&#13;
&#13;

答案 1 :(得分:3)

使用html内容生成temporary element(或使用DOMParser)并获取其中的标记属性。

&#13;
&#13;
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')
);
&#13;
&#13;
&#13;

答案 2 :(得分:2)

试试这个:

&#13;
&#13;
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);
&#13;
&#13;
&#13;

答案 3 :(得分:2)

如果您知道字符串来自可靠来源,您可以将其弹出到div并使用DOM函数,如下所示:

&#13;
&#13;
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
&#13;
&#13;
&#13;

答案 4 :(得分:2)

&#13;
&#13;
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);
&#13;
&#13;
&#13;

答案 5 :(得分:2)

试试这个:

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