|
@@ -119,56 +119,104 @@ document.write(htmlOptional)
|
|
|
class Markup {
|
|
|
constructor(tagName, [...nestedTags]=[], {...attrs}={}, text='') {
|
|
|
this.tagName = tagName,
|
|
|
- this.nestedTags = nestedTags
|
|
|
this.attrs = attrs
|
|
|
this.text = text
|
|
|
+ this.nestedTags = nestedTags
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-let md3 = new Markup('table', [new Markup('tr', [new Markup('td', undefined, undefined, 'some text'),new Markup('td', undefined, undefined, 'some text2')])],{border: 1})
|
|
|
-console.dir(md3)
|
|
|
-
|
|
|
-let HTMLstr = `<h2>Blue belt</h2><${md3.tagName}`
|
|
|
-if(md3.attrs.length !== 0) {
|
|
|
- for(let i in md3.attrs) {
|
|
|
- HTMLstr += ` ${i}="${md3.attrs[i]}" `
|
|
|
- }
|
|
|
-}
|
|
|
-HTMLstr += '>'
|
|
|
-//nested
|
|
|
-for(let i = 0; i < md3.nestedTags.length; i++) {
|
|
|
- //open
|
|
|
- HTMLstr += `<${md3.nestedTags[i].tagName}`
|
|
|
- //attrs
|
|
|
- if(md3.nestedTags[i].attrs.length !== 0) {
|
|
|
- for(let attr in md3.nestedTags[i].attrs) {
|
|
|
- HTMLstr += ` ${attr}="${md3.nestedTags[i].attrs[attr]}" `
|
|
|
- }
|
|
|
- }
|
|
|
- HTMLstr += '>'
|
|
|
- //nested
|
|
|
- for(let nested = 0; nested < md3.nestedTags[i].nestedTags.length; nested++) {
|
|
|
- HTMLstr += `<${md3.nestedTags[i].nestedTags[nested].tagName}`
|
|
|
- //attrs
|
|
|
- if(md3.nestedTags[i].nestedTags[nested].attrs.length !== 0) {
|
|
|
- for(let attr in md3.nestedTags[i].nestedTags[nested].attrs) {
|
|
|
- HTMLstr += ` ${attr}="${md3.nestedTags[i].nestedTags[nested].attrs[attr]}" `
|
|
|
+let md3 = new Markup(
|
|
|
+ 'table',
|
|
|
+ [
|
|
|
+ new Markup(
|
|
|
+ 'tr',
|
|
|
+ [
|
|
|
+ new Markup(
|
|
|
+ 'td',
|
|
|
+ undefined,
|
|
|
+ {disabled:true},
|
|
|
+ 'some text'
|
|
|
+ ),
|
|
|
+ new Markup(
|
|
|
+ 'td',
|
|
|
+ undefined,
|
|
|
+ undefined,
|
|
|
+ 'some text2'
|
|
|
+ )
|
|
|
+ ]
|
|
|
+ ),
|
|
|
+ new Markup(
|
|
|
+ 'tr',
|
|
|
+ [
|
|
|
+ new Markup(
|
|
|
+ 'td',
|
|
|
+ [
|
|
|
+ new Markup(
|
|
|
+ 'div',
|
|
|
+ [
|
|
|
+ new Markup(
|
|
|
+ 'p',
|
|
|
+ undefined,
|
|
|
+ {disabled:true},
|
|
|
+ 'some textp'
|
|
|
+ ),
|
|
|
+ new Markup(
|
|
|
+ 'p',
|
|
|
+ undefined,
|
|
|
+ {style:'font-weight:800;color:red'},
|
|
|
+ 'some textp'
|
|
|
+ )
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ ],
|
|
|
+ {style:'background-color:purple;color:white;'},
|
|
|
+ 'some text div'
|
|
|
+ ),
|
|
|
+ new Markup(
|
|
|
+ 'td',
|
|
|
+ undefined,
|
|
|
+ {class:'someclass'},
|
|
|
+ 'some text4'
|
|
|
+ )
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ ],
|
|
|
+ {border: 1, style:"color:'red';"}
|
|
|
+ )
|
|
|
+
|
|
|
+function stringifyMdObject(Md_obj) {
|
|
|
+ let str = ''
|
|
|
+ for(let key in Md_obj) {
|
|
|
+ if(key === 'tagName') {
|
|
|
+ str += `<${Md_obj[key]}`
|
|
|
+ if(Md_obj.attrs.length !== 0) {
|
|
|
+ continue;
|
|
|
+ } else {
|
|
|
+ str += `>`
|
|
|
}
|
|
|
}
|
|
|
- HTMLstr += '>'
|
|
|
|
|
|
- HTMLstr += `${md3.nestedTags[i].nestedTags[nested].text}`
|
|
|
+ if(key === 'nestedTags') {
|
|
|
+ for(let i = 0; i < Md_obj[key].length; i++) {
|
|
|
+ str += stringifyMdObject(Md_obj[key][i])
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- HTMLstr += `</${md3.nestedTags[i].nestedTags[nested].tagName}>`
|
|
|
+ if(key === 'attrs' && Md_obj[key].length !== 0) {
|
|
|
+ for(let i in Md_obj.attrs) {
|
|
|
+ str += ` ${i}="${Md_obj.attrs[i]}"`
|
|
|
+ }
|
|
|
+ str += `>`
|
|
|
+ }
|
|
|
}
|
|
|
- //close
|
|
|
- HTMLstr += `</${md3.nestedTags[i].tagName}>`
|
|
|
+ str += `${Md_obj.text}`
|
|
|
+ str += `</${Md_obj.tagName}>`
|
|
|
+
|
|
|
+ return str
|
|
|
}
|
|
|
|
|
|
-HTMLstr += `</${md3.tagName}>`
|
|
|
-console.log('html str:',HTMLstr)
|
|
|
-document.write(HTMLstr)
|
|
|
+document.write(stringifyMdObject(new Markup('h2',[new Markup('span',undefined,{style:'color:blue;'},'Blue ')],undefined,'belt')))
|
|
|
+document.write(stringifyMdObject(md3))
|
|
|
|
|
|
//destruct array
|
|
|
let arr = [1,2,3,4,5, "a", "b", "c"]
|