Web Developer's Struggle Memories

日々の業務から思ったこと、学んだことを書き連ねていきます。

タグチェッカーを自分仕様でjavascriptで作ってみた

JavaScript プログラミング

仕事でデザイン組込みやデザイン修正をしていると、たまにデザイン崩れで引っかかるのだが、 半分以上はタグの閉じミス・閉じ忘れが原因。

これをいちいちどれか見るのがたいぎぃのでタグが閉じているかをチェックする機能を作ってみた。 ※取り急ぎで作っているので、機能は荒いです。

使い方

jsファイルの読み込み。

<head>
    <script type="text/javascript" src="./checktag.js"></script>
</head>

　

次にhtmlファイルのbodyタグの閉じる直前に以下を記載。
※ここで、どのタグをチェックするかを指定します。今回はdivです。

<script type="text/javascript">
    // チェックするタグの指定
    var result = checkTag('div');
    alert(result);
</script>

メインの処理内容

実際の処理を行っているjavascriptのソースです。

function checkTag(tag){
    var mess; // return用変数
    var tagStrCnt = tag.length;
    var src = document.getElementsByTagName("body")[0].innerHTML;

    // このjsが読み込まれる直前までをチェック
    // TODO body内に<script>があった場合
    tmpTags = src.split("<script");
    src = tmpTags[0];

    // 開き数のカウント
    openTag = src.split("<" + tag).length - 1;
    // 閉じ数のカウント
    closeTag = src.split("</" + tag ).length - 1;

    // タグの閉じチェックを行い、エラー場合閉じていないタグの行数を取得
    if (openTag != closeTag) {
        var cntOpen = 0;
        var cntClose = 0;
        var checkLine = 0;
        var htmlLines = src.split('\n');

        // 閉じていないタグの行数を取得できるように行単位で処理
        for (var i = 1; i < htmlLines.length; i++){
            cntOpen += htmlLines[i].split("<" + tag).length - 1;
            cntClose = htmlLines[i].split("</" + tag).length - 1;
            cntOpen = cntOpen - cntClose;

            if (cntOpen <= 0) {
                mess = "閉じタグの数が多いです。（" + i + "行目）";
                return mess;
            } else {
                checkLine = i;
            }
        }

        // 最終チェック
        if (cntOpen == 0){
            mess = "指定のタグは問題なく閉じています。";
        } else {
            mess = "タグが閉じていません。（" + cntOpen + "つ目）";
        }
    } else {
        mess = "指定のタグは問題なく閉じています。";
    }

    return mess;
}

　

使った感想

まずそんな使い勝手は良くないが、ないよりはマシといった感じ。 また、勢いで作ったものだけあって、ソースは雑だと自分でも思う。（反省）
課題点は以下かな。

  • タグを指定するのではなく、全タグをチェックする
    （ただし、htmlでエラーとならないタグについて）
  • body内に別のscriptタグが存在した場合
  • ソースリファクタリング

はい。
次作るものはもっとまともなものを作ろうと思います！

※追記（2015/08/09）

正しく挙動していない場合があったのでプログラムを修正中です。

※追記（2016/07/18）

SmartyやTwigなどのテンプレートエンジンを利用した場合、if-elseにより分岐するとタグの開きと綴じの数が合わなくなること、 Jadeなどのテンプレートエンジンを利用した場合、閉じタグを書かなくても良いことなどの場合もあり、 このツールは使い勝手が悪くかつ、Node.jsで便利なチェックライブラリもあるため修正は止めました。