查找所有网址并将其列为页面底部的可点击链接

Find and list all URL-s as clickable links to the bottom of the page

本文关键字：底部 链接 查找      更新时间：2023-09-26

我正在尝试编写一个javascript，它正在搜索页面上的所有链接，然后将它们添加到原始内容的底部。

"Document.links"似乎做了查找部分，它也列出了它们，但它们不可点击。所以我尝试添加一些html代码（startHref和endHref行），这当然破坏了整个事情。

我的（非工作）脚本：

var links = document.links;
for(var i = 0; i < links.length; i++) {
  var preLink = document.createTextNode("LINK: ");
  var linkHref = document.createTextNode(links[i].href);
  var lineBreak = document.createElement("br");
  var startHref = document.createElement("a href="");
  var endHref = document.createElement(""");
  document.body.appendChild(preLink);
  document.body.appendChild(startHref);
  document.body.appendChild(linkHref);
  document.body.appendChild(endHref);
  document.body.appendChild(lineBreak);
}

如果这可行，我还想在每行前面列出一个数字（从 1 开始 - 可以在 preLink 部分中设置） - 如果不是太难实现的话。

另外，有没有办法列出不是所有的链接，而是只列出与某些内容匹配的链接？只喜欢与特定域的链接。谢谢！

正如您已经发现的那样，您可以使用以下内容获取文档中的所有链接：

var links = document.links;

现在你有一个 HTMLCollection。您可以循环访问它并显示所有链接。为了获得更好的布局，您可以将它们放在段落中（p）。这将是循环：

for (var i = 0; i < links.length; i++) {
    var p = document.createElement("p");
    p.appendChild(links[i]);
    document.body.appendChild(p);
}

现在所有链接都附加在页面末尾，每个链接都在自己的行上，并且可以单击。请尝试一下。

编辑：根据您的评论，如果我理解正确，您只需添加一行：

for (var i = 0; i < links.length; i++) {
    var p = document.createElement("p");
    // the following line is added
    links[i].innerHTML = links[i].href;
    p.appendChild(links[i]);
    document.body.appendChild(p);
}

该行将简单地将链接的内部 HTML 替换为其属性 href 的值。

编辑：

变量links仅指向 document.links .因此，现有链接将从其原始位置删除并附加到末尾。如果您尝试在 for 循环中创建新链接（如document.createElement("a")，您将创建一个无限循环，因为您正在循环访问文档中的所有链接。您还记得，变量 links 不是创建时document.links的快照，而是指向它。

您可以通过创建数组来解决此问题：

var links = [];
// populate the array links
for (var j = 0; j < document.links.length; j++) {
    links.push(document.links[j].cloneNode());
}

现在这是页面上所有链接的快照。每个链路都被克隆并推送到阵列。现在运行 for 循环，原始链接不会被删除。

如果原始链接是这样的：

<a href="http://example.com" id="example" class="example-class" title="click me">This is an example.</a>

它将变成：

<a href="http://example.com" id="example" class="example-class" title="click me">http://example.com</a>

但是，如果您只想：

<a href="http://example.com">http://example.com</a>

然后你必须调整代码：

   
for (var i = 0; i < links.length; i++) {
    var p = document.createElement("p");
    var a = document.createElement("a");
    a.href = links[i].href;
    a.text = links[i].href; // you can use text instead of innerHTML
    p.appendChild(a);
    document.body.appendChild(p);
}

如果要设置输出样式，可以添加如下类：

p.classList.add("my-css-class");

我希望这能帮助你实现你的目标。

相关文章：