时间戳

首页 > 解决方案 > 从存储在数组中的 HTML 中提取链接

javascript - 从存储在数组中的 HTML 中提取链接

问题描述

我正在尝试从以下 html 中提取链接。数组中有很多像这样的 HTML。

推文[0] 是：

var tweets = Array.from(document.querySelectorAll("[class ^= AdaptiveMedia-ph]"));
console.log(tweets);
<div class="AdaptiveMedia-photoContainer js-adaptive-photo " data-image-url="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" data-element-context="platform_photo_card" style="background-color:rgba(51,64,18,1.0);" data-dominant-color="[51,64,18]">
  <img data-aria-label-part="" src="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" alt="A tree" style="width: 100%; top: -0px;">
</div>

如何从 HTML 文本中实际提取“src”中的链接和“alt”中的 alt 文本？提前致谢！

标签： javascripthtml

解决方案

像这样：

var tweets = document.querySelectorAll("[class ^= AdaptiveMedia-ph]");
for (var i=0;i<tweets.length;i++) {
  console.log("data-image-url",tweets[i].getAttribute("data-image-url"));
  var img = tweets[i].querySelector("img");
  console.log("image-url",img.src,"alt",img.alt);
  
}
<div class="AdaptiveMedia-photoContainer js-adaptive-photo " data-image-url="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" data-element-context="platform_photo_card" style="background-color:rgba(51,64,18,1.0);" data-dominant-color="[51,64,18]">
  <img data-aria-label-part="" src="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" alt="A tree" style="width: 100%; top: -0px;">
</div>

推荐阅读