HTML整形・圧縮
HTML Beautifier & Minifier
HTMLを整形または圧縮し、インライン要素は保ったまま空白をどこまで詰めるかを選べます。
渡されたHTMLを読めるようにインデントし直し、バイト数が問題になるときは圧縮します。トークナイザがWHATWGのraw textとRCDATAの状態を実装しているので、スクリプトの文字列の中の`</div>`がタグとして読まれ、その後ろが丸ごと壊れることがありません。
HTML 入力
.html ファイルを置く
このタブの中だけで読みます。どこにもアップロードしません。
整形された HTML
要素
20
テキストノード
13
コメント
1
最大の深さ
5
どこまで手を入れるか
- · 手書きのトークナイザは
<script>・<style>を生のテキストとして、<textarea>・<title>を RCDATA として読みます。だから文字列の中の</div>がタグと取り違えられることはありません。 - ·
<pre>・<textarea>の中は一文字も変えず、<script>・<style>は行ごとに字下げを直すだけです。中のコードを書き直すことはありません。 - ·
<br>・<img>のような空要素(void)と、<li>・<p>・<td>のように閉じタグを省略できる要素は、仕様どおりに扱います。足りない閉じタグを補うことはしません。 - · 圧縮はコメント・空白・不要な引用符だけを消します。省略できる閉じタグを外したり、属性の順序を変えたりはしません。
- · タグの食い違いや属性の重複は行と列を添えて知らせますが、ブラウザと同じように、読めるところまでは読んで結果を出します。
中の CSS は CSS整形・圧縮で、スクリプトは JavaScript整形・圧縮で別々に整えられます。
使い方
ページか、その断片を貼り付けます
doctypeの付いた文書全体でも、テンプレートから写した一部でも構いません。どちらも動きます。断片の場合は、中をインデントすべき`html`要素が無いというだけです。
体裁を決めます
インデント幅、属性をダブルクォートに揃えるかどうか、長い属性の並びを折り返す行幅、そして`html`・`head`・`body`の中をインデントするかどうかです。手で書かれたページは、その中をインデントしないことが多くあります。
問題の一覧を読みます
食い違ったタグと重複した属性を、行と列とともに並べます。文書はそれでも整形します。ブラウザも描画するはずのものだからです。ただし、1件ずつが直す価値のあるものです。
あるいは転送用に圧縮します
コメント、空白、要らない属性のクォートが外れます。条件付きコメントと`<!--!`のコメントは残り、前後の数値がどれだけ得をしたかを示します。
よくある質問
`<pre>`のブロックは無事ですか
無事です。`<pre>`と`<textarea>`の中は、どちらのモードでも1文字も変えません。そこにある空白は内容だからです。`<script>`と`<style>`は行ごとにインデントを合わせるだけで、中身を書き換えることはありません。
書き落とした閉じタグを補ってくれますか
補いません。理解はしています。`<li>`、`<p>`、`<td>`は暗黙に閉じますし、`<br>`や`<img>`のような空要素にはもともと閉じタグがありません。だから木は正しく組み立てられます。ただし、書かなかったタグを書き足すのは整形ではなく編集です。
Jinja、ERB、Handlebarsのようなテンプレートファイルも整形できますか
テンプレートの構文が、たまたまテキストのように見えるかぎりにおいてです。`{% if %}`のブロックを構造として理解しないので、片方の分岐で開いてもう片方で閉じるタグがあると、その中のインデントは間違います。描画された結果のほうを整形してください。
圧縮すると見た目が変わりますか
HTMLではインライン要素のあいだの空白に意味があり、それを詰めることが、ここでピクセルを動かしうる唯一の設定です。`<span>a</span> <span>b</span>`と、2つのspanがくっついているのは同じではありません。レイアウトがそこに頼っているなら、空白の圧縮を切ってください。
ここから渡せます
HTMLをMarkdownに変換
HTML to Markdown
貼り付けたHTMLや保存したページを、見出し・入れ子のリスト・GFMの表・コードブロックを保ったMarkdownに直し、スクリプトとスタイルは捨てます。
CSS整形・圧縮
CSS Beautifier & Minifier
並べ替えを一切せずにCSSを整形または圧縮し、トークンの並びをそのまま保ちます。
JavaScript整形・圧縮
JavaScript Beautifier & Minifier
名前は一切変えずにJavaScriptやTypeScriptからコメントと空白だけを落とし、1行に潰れたバンドルは読めるところまでインデントし直します。
XPathテスター
XPath Tester
XMLやHTMLにXPathかCSSセレクタを当てて、一致したノードをすべて並べます。
次の一手
このツールが出したものをそのまま受け取れる道具です。
CSS整形・圧縮
CSS Beautifier & Minifier
並べ替えを一切せずにCSSを整形または圧縮し、トークンの並びをそのまま保ちます。
HTMLエンティティ変換
HTML Entity Encoder
HTMLの実体参照をエスケープして元に戻し、名前・10進・16進の書き方を出し分けます。
HTMLをMarkdownに変換
HTML to Markdown
貼り付けたHTMLや保存したページを、見出し・入れ子のリスト・GFMの表・コードブロックを保ったMarkdownに直し、スクリプトとスタイルは捨てます。
JavaScript整形・圧縮
JavaScript Beautifier & Minifier
名前は一切変えずにJavaScriptやTypeScriptからコメントと空白だけを落とし、1行に潰れたバンドルは読めるところまでインデントし直します。
Base64エンコード・デコード
Base64 Encoder & Decoder
テキストでもファイルでもBase64とBase64URLを符号化・復号し、UTF-8も正しく扱います。
curlをコードに変換
curl to Code
curlのコマンドをfetch・axios・Pythonのrequests・Go・PHP・PowerShellのコードに変換します。