ホーム > カテゴリ > HTML5・JavaScript >

JavscriptでHTMLの文法をチェックする

JavscriptでHTMLの文法をチェックするサンプルです。あくまでも簡易版ですので本格的にチェックする場合はサンプルを改良して下さい。

HTMLの文法(構文)をチェック

CMS(Content Management System)のシステム構築などで必要になるかも知れないJavscriptでのHTMLの文法チェックです。以下、ソースとなります。

  //　タグの文法チェック(簡易)
  function HTMLTagChecker(text){

    var list = text.split('');
    
    // *** <>のチェック
    var lessthan    = 0; // < 小なり
    var greaterthan = 0; // > 大なり

    // タグの小なり大なりの個数を取得
    for(i=0;i<list.length;i++){
      if (list[i] == '<') lessthan++ ;
      if (list[i] == '>') greaterthan++;
    }
   
    if (lessthan != greaterthan){
      alert('「<>」が一致しません。');
      return false;
    }

    // *** 開始タグ・終了タグのチェック
    var tag_cnt =  0  // タグの個数
    var pre_str = ""; // 前回の文字
    
    for(i=0;i<list.length;i++){
      
      // 開始タグ
      if (list[i]=='<') {
        tag_cnt++;
        pre_str = list[i];
        continue;
      }

      // 「</」ならばタグの使用回数を2回減らす(例 <p></p>)
      if (pre_str=='<' && list[i]=='/') { 
        tag_cnt = tag_cnt - 2;
        pre_str = list[i];
        continue;
      }

      // 「/>」ならばタグの使用回数を1回減らす(例 <hr />)
      if (pre_str=='/' && list[i]=='>') { 
        tag_cnt--;
        pre_str = list[i];
        continue;
      }
      
      // 「<!」ならばタグの使用回数を1回減らす(例 <!-- コメント -->)
      if (pre_str=='<' && list[i]=='!') { 
        tag_cnt--;
        pre_str = list[i];
        continue;
      }      
      
      pre_str = list[i];
    }
    
    if(tag_cnt != 0) {
      alert('開始タグと終了タグが一致しません。');
      return false;
    }
    
    alert('文法チェックではエラーは見つかりませんでした。');
  }

使い方はHTMLTagChecker()の引数に文字列を設定するだけです。

今回はxhtml1.0用のサンプルとなります。あくまでも簡易版ですのでJavaScriptで<>などが使用されていたらアウトです。






関連記事


前の記事：Google-Code-Prettifyのソースコピー問題の対応方法
次の記事：レスポンシブウェブデザイン対応のWEBサイトの作成方法

公開日：2014年12月18日
記事NO：00036