link リンク（href）抽出ツール star

仕組み

HTMLソース——ソースを表示した出力、保存した.htmlファイル、あるいはコピーしたスニペットなど——を貼り付けると、このツールはその文字列を手書きの正規表現ではなく、ブラウザ自身のHTMLパーサーに渡して処理します。この違いは見た目以上に重要です。現実のHTMLは、単純な正規表現では手に負えない形で乱雑になりがちです。属性は二重引用符でも一重引用符でも、あるいは引用符なしでも書けますし（href=about.htmlは技術的には正当なHTMLです）、タグは自己終了する場合としない場合があり、タグは何段階も入れ子になったり複数行にまたがったり、それ自体に山括弧を含むコメントや<script>ブロックの中に潜んでいたりします。ブラウザ級のパーサーは、こうしたあらゆる例外事項を長年かけて吸収してきました。与えられたページをどれほどマークアップが崩れていても描画しなければならないからです。タグ用の照合ロジックを一から作り直すのではなく、この同じエンジンの上に抽出ツールを構築することが、自分で書いたわけではないマークアップ——競合サイトをスクレイピングしたページや古いキャンペーンのエクスポートなど——に対しても信頼できる結果を生む理由です。

パーサーが貼り付けられたマークアップから構造的なツリーを構築すると、すべての<a>要素のhrefは、文字列から抜き出した生のテキストとしてではなく、その要素自体のプロパティとして直接読み取られます——これにより、パターンマッチングを誤らせかねない引用符の癖や、コメント内に紛れ込んだ山括弧をあらかじめ回避できます。得られたURLのリストは重複が除去され、クリップボードに一行ずつコピーするか、プレーンテキストファイルとしてダウンロードできる形で書き出されます。

具体例:あるページのHTMLに、<a href='/pricing'>、<a href="https://example.com/blog">、そして引用符を一切使わない裸の<a href=mailto:[email protected]>が含まれているとします——3行の中に3種類の異なる引用スタイルです。href="..."にマッチするよう書かれた正規表現は、一重引用符や引用符なしのケースを黙って見逃してしまいますが、パーサーはこの3つをまったく同じように読み取ります。ブラウザにとっては、引用符の有無や種類にかかわらず、これらは単なる属性値にすぎないからです。

知っておくべきこと

• /pricingや../blog/postのような相対URLは、ソースに書かれたとおりに抽出され、完全なhttps://...アドレスには変換されません。相対パスを絶対URLに変換するには、そのページのベースURL——通常はHTMLが最初に取得されたアドレス、または明示的な<base>タグ——を知る必要があり、貼り付けられたスニペット単体ではそのどちらも持っていません。
• このツールは自らURLを取得することは一切なく、あなたが提供したHTMLを読み取るだけです。これは意図的な境界線です。この方法でページの外部リンクを監査するには、このサイト側からのサーバーリクエストはまったく必要なく、ソースを表示または保存する際にすでに使っているブラウザ側の処理だけで完結します。
• mailto:やtel:のリンクも、他のあらゆるhrefと同じように抽出されます。パーサーはスキームによって区別を行わないため、href属性に入っているものはすべてリストに値するリンクとみなされます。