タグチェッカーを自分仕様で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で便利なチェックライブラリもあるため修正は止めました。