HTML を整形または圧縮する手順

入力欄は 1 つ、ボタンは 2 つです。「HTML を整形」はタグを 1 行ずつに書き直し、入れ子の要素をインデントします。幅はボタンの隣の一覧から選べます(タブ、2、4(既定)、8 スペース)。「HTML を圧縮」は同じマークアップから空白を詰めた結果を返します。

どちらのボタンも入力欄のテキストだけを処理します。押した瞬間に発生したリクエストは 0 件でした。716 KB の文書で整形は約 2.4 秒、圧縮は約 2.1 秒。もともと余分な空白のないマークアップは同じサイズで戻ります。圧縮が取り除くのは空白だけだからです。

  1. マークアップを入力欄に貼り付け、既定の 4 スペースでよくなければインデント幅を選びます。
  2. 「HTML を整形」を押すと、タグが 1 行ずつになり、子要素は 1 段深くインデントされ、本文中の連続する空白・タブ・改行は 1 つの空白にまとまります。
  3. 「HTML を圧縮」は配布用の結果を返します。連続する空白は 1 つになりインデントは消えますが、タグ・属性・コメント・実体参照・doctype はそのまま残ります。
  4. 「コピー」は表示中の結果を取り出し、「クリア」は入力欄と結果欄の両方を空にします。

2 つのボタンが空白に対して行うこと

読むための整形、配布のための圧縮

整形は読むための処理です。タグごとに改行し、入れ子の深さに合わせてインデントし、本文中の空白をそろえます。インデントは元になかった空白を挿入するため、整形後のページは元と違って表示されることがあります。<div><span>a</span><span>b</span></div> は「ab」と表示されますが、整形後は「a b」になります。

圧縮は配布のための処理です。連続する空白はブラウザが読むのと同じく 1 つの空白になり、インライン要素の間の改行は削除されず空白として残ります。6 言語すべてで確認したところ、インラインの並び・リスト・表・入れ子ブロックのいずれでも、圧縮結果は入力と同じ表示になりました。

圧縮が触らないもの

pre と textarea の中身は 1 バイトも変えずにそのまま渡されます。空白がレイアウトではなく文書の内容だからです。別の言語で書かれた script と style の中身も同様です。改行を詰めると // コメントの続きがコードになったり、テンプレートリテラルの内容が変わったりします。

引用符で囲まれた属性値は空白の連続も含めてそのまま保持されます。value、title、data-* 属性のいずれでも同じです。コメント本文、&nbsp; や &#169; などの実体参照、自己終了タグ、doctype も変更されません。消えるのは要素と要素の間の空白だけです。

繰り返し実行と 80 文字での折り返し

どちらのボタンも 2 回目以降は結果が変わりません。整形済みの文書はそのまま整形され、圧縮済みの文書はそのまま圧縮されます。結果欄は色分けされたプレビューなので、テキストを取り出すには手動選択ではなく「コピー」ボタンを使うのが確実です。

整形結果では、属性を含む行が 80 文字を超えるタグは次の行に折り返されます。折り返しは属性と属性の間で起こり、引用符の中では起きません。本文は折り返されず、圧縮結果には保護された領域以外に改行がまったく含まれません。

実行される場所と処理の重さ

整形も圧縮もページ内で実行されます。ボタンを押してもブラウザの外に出たリクエストは 0 件で、貼り付けたマークアップが送信されることはなく、読み込み後はオフラインでも動作します。

処理時間は入力の大きさに比例します。176 KB は整形に約 0.6 秒、圧縮に約 0.5 秒。716 KB のページでは 2.4 秒と 2.1 秒でした。圧縮は空白を詰める処理であって HTML の完全なパーサーではないため、属性の引用符を書き換えたり省略可能な終了タグを削除したりはしません。同じエンジンが JavaScript の整形も担っているので、マークアップ内の script ブロックは JavaScript として整形されます。

最近使ったツール: