Question

我需要从网页抓取所有href并将它们作为可点击链接附加，但我不知道如何抓住它们。我试图抓住遵循这种格式的hrefs

<table class="imageList">
    <tbody>
        <tr>
            <td> <a href="build/artifacts/image1.png">One</a> </td>
        </tr>
        <tr>
            <td> <a href="build/artifacts/image2.png">Two</a> </td>
        </tr>
        <tr>
            <td> <a href="build/artifacts/image3.png">Three</a> </td>
        </tr>
    </tbody>
</table>

等...

所有图片都有href前缀build / artifacts /，并且位于表格＃34; imageList＆＃34;内，但我如何抓取所有图片（hrefs）。我只对hrefs感兴趣，而不是对整个表格或其他可能存在的非元素感兴趣。

Answer 1

使用CSS Attribute Selectors：

anchors = document.querySelectorAll('table.imageList > tbody > tr > td > a[href^="build/artifacts/"]');

然后使用querySelectorAll：

hrefs = Array.prototype.map.call(anchors, function(item) { return item.getAttribute('href'); } );

最后，您可以iterate over the result set and extract the hrefs：

{{1}}

[Array.prototype.map的功劳归于Vohuman;我把他的想法包括在内，以提供一个完整的解决方案]

Answer 2

JavaScript附带了一个名为document.getElementsByTagName()的方法，您可以使用该方法获取<a></a>标记并将其存储在数组中。然后，您可以在for循环中提取其href属性。

试试这个：

var anchor = document.getElementsByTagName("a");
var hrefs = [];
for(var i =0; i < anchor.length; i++){
  hrefs.push(anchor[i].href;
}

像jQuery这样的库也存在，使这些操作更具语义和可读性，但这些库最终是由他们的普通JavaScript对应物构建的。

Answer 3

您可以使用document.querySelectorAll方法：

var anchors = document.querySelectorAll('table.imageList a[href^="build"]');
var hrefArr = Array.prototype.map.call(anchors, function(el) {
   // `el.href` returns the absolute path
   return el.getAttribute('href');
});

Answer 4

使用jQuery。

    $("a").each(function() {
      $(this).attr('href'); 
   });

获取与javascript中的特定路径匹配的所有href

4 个答案: