使用 javascript 提取所有链接

在开发 Web 应用时，我们经常需要从网页中提取所有链接。这篇文章将讲解如何使用 JavaScript 提取所有链接。

使用正则表达式

你可以使用正则表达式来提取所有链接。使用正则表达式时，你需要采取以下步骤：

1. 获取页面 HTML 代码。
2. 编写正则表达式来匹配链接。
3. 使用正则表达式的 match 方法来提取链接。

以下是一个例子：

const html = document.body.innerHTML;
const pattern = /<a\s+(?:[^>]*?\s+)?href="([^"]*)"/g;
const links = [];

let match;
while ((match = pattern.exec(html))) {
  links.push(match[1]);
}

console.log(links);

解释

1. 第一行获取页面 HTML 代码。
2. 第二行定义了一个正则表达式，它匹配包含 href 属性的 标签，并提取 href 属性值。
3. 第三行初始化一个空数组来存储链接。
4. 第四行开始一个 while 循环，使用正则表达式的 exec 方法来查找匹配项。
5. 如果找到了匹配项，将链接添加到数组 links 中。
6. 当所有匹配项都处理完毕时，数组 links 中将包含所有链接。

使用 DOM API

你还可以使用 DOM API 来提取所有链接。使用 DOM API 时，你需要采取以下步骤：

1. 获取页面中所有的 元素。
2. 遍历所有 元素，依次提取 href 属性值。

以下是一个例子：

const links = [];

const aElements = document.getElementsByTagName('a');
for (let i = 0; i < aElements.length; i++) {
  const href = aElements[i].getAttribute('href');
  if (href) {
    links.push(href);
  }
}

console.log(links);

解释

1. 第一行初始化一个空数组来存储链接。
2. 第二行使用 DOM API 的 getElementsByTagName 方法获取页面中所有的 元素。
3. 第三行开始一个 for 循环，依次遍历所有的 元素。
4. 第四行获取当前 元素的 href 属性值。
5. 第五行检查 href 是否为 null 或空字符串。
6. 第六行如果 href 不为空，则将其添加到数组 links 中。
7. 当所有 元素都处理完毕时，数组 links 中将包含所有链接。

结论

你可以使用正则表达式或 DOM API 来提取所有链接。正则表达式可能更快，但它可能会忽略某些链接，因为它无法处理复杂的 HTML。DOM API 可以更好地处理复杂的 HTML，但它通常更慢。根据你的需求和性能要求，选择适合你的方法。