时间戳

首页 > 解决方案 > 获取 HTML 内容下的 href 列表

javascript - 获取 HTML 内容下的 href 列表

问题描述

我有一个json string包含 HTML 元素的内容。我想要实现的是获取<a>该字符串中的所有锚标记值。

Json String

"content" : "<p>Reference information</p> <ul> <li><a href="https://myurl.com">My Url</a></li> <li><a href="https://yoururl.com">Your Url</a></li> </ul>"

这是HTML格式

<p>Reference information</p>
<ul>
<li><a href="https://myurl.com">My Url</a></li>
<li><a href="https://yoururl.com">Your Url</a></li>
</ul>

我已经尝试过这样但无法获得确切的值：

 <div id="TestDiv" hidden >
   </div>

 let anchor = document.getElementById("TestDiv").getElementsByTagName("li");
 anchor[0].innerHTML

我得到这个值

<a href="https://myurl.com">My Url</a>

但我想得到https://myurl.com

我尝试的另一种方法已关闭，但仍有问题但不想使用正则表达式：

content.match(/href="([^"]*?)"/);

我怎样才能做到这一点？

标签： javascriptreactjs

解决方案

// Create an element
const el = document.createElement("div");

// set the inner HTML
el.innerHTML = `
<p>Reference information</p>
<ul>
  <li><a href="https://myurl.com">My Url</a></li>
  <li><a href="https://yoururl.com">Your Url</a></li>
</ul>
`;

// grab all <a> tag
const nodeList = el.querySelectorAll("a");

// convert to array
const nodeArray = [...nodeList];

// map to href
const hrefs = nodeArray.map((a) => a.href); // ["https://myurl.com/", "https://yoururl.com/"]

推荐阅读