IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

コードフォーマッター | コード公開のため組み込みも可 | 【JavaScript】| コード整形ツール Code formatter

Photo by Chris Ried on Unsplash

Photo by Chris Ried on Unsplash

 

コード整形ツール

HTMLコードを自動で改行、インデント設定をして見やすくするJavaScriptによるHTMLコードフォーマッター(Code formatter)です。(コメントアウトは対象外) 
※注意:一般的なHTMLコードに適しています(整形が不完全な部分もあるとおもいます...)

 

  1. inputに整形したいHTMLコードを入力(貼り付け)します。(初期表示のテキストはサンプルです。)
  2. outputに整形されたHTMLコードが表示されます。

 

input
output

 

コード

コードを整形するためのコード(関数)です。引数にHTMLコード(文字列)を指定して呼び出すことで、返り値に整形されたコード(文字列)が渡されます。

 

format(code) {
    code = code.replace("\n", "");
    var indent = "", before;
    function replacer(tag, space, p1, index, str) {
        if (space) {
            tag = tag.replace(space, "");
        }
        if (!tag.match("\/")) {
            if (index > 0) {
                tag = "\n" + indent + tag;
            }
            indent = indent + "    ";
        } else {
            indent = indent.slice(0, indent.length - 4);
            if (!tag.match(before) && !before.match("\/")) {
                indent = indent.slice(0, indent.length - 4);
            }
            if (!tag.match(before) || before.match("\/")) {
                tag = "\n" + indent + tag;
            }
        }
        before = p1.replace(">" && " ", "");
        return tag
    }
    code = code.replace(/([\s]*)<([\w]*?>|\/[\w]*?>|[\w]* |\/[\w]* )/g, replacer)
    return code
}

 

 

  関連記事  

www.it-the-best.com