ホーム > カテゴリ > 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月中旬 ～

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

YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte

【男性ボーカル】DA・KA・RA | 新たな明日が風と共に訪れる

【男性、女性ボーカル】時空を超越する先に | 時空と風の交響曲

【女性、男性ボーカル】絆 | 穏やかな心に奏でる旋律