-
Notifications
You must be signed in to change notification settings - Fork 0
/
xml-visualizer.html
120 lines (120 loc) · 4.38 KB
/
xml-visualizer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
* {
font-family: monospace;
}
body {
margin:0px auto;
width: 600px;
margin-top:50px;
margin-bottom:50px;
}
.xmlvisual_block{
border: 1px dotted grey;
padding:20px;
position:relative;
}
.xmlvisual_block:first-child{
margin-top:20px;
}
.xmlvisual_block:not(:last-child){
margin-bottom:40px;
}
.xmlvisual_block__name{
position: absolute;
top:-18px;
left:-2px;
}
</style>
</head>
<body>
<h1>code</h1>
<textarea class="content" style="width:100%;height:200px;">
<div>
<h1>
Good!
</h1>
</div>
</textarea>
<h1>result</h1>
<div class="xmlvisual">
</div>
<script>
function xmlvisual(){
var content = $('.content').val();
var xmlvisual = $.parseHTML(content);
var $xmlvisual = $(xmlvisual);
var node = get_nodes_from_html(content);
console.log(node);
console.log(node_to_xmlvisual_html(node));
$(".xmlvisual").html(node_to_xmlvisual_html(node));
}
xmlvisual();
$('.content').bind('input propertychange', function() {
xmlvisual();
});
function node_to_xmlvisual_html(node){
var html = '';
$.each(node, function(i, el){
var value = '';
if(el.tag.charAt(0) == '#'){
html += el.value;
}else{
/* open tag */
html += '<div class="xmlvisual_block xmlvisual_tag__' + el.tag + '" data-tag="' + el.tag + '">';
html += '<div class="xmlvisual_block__name">' + el.tag + '</div>';
html += '<div class="xmlvisual_block__content" contenteditable>';
/* add attributes */
if(el.attrs.length !== 0){
html += " ";
$.each(el.attrs, function(y, a){
// html += a.name + '="' + a.value + '"' + " ";
});
}
/* get value */
if(el.node.length !== 0){
value = node_to_xmlvisual_html(el.node);
}else{
value = el.value;
}
html += value;
/* add content and close tag */
html += "</div>";
html += "</div>";
}
});
return html;
}
/* console.log($xmlvisual.filter('p').html()); */
function get_nodes_from_html(html){
var html_obj = $.parseHTML(html);
/* console.log(html_obj); */
var nodes = [];
$.each( html_obj, function( i, el ) {
/* get value for each tag/#special (e.g. text) */
var value = '';
var inner_nodes = [];
if(el.innerHTML){
value = el.innerHTML;
if(el.children && el.children.length != 0){
inner_nodes = get_nodes_from_html(el.innerHTML);
}
}else{
value = el.data;
}
/* get attributes */
var attrs = [];
if(el.attributes){
$.each(el.attributes, function(i, atr){
attrs.push({name:atr.name.toLowerCase(),value:atr.nodeValue});
});
}
nodes.push({tag: el.nodeName.toLowerCase(), value:value, attrs:attrs, node:inner_nodes});
});
return nodes;
}
</script>
</body>
</html>