貼り付けた断片から画像 URL・リンク URL・一致した内部 HTML を抽出する

HTML の断片(ページ全体でも可)を貼り付け、3 つのモードのいずれかを実行します。画像の src を一覧する、リンクの href を一覧する、CSS セレクターに一致した要素の内部 HTML を一覧する、の 3 つです。セレクターは jQuery 互換の CSS セレクターで、XPath 式は評価しません。値は書かれたままの形で返すため、/images/hero.jpg のような相対パスもそのまま出力されます。

断片はこのブラウザー内で不活性(inert)な文書として解析されます。画像はダウンロードされず、インラインのイベントハンドラーも実行されず、リモートホストを指すマークアップでもページ外への通信は発生しません。

  1. 上の欄に HTML を貼り付けるか、「画像 URL を抽出」を押してページ付属のサンプルから始めます。
  2. 「画像 URL を抽出」または「リンク URL を抽出」を押すか、CSS セレクターを入力して「CSS セレクターに一致」を押します。
  3. 結果リストを確認します。1 行に 1 つの値が文書順に並び、欄の下のメモに除外・重複した内容が出ます。
  4. 「結果をコピー」でリストをクリップボードにコピーするか、テキストを手動で選択します。
  5. 次の断片を処理する前に「クリア」で入力と結果を空にします。

このツールが示すもの、示さないもの

断片の解析方法

入力はブラウザーがページに使うのと同じ HTML パーサーを通ります。閉じていないタグは補正され、属性値はデコードされ(<img src="a&amp;b.png"> は a&b.png として出力)、<!DOCTYPE html> を含む完全な文書も受け付けます。<textarea> の中身、コメント、SVG の <image> 要素は画像として扱いません。

最上位の要素も対象です。<img src="c.png"> や <a href="/a"> のように 1 要素だけの断片も他の一致と同じように読み取ります。使える属性がなかった件数、およびセレクターモードで内部 HTML がなかった件数(<img> や <br> など)はメモに表示します。

セレクターと出力

セレクター欄は jQuery 互換の CSS セレクターを受け付けます。このページ自身のエンジン(Sizzle)が解釈する言語で、.class、#id、[data-id]、div > p、li:nth-child(2)、さらに :eq(1) や :contains(text) などの拡張も使えます。解釈できないセレクターは、空の結果ではなくエラーとして報告します。

セレクターモードは一致した各要素の内部 HTML を 1 行ずつ出力するため、子要素のマークアップもコピー後に残ります。重複した値は出現ごとに並び、メモに重複件数を表示します。

プライバシー・制限・正確さ

処理はすべてローカルです。このバージョンでの実測: <img src="https://example.com/x.png"> を含む断片でもネットワーク要求は発生せず、貼り付けたマークアップの onerror 属性も実行されません。アップロードは行わず、ページを読み込んだ後はオフラインでも動作します。

処理するのは貼り付けたテキストだけです。ファイルのアップロード、URL の取得、バッチ処理はありません。断片自身に基準 URL がないため、相対 URL は相対のまま出力します。一覧は文書順で、確認用の補助でありクローラーではありません。

最近使ったツール: