ホーム > カテゴリ > 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


プチモンテ ※この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は抒情詩、抒情的な楽曲が多い。楽曲制作は🔰2023年12月中旬 ～

オリジナル曲を始めました✨

背徳の遊牧民 feat. オペラさん (2025/9/1 新曲)