HTMLフォーマッター＆ミニファイアー

このデュアルユーティリティは、見づらいHTMLをきれいにインデントしてフォーマットするか、すべての冗長な空白を取り除いて最小化するかのいずれかを可能にします。ロジックを誤って壊してしまう可能性のある標準的なツールとは異なり、このバージョンは複雑なドキュメントを処理しながら、コードサイズと節約率について即座にフィードバックを提供するように特別に設計されています。

このツールが際立つ理由

• コードブロック保護: このツールは<script>および<style>タグを識別し、その内部コンテンツを記述された通りに正確に保護します。これにより、JavaScriptやCSSの実行時エラーを防止します。
• デュアルモード機能: デバッグ用の整形済みフォーマットと、本番環境用の圧縮版を単一のインターフェースで切り替えることができます。
• 空要素タグへの対応: ロジックは<br>、<img>、<input>などの自己終了タグを正しく認識し、文書全体を通してインデントが完全に保たれるようにします。
• リアルタイム分析: 入力サイズ、出力サイズ、および圧縮後に節約された正確なスペースの割合を即座に表示します。
• ワンクリックワークフロー: 最適化されたコードを直接クリップボードに移動するための組み込みコピー機能を備えています。

主要な技術的特徴

• スマートインデント: フォーマッタは、クリーンな2スペースのインデント戦略を適用します。
• 論理的なネスト: 開始タグと終了タグを追跡することで、インデントレベルを自動的に調整します。
• 選択的なミニファイ: ミニファイアは、タグ間の空白を除去し、テキストノード内の複数のスペースを単一のスペースに圧縮します。
• コメントの保持: 重要なHTMLコメントは、両方のモードでそのまま保持されます。

ロジックの仕組み

エンジンは、正規表現ベースのスキャナーを使用して、HTMLを通常のタグ、テキストノード、および保護された「生の」ブロック（スクリプトとスタイル）の3つのカテゴリにトークン化します。
<script>
および
<style>
コンテンツを生データとして扱うことで、フォーマッタはコードに予期しない改行を注入することを避けます。縮小化の過程では、ツールはプレースホルダーシステムを使用してこれらの保護されたブロックを「シールド」し、マークアップの残りの部分に対して積極的な空白削減を実行します。