HTML アセット・画像・Markdown 抽出ツール

生のHTMLを解析し、スクリプト、スタイルシート、画像、リンクを抽出します。HTMLのstyle属性やstyleタグ内のインラインの背景画像URLも含み、ページの表示テキストをクリーンなMarkdownとして抽出します — 簡易なクライアント側ペイウォールの背後にある記事を読むのに便利です。

インタラクティブシミュレーションを読み込んでいます...

Algorithmic Parsing of Document Object Models 🖖

Extracting embedded assets from HTML requires recursive traversal of the Document Object Model tree structure. By utilizing precise regular expressions and tag-specific targeting, the algorithm segregates image URIs and structural elements. It then algorithmically converts hierarchical nodes into equivalent Markdown syntax. This systematic reduction process efficiently transforms a complex, nested presentation language into a streamlined, logically ordered plain-text mathematical structure.

画像はimgタグ以外にも隠れている 🖖

ウェブ画像は必ず `<img>` タグにあると思われがちですが、ブラウザは CSS の `background-image` ルール、レスポンシブな `srcset` リスト、`<meta>` のプレビュータグ、さらには JavaScript 内の配列からも画像を描画します。このツールはそれらの場所を一度にすべて走査します。実用的な要点として、画面にはっきり見えている写真でも `<img>` タグが一つも無いことがあり、それはスタイルシートが描いているためで、'右クリックで画像を保存' が時々失敗する理由でもあります。

ソフトなペイウォールは送信済みの文章を隠している 🖖

'続きを読むには購読' という壁の多くは、ただの見せかけです。記事全文はたいていページの HTML にすでに含まれており、オーバーレイやぼかしで覆われているだけで、課金を求められる前に言葉はすでにネットワークを渡り切っています。この抽出ツールは解析済みマークアップから可視テキストを直接読み取り Markdown にするため、その内容がそのまま再び現れます。CSS で何かを隠すことは、それを渡さないことと同じではないのです。

例題

レスポンシブギャラリー - schema.orgのImageObject JSON-LDブロックと、レスポンシブな<img srcset>を持つランディングページ — 構造化データからの画像抽出と、同一画像の解像度違いの重複排除を示す。
CSS背景 - 画像がCSSのbackground-image宣言にしか存在しないページ — 一つは<style>ブロック内、もう一つはインラインstyle属性内にある — 通常の<img>スキャンでは見逃してしまう種類のアセット。
JS生成スライダー - マークアップに<img>タグが一切なく、実行時にJavaScriptだけで構築される画像スライダー — <script>ブロック内の単純なJS配列リテラルから、抽出ツールが画像URLを復元する様子を示す。