javascriptで都合よくhtmlフラグメントを生成する関数
JavascriptでちょっとしたHTMLをjavascriptオブジェクトから作る関数を作った。類似品を検索したけど見つけられなかった。もし似たようなのがあったら教えてください。
例えばこんなjsオブジェクトから、
var src=["div",{class:1,text:"",},[ ["div",[ "AAAA", "BBBB", ["span",["CCCC"]], ]], "DDDD", ["span","EEEE"], ]];
こうやって
var tags=j2t(src,2);
console.log(tags);
こんな文字列を作る
<div class="1" text=""> <div> AAAA BBBB <span> CCCC </span> </div> DDDD <span>EEEE</span> </div>
ソース
/** * javascriptオブジェクトをHTMLフラグメントに変換します。 * OBJ:=[tagname,({attr}),([OBJ,]|text)] * 2,3番目のフラグメントは省略可能。 * 2番目はタグの属性、3番目は子要素を示す。 * 3番目の要素が配列の場合は */ function j2t(v,indent=0) { function isHashArray(a){return (Object.prototype.toString.call(a) === '[object Object]');}; function isArray(a){return Array.isArray(a);}; function repeat(s,n){var r="";for(var i=0;i<n;i++){r+=s};return r}; var rsp=repeat(" ",indent); function _o2t(v,depth){ var pindent=(indent>0 && depth>0?"\n"+repeat(rsp,depth):""); var sindent=(indent>0?"\n"+repeat(rsp,depth):""); if(!isArray(v)){ return pindent+v; } var attr=(v.length>1 && isHashArray(v[1]))?v[1]:null; var tags=(v.length==2 && isArray(v[1]))?v[1]:((v.length==3 && isArray(v[2]))?v[2]:null); var text=(v.length==2 && !isArray(v[1]))?v[1]:((v.length==3 && !isArray(v[2]))?v[2]:null); var s=pindent+"<"+v[0]; if(attr){ for(var i in attr){ s+=" "+i+"=\""+attr[i]+"\""; } } if(tags){ s+=">"; for(var i of tags){ s=s+_o2t(i,depth+1); } s+=sindent+"</"+v[0]+">"; }else if(text){ s+=">"+text+"</"+v[0]+">"; }else{ s+="/>"; } return s; } return _o2t(v,0); }