【ほぼ全員興味なし！】ツール作りのための超簡易設計：HTMLソースコードを整形するアルゴリズム

HTMLソースコードを整形するWEBツールを作りたいと思い、簡単な設計を書いてみました。実際に上から順番に処理をしていけば実装できます。javascriptで作りました。まだ、試験回数は圧倒的に少ないですが、割と整形できます。

実際に作ったHTMLソースコード整形WEBツール

以下、超簡易なアルゴリズム。

１．左右のスペースを削除（trim）

２．「”」「’」で囲まれている中の「<」および「>」を置換

「<」は全角で「＜＜＜＜＜＜＜＜＜＜」
「>」は全角で「＞＞＞＞＞＞＞＞＞＞」
と置換する。

３．最初に出現する文字列から判断し分割する

※上が優先（「３－４」より「３－１」が優先される）。

下記「３－１」～「３－４」までに上から優先的に当てはまるものを探し、該当する文字列を抜き出して配列に格納する。文字列がなくなるまで「３－１」～「３－４」を繰り返す。

３－０．共通

文字列を抜き出すたびに左右のスペース・改行等を削除（trim）する。

３－１．「</」の場合（終了タグタイプ）

最初に見つかる「</・・・>」を抜き出す。
終了タグタイプの文字列として、タグと抜き出した文字列とタイプを情報として持たせ、配列に格納する。

（格納例）
tag：div
val: </div>
type:終了タグ

３－２．「<!–」の場合（コメントタイプ）

最初に見つかる「<!–・・・–>」を抜き出す。
コメントタイプの文字列として、抜き出した文字列とタイプを情報として持たせ、配列に格納する。

（格納例）
val: <!– コメント –>
type:コメント

３－C．「<」以外の場合（文字列タイプ）

最初に見つかる「・・・<」を抜き出す（「<」は抜き出さない）
文字列タイプ（ただの文字列）として、抜き出した文字列とタイプを情報として持たせ、配列に格納する。

（格納例）
val: テキストテキスト
type:文字列

３－D．それ以外の場合（開始タグタイプ）

最初に見つかる「<・・・>」を抜き出す。
開始タグタイプの文字列として、タグと抜き出した文字列とタイプを情報として持たせ、配列に格納する。

（格納例）
tag：div
val: <div class=”sample”>
type:開始タグ

４．３で集めた配列を繋ぎ直す

３で集めた配列を必要に応じて改行やインデントを足しながら繋ぎ直す。1つ前の要素の情報等から改行やインデントを決める。「４－０」に関しては共通処理で、追加で各タイプの処理を行う。

下記インデントを追加と書いていますが、空のインデントを追加する場合もあります。シンプルにするためインデント追加と記している。

４－０．共通

1. インデントの初期値は０個
2. 1つ前の要素が開始タグタイプかつブロックレベルのタグの場合、1つ分インデントを増やす。
3. 自身が終了タグタイプかつブロックレベルのタグの場合、1つ分インデントを減らす。
4. 1つ目の要素の場合は改行もインデントも追加しない

４－１．開始タグタイプ

1. 自身がブロックレベルのタグの場合、「<」の前に改行とインデントを追加。
2. それ以外の場合そのまま

４－２．終了タグタイプ

1. 自身がブロックレベルのタグかつ1つ前の要素が終了タグタイプかつブロックレベルのタグの場合、「</」の前に改行とインデントを追加。
2. それ以外の場合そのまま

４－３．コメントタイプ

1. 1つ前の要素が開始タグタイプかつブロックレベルのタグの場合、「<!–」の前に改行とインデントを追加。
2. 1つ前の要素が終了タグタイプかつブロックレベルのタグの場合、「<!–」の前に改行とインデントを追加。
3. 1つ前の要素がコメントタイプの場合、「<!–」の前に改行とインデントを追加。
4. それ以外の場合そのまま

４－４．文字列タイプ

そのまま

５．２で置換した文字列を元に戻す

以上

他の整形ツールはこちら

▼ ツール自身はこちらから

スポンサーリンク