一行JavaScript代码获取页面中的所有超链接地址

因为我喜欢收集Web开发类的网址，平时对网址就很敏感。

我总结了一下我收集网址的几个阶段：

1.纯手工阶段，傻傻的阶段。

在这个阶段，主要是收集一些在页面中展现出来的网址，就是说，如果网址出现在HTML注释中

导致没有展现出来的话，我是不关注的。还有就是一些超链接的网址，但是超链接的网址收集很麻烦

不能直接复制，在IE中我总是右键选择超链接的属性，打开属性框，从那里面复制网址。

后来感觉这样太慢了，想到了一个稍微方便的方法，那就是点击超链接，打开新窗口，然后复制地址栏中的

网址，这样比以前方便多了。

2.使用浏览器提供的右键复制功能来复制网址

后来在使用火狐和Chrome的过程中发现这两种浏览器都提供了一个右键菜单---“复制链接地址”

这个发现真是令我高兴极了，好像发现宝贝一样。这样不用打开新窗口也能复制地址了。

3.使用程序分析内容的半自动化阶段

后来遇到了一种情况，一个网页里面有一个列表，是一个各个语言的开发工具的列表，和相应的下载地址。

我很高兴，因为能找到这么多好东西，但是我突然想到一个问题，我使用手工去一个一个的复制，是不是有点浪费时间的

感觉呢？这时我想到了使用程序去抓取页面内容，然后提取网址出来。

我首先想到了CURL和WGET，因为这两个是在命令行下面经常使用的下载东西的工具。

但是，我更喜欢GUI下面的工具，这时候，我想到了PHP的插件----

Snoopy也可以抓取页面内容，并且提供了相应的获取超链接的接口。其实，我还想到了Python和Ruby，

一开始我并没有想到使用JavaScript，因为有一个观念束缚了我，那就是JavaScript不能读写文件，它的运行环境主要限制在浏览器中。

所以，在Web开发中能读写文件的编程语言肯定多半是服务器端的语言。

突然有一天，突然在脑子中闪现了一个想法，CURL和WGET的原理不就是下载文件，然后进行内容分析吗？

那我把要抓取的网址在浏览器中打开不也相当于下载下来了吗？这样的话，我就可以使用JS在在Chrome或者FF的控制台来分析页面的内容了啊。

于是，接下来 我就研究怎样使用JS来实现我的需求，毕竟我是做前端开发的，相对于PHP和Python来说，JavaScript才是我最熟悉的。

于是就有了今天的这些感想。

今天的目的不是要展示代码的牛逼，而是想记录一下感悟。

 

今天的收获是：不要思维定势，不要拘泥于一种解决方案，有时候我们可以使用我们自己最熟悉的技术和方法来解决遇到的问题，我相信这个方法也

是最快和最稳妥的解决方案。

 

下面贴上我写的代码：

 

 

document.body.innerHTML.match(/http:\/\/[^\s<>]*\b/g);

 

 

 

 

 

写的可能不符合你的需求，肯定也会有错误抓取和漏掉的，因为我只是大概的写了一下，是供自己娱乐使用的，至少比自己手工一个一个的去复制快多了，我使用想说的是代码是次要的，思路才是最重要的。

有思路的人使用任何编程语言都能写出来。

下面是2020-06-20补充的内容

7年之后，回过头来又看了一遍自己写的文章 感慨颇多。

又想到了一点 所以补充一下。

上面的方法主要针对的是页面纯文本里的超链接地址

如果网页里有很多的超链接 ，这里说的不包括文本网址。

只是说的是a标签的网址，想收集起来怎么办。

这种情况有更简单的方法：

1.使用

documet.getElementsByTagName("a")

document.querySelectorAll("a")

可以直接获取到所有的超链接，但是注意 这里获取的有些可能没有网址  只是一个锚链接 

就是href=#的链接，需要自己再做一次过滤处理。

2.更简单的那就是使用document.links 了

获取到超链接集合之后 只需要做一个遍历就能输出所有的超链接地址了。

下面附上输出所有超链接地址的代码：

let links=document.links;
let arr=[];
for (let i = 0; i < links.length; i++) {
  arr.push(links[i].href);
}
console.log(arr.join('\n'));