HTML整形ツールを修正

20 12月, 2012 (13:45) | html | By: ohishi

少々、HTML整形ツールのロジックを下記の様に見直しました。

◆入力
<a>
<b>
<c>
</b>
</a>

◆変更前の出力 (<b>と<c>が同レベル)
<a>
 <b>
 <c>
 </b>
</a>

◆変更後の出力 (<c>のインデントを下げた)
<a>
 <b>
  <c>
 </b>
</a>

ロジックの見直しを行い思い出したのですが、当ツールは下記の様な特徴がありますので、参考にしてみてください。

◆入力
<a>
<b>
<c>
</b>
</a>
<a>  <-- 上記例に<a>タグを追加

◆出力 : なぜか<b>タグのインデントが...(これ、<a>タグのインデント下げが行われていない状態)
<a>
<b>
 <c>
</b>
</a>
<a>

インデント下げを行う前提は <タグ名></タグ名> の様に開始、終了タグがきちっとペアになっている必要があります。

上記は<a>タグを追加しましたが、2つ目の</a>の終了タグが無いため、「全ての<a>タグ」不完全なタグとして、インデント下げの対象から外れてしまいました。
これは、タグ名単位で開始、終了タグの数をカウントし、その数が異なれば、インデントの対象から外す処理をしています。

整形してもインデントが設定されない場合は、開始、終了タグがペアになっていないので、HTMLのデバッグの際は注意してみてください。

但し、タグの出現順番はチェックしていないので、下記のような「おバカ」な整形をしてしまいますので、ご留意ください。

◆入力
<a>
<b>
<c>
</a> <- /aと/bを入れ替える
</b> <-

◆出力
<a>
 <b>
  <c>
 </a>
</b>

 

2013/01/15 追記

CertaiNさんのリメイクされたソースを参考に、コメント、script、pre、styleタグや、PHPの部分を整形しないように修正しました。

2013/01/22 追記

調子に乗って全面的にソースを書き直してみました。主な変更点は2点です。

・HTMLのデバッグに役立ちそうな情報を、ページの下部に表示するようにしました。
・字下げの文字を指定できるようにしました。

但し、整形前後の文字数が制御コードの関係で1~2バイトずれますが、合間をみて修正したいと思います。

html seikei

Comments

Comment from CertaiN
Time 2013年1月12日 at 23:04

はじめまして。
HTML整形ツールを利用させていただいたことがあるのですが、ソースを拝見させていただいて改良の余地があると感じたので、自分なりに別のロジックも用いてリメイクしてみました。

https://github.com/Certainist/FormatHTML/blob/master/FormatHTML.php

いかがでしょうか?実行速度はmicrotimeで計測したところ100~200倍出ております。
ただ注意事項にある通り、最下層の要素の値に対しても改行を挟んでインデントをつけてしまうのが仕様になっています・・・こちらも改良したいところです・・・

Comment from ohishi
Time 2013年1月13日 at 14:22

CertaiNさん、コメントありがとうございます。
きれいなソースですね。
http://u670.com/pikamap/html_seikei_2.php に組み込んでみました。
コメント・scriptタグ・styleタグ・preタグが整形させないようになっていているのがいいですね。
PHPも対象にできそうなので、自分でも改良したいと思います。

Comment from CertaiN
Time 2013年1月22日 at 23:16

https://github.com/Certainist/FormatHTML/blob/master/FormatHTML.php

Version1.1で最下層要素に対しては改行を挟まないように改良しました!
これで事実上完璧なライブラリの完成ですかね?www

Write a comment