HTMLクリーナー：属性・スクリプト・ノイズを除去
汚れたHTMLを貼り付け、属性のないクリーンな骨格と構造のJSON概要を取得できます。スクリプト、スタイル、コメント、SVG、フォーム、任意のセレクターを削除します。
ブラウザー標準のHTMLパーサーだけで動作し、何もアップロードしません。コンテンツ抽出、スクレイピング、CMS移行、LLM入力用HTMLの準備に便利です。
HTMLクリーナー：属性・スクリプト・ノイズを除去
汚れたHTMLを貼り付け、属性のないクリーンな骨格と構造のJSON概要を取得できます。スクリプト、スタイル、コメント、SVG、フォーム、任意のセレクターを削除します。
HTMLクリーナーについて
実際のWebサイトからコピーしたHTMLには、フレームワークのクラス名、インラインスタイル、data-*属性、トラッキングスクリプト、SVGアイコン、コメント、用途ごとのdivラッパーなど、大量の余分な情報が含まれています。スクレイピング、CMS移行、差分確認、言語モデルに渡す前のページ整理で本当に必要なのはコンテンツの構造であり、それ以外は要点を隠してトークンを浪費するノイズです。
このツールはブラウザー自身のパーサー（DOMParser）でHTMLを解析し、設定可能なクリーニングを行います。すべての属性を削除し（リンク構造を残すためhrefだけ保持可能）、script、style、コメント、SVG、フォームのノードを削除します。カスタムCSSセレクターに一致する要素も削除でき（1行に1つ。ナビゲーションやCookieバナーなどに便利）、残った空タグを整理し、必要なら子要素が1つだけで自身のテキストを持たないラッパーを外して、深いdivの入れ子を平坦化します。
出力はクリーニング済みHTMLと、残った構造のJSON概要（tag、text、children、href）の2つです。プログラム処理に便利で、サイズ表示では削減量も確認できます。一般的な現代のページでは、クリーンな骨格は入力より80-95%小さくなります。すべてブラウザーのタブ内で処理され、HTMLが端末の外へ送られることはありません。
HTMLクリーニング例
各オプションがスニペットに行う処理。
| 入力 | 出力 | 説明 |
|---|---|---|
| ⟨div class="a b c" data-x="1"⟩⟨p style="color:red"⟩Hi⟨/p⟩⟨/div⟩ | ⟨div⟩⟨p⟩Hi⟨/p⟩⟨/div⟩ | 属性をすべて削除し、構造とテキストを保持します。 |
| ⟨p⟩Text⟨script⟩evil()⟨/script⟩⟨/p⟩ | ⟨p⟩Text⟨/p⟩ | scriptタグを完全に削除します。 |
| ⟨a class="btn" href="/docs"⟩Docs⟨/a⟩ | ⟨a href="/docs"⟩Docs⟨/a⟩ | 「hrefを保持」をオンにするとリンクが使えます。 |
| ⟨div⟩⟨div⟩⟨p⟩Deep⟨/p⟩⟨/div⟩⟨/div⟩ | ⟨p⟩Deep⟨/p⟩ | 「単一子のラッパーを持ち上げる」で純粋な入れ子を平坦化します。 |
HTMLクリーナーの使い方
- HTMLを入力ボックスに貼り付けます。
- 必要なクリーニングオプションを選び、ナビゲーションや広告ブロックなどにはCSSセレクターを1行に1つ追加します。
- 「HTMLをクリーニング」をクリックします。
- クリーニング済みHTMLをコピーします。プログラムで処理する場合はJSON構造もコピーできます。
- サイズ表示で、どれだけノイズを削除できたか確認できます。
HTMLクリーナー FAQ
HTMLはサーバーにアップロードされますか？
いいえ。解析とクリーニングは標準のDOMParserを使い、ブラウザー内だけで行われます。読み込み後はオフラインでも動作します。
カスタムセレクターは何をしますか？
CSSセレクター（1行に1つ）に一致する要素をクリーニング前に削除します。例は「nav」、「#sidebar」、「div[class*=ads]」です。無効なセレクターはスキップされます。
JSON出力は何に使えますか？
クリーニング後の構造を、tag、text、children、任意のhrefを持つオブジェクトで表します。HTMLを再解析せず、スクレイパーやテスト、構造化コンテンツの処理に利用できます。
「単一子のラッパーを持ち上げる」とは？
要素に子要素が1つだけあり、自身のテキストがない場合、そのラッパーを削除して子要素で置き換えます。再帰的に適用し、現代サイトに多い深いdivの入れ子を整理します。
LLMに送る前にHTMLを整理する理由は？
クラス名、インラインスタイル、スクリプトは意味を増やさずトークンを消費します。クリーンな骨格は通常80-95%小さくなり、コストを抑えながら内容に使える余地を増やします。
画像と改行は残りますか？
「空のタグを削除」では、子要素がなくても意味を持つbrとimgは明示的に保持します。