ボックスレイアウト向けシンプルHTMLジェネレーターJS

主旨

• JavaScriptで「シンプルなテキスト」から「ボックスレイアウト主体のHTML」を組み立てます。
• class指定のDIVタグだけ配置できれば十分！
  後でCSSやjQuery（appendやタグスワップなり）でゴニョゴニョするのが主眼の思想です。
• スクリプトの作りこみでちょっとしたカスタマイズができるようにしたい場合に便利です。

既にいろいろ乱立してそうですが…シンプルさが特徴です。（ゴルフを意識しているわけではないです）

使用方法

本体を設置し、関数の引数に以下のタグを表す文字をセットしてください。

• 「<」「>」で囲まれている文字　→ DIVタグの開始・終了を作成します。
• 「要素名」(っぽい文字）→ classにセットされます。（※アルファベット・数字・特定の記号（「-」「_」））

基本例：実行JavaScript

ddom("<main<sub>>");

結果：テキスト(HTML)

<div class="main"><div class="sub"></div></div>

（※注意 バリデーション一切無しです）

使用例

実行JavaScript＋jQuery

$(ddom("<main<form<area1<text_name><text_code>><area2<btn inline>>>"));

出力HTML

<div class="main">
  <div class="form">
    <div class="area1">
      <div class="text_name"></div>
      <div class="text_code"></div>
    </div>
    <div class="area2">
      <div class="btn inline"></div>
    </div>
  </div>
</div>

本体

JavaScript

var ddom=function(val){return val.replace(/<([^<>]*)/g,'{div class="$1"}').replace(/>/g,'</div>').replace(/\{/g,'<').replace(/\}/g,'>')};

※「ddom」は必要に応じて名前やスコープを変えてください。