JavaScriptでページ上のリンクを抽出する方法

こんにちは、さるまりんです。

Webページを読み込み、そのページ上のリンクを抽出したい、というようなことは結構あると思います。
今回はそれをJavaScriptでやってみようと思います。

1. Webページの読み込み

fetchを使ってWebページのHTMLを取得します。

fetch('URL')
  .then(response => response.text())
  .then(html => {
    // HTMLコンテンツを解析してリンクを抽出する
  });

2. HTMLの解析

取得したHTMLをDOMParserで解析してDOMツリーを生成します。

const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');

3. リンクの抽出

DOMツリーから、<a>タグの要素をquerySelectorAllで取得し、各<a>タグの要素からhref属性を取得してリンク先のURLを取得します。

const links = doc.querySelectorAll('a');
links.forEach(link => {
  const href = link.getAttribute('href');
  console.log(href);
});

↑では取得したリンクをコンソールに出力しています。

つないでみます。
↓ではhttps://salumarine.comのページを読み込んで、そこから抽出されたリンクをコンソールに出力します。

fetch('https://salumarine.com')
  .then(response => response.text())
  .then(html => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    const links = doc.querySelectorAll('a');
    links.forEach(link => {
      const href = link.getAttribute('href');
      console.log(href);
    });
  });

注意点として、JavaScriptはセキュリティ上の理由から、異なるオリジン(ドメイン、プロトコル、ポート)のWebページに直接アクセスすることはできないので、クロスオリジンでリクエストをするときはサーバー側でCORS(Cross-Origin Resource Sharing)の設定が必要になります。

これはいろんな言語でやってみたくなりました。
今後試したものをこちらで紹介したいと思います。

読んでくださってありがとうございました。
それではまた！