HTML整形ツールを修正

少々、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

HTML整形ツールを修正” への3件のフィードバック

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

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

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

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

CertaiN へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です