CSSソースコードを整形するWEBツールを作りたいと思い、簡単な設計を書いてみました。実際に上から順番に処理をしていけば実装できます。javascriptで作りました。まだ、試験回数は圧倒的に少ないですが、割と整形できます。
スポンサーリンク実際に作ったHTMLソースコード整形WEBツール
以下、超簡易なアルゴリズム。
１．左右のスペースを削除（trim）
２．最初に出現する文字列から判断し分割する
※上が優先（「３－４」より「３－１」が優先される）。
下記「３－１」～「３－４」までに上から優先的に当てはまるものを探し、該当する文字列を抜き出して配列に格納する。文字列がなくなるまで「３－１」～「３－４」を繰り返す。
３－０．共通
文字列を抜き出すたびに左右のスペース・改行等を削除（trim）する。
３－１．「@・・・」（@mediaは除く）の場合（＠タイプ）
最初に見つかる「@・・・;」を抜き出す。
＠タイプの文字列として、抜き出した文字列とセットにして配列に格納する。
（格納例）
val: @charset “UTF-8”;
type:＠
３－２．「/*・・・」の場合（コメントタイプ）
最初に見つかる「/*・・・*/」を抜き出す。
コメントタイプの文字列として、抜き出した文字列とセットにして配列に格納する。
（格納例）
val: /* header */
type:開始
３－３．「}」の場合（閉じタイプ）
最初に見つかる「}」を抜き出す
閉じタイプ（「}」１文字列）として、抜き出した文字列とセットにして配列に格納する。
（格納例）
val: }
type:閉じ
３－４．それ以外の場合（開始タイプまたはスタイルタイプ）
最初に見つかる「・・・{」と「・・・;」を抜き出す。
抜き出した文字列数でタイプを振り分ける。
- 「・・・{」の方が少ない場合は、「３－４－１．「・・・{」の場合（開始タイプ）」のタイプ
- 「・・・;」の方が少ない場合は、「３－４－２．「・・・;」の場合（スタイルタイプ）」のタイプ
３－４－１．「・・・{」の場合（開始タイプ）
最初に見つかる「・・・{」を抜き出す。
開始タイプの文字列として、抜き出した文字列とセットにして配列に格納する。
（格納例）
val: .class {
type:コメント
３－４－２．「・・・;」の場合（スタイルタイプ）
最初に見つかる「・・・;」を抜き出す。
スタイルタイプとして、抜き出した文字列とセットにして配列に格納する。
（格納例）
val: color: ‘red’;
type:スタイル
４．３で集めた配列を繋ぎ直す
３で集めた配列を必要に応じて改行やインデントを足しながら繋ぎ直す。1つ前の要素の情報等から改行やインデントを決める。「４－０」に関しては共通処理で、追加で各タイプの処理を行う。
下記インデントを追加と書いていますが、空のインデントを追加する場合もあります。シンプルにするためインデント追加と記している。
４－０．共通
- インデントの初期値は０個
- 1つ前の要素が開始タイプの場合、1つ分インデントを増やす。
- 自身が閉じタイプの場合、1つ分インデントを減らす。
- 1つ目の要素の場合は改行もインデントも追加しない
４－１．＠タイプ
「@」の前に改行とインデントを追加。
４－２．開始タイプ
頭に改行とインデントを追加。
４－３．閉じタイプ
「}」の前に改行とインデントを追加。
４－４．コメントタイプ
「/*」の前に改行とインデントを追加。
４－５．スタイルタイプ
頭に改行とインデントを追加。
※スタイルの「:」の前はスペースなし、「:」の後ろはスペースありとする
以上
他の整形ツールはこちら
▼ ツール自身はこちらから
スポンサーリンク