A simple way to express HTML in JSON

[lietxia]

json

空格用 \f 代替。纯文本用 "text":"hello text"，json的key不能重复，可以加一下数字编号
Spaces are replaced with \f . Plain text with "text":"hello text" . The key of JSON cannot be repeated, and the number can be added.

{
	"div id=mydiv":
	{
		"h1 id=abc class=class1\fclass2 name=abc": "hello world",
		"a herf=http://baidu.com?abc=def": "hello a",
		"text": "hello text",
		"br": "",
		"text 2": "hello text2",
		"div id=mydiv": {
			"button id=hij onclick=abc(this,'hello\fworld')": "hello button"
		}
	},
	"hr": "",
	"span": "hello"
}

Equated html

<div id="mydiv">
	<h1 id="abc" class="class1 class2" name="abc">hello world</h1>
	<a herf="http://baidu.com?abc=def">hello a</a>
	hello text
	<br>
	hello text2
	<div id="mydiv">
		<button id="hij" onclick="abc(this,'hello world')">hello button</button>
	</div>
</div>
<hr>
<span>hello</span>

JS function

function json2html(json, target = document.createElement('span')) {
	const keys = Object.keys(json);
	for (let i = 0; i < keys.length; i++) {
		const key = keys[i];
		const attr = key.trim().split(" ");
		if (attr[0] === 'text') {
			target.appendChild(document.createTextNode(json[key]));
		} else {
			let ele = document.createElement(attr[0]);
			for (let j = 1; j < attr.length; j++) {
				let e = attr[j].split('=');
				if (e.length > 1) {
					const k = e.shift();
					ele.setAttribute(k, e.join('=').replace("\f", " "));
				}
			}
			if (typeof (json[key]) === 'string') {
				if (json[key] !== '') { ele.innerHTML = json[key]; }
			} else {
				json2html(json[key], ele);
			}
			target.appendChild(ele);
		}
	}
	return target;
}
//test
var json_data = {
	"div id=mydiv":
	{
		"h1 id=abc class=class1\fclass2 name=abc": "hello world",
		"a herf=http://baidu.com?abc=def": "hello a",
		"text": "hello text",
		"br": "",
		"text 2": "hello text2",
		"div id=mydiv": {
			"button id=hij onclick=abc(this,'hello\fworld')": "hello button"
		}
	},
	"hr": "",
	"span": "hello"
}
//test
document.body.innerText = '';
json2html(json_data, document.body);

[lietxia]

Objects are out of order, and the order is lost when converted.

[
	"div id=mydiv",
	[
		"h1 id=abc class=class1\fclass2 name=abc", "hello world",
		"a herf=http,//baidu.com?abc=def", "hello a",
		"text", "hello text",
		"br", "",
		"text", "hello text2",
		"div id=mydiv", [
			"button id=hij onclick=abc(this,'hello\fworld')", "hello button"
		]
	],
	"hr", "",
	"span", "hello"
]