teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップHTML5に関する質問JSでJSONをHTMLに変換したい

編集履歴

回答編集履歴

4

chousei

2021/11/22 05:00

投稿

yambejp
yambejp

スコア116724

test CHANGED
@@ -52,13 +52,17 @@
52
52
 
53
53
  ));
54
54
 
55
+ // 一旦JSONに保持
56
+
55
57
  const json=JSON.stringify(getElements(nodes));
56
58
 
57
59
  console.log(json);
58
60
 
59
- // 一旦JSONに保持
61
+ /*
60
62
 
63
+ [{"type":"DIV","content":[{"type":"#text","content":"\n　　"},{"type":"SPAN","content":[{"type":"#text","content":"\n　　　　0\n　　　　"},{"type":"SPAN","content":[{"type":"#text","content":"12345"}],"attributes":{"data-color":"#f00","style":"color: rgb(255, 0, 0);"}},{"type":"#text","content":"\n　　"}],"attributes":{"data-test":"xxx"}},{"type":"#text","content":"\n　　"},{"type":"SPAN","content":[{"type":"#text","content":"6789"}],"attributes":{}},{"type":"#text","content":"\n"}],"attributes":{"data-key":"0","data-number":"0","data-type":"p","data-level":"0","data-align":"left"}},{"type":"DIV","content":[],"attributes":{}}]
61
64
 
65
+ */
62
66
 
63
67
 
64
68
 

3

chousei

2021/11/22 05:00

投稿

yambejp
yambejp

スコア116724

test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  　　<span>6789</span>
24
24
 
25
- </div><div></div>`;
25
+ </div>`;
26
26
 
27
27
  const template = document.createElement("template");
28
28
 
@@ -52,17 +52,13 @@
52
52
 
53
53
  ));
54
54
 
55
- // 一旦JSONに保持
56
-
57
55
  const json=JSON.stringify(getElements(nodes));
58
56
 
59
57
  console.log(json);
60
58
 
61
- /*
59
+ // 一旦JSONに保持
62
60
 
63
- [{"type":"DIV","content":[{"type":"#text","content":"\n　　"},{"type":"SPAN","content":[{"type":"#text","content":"\n　　　　0\n　　　　"},{"type":"SPAN","content":[{"type":"#text","content":"12345"}],"attributes":{"data-color":"#f00","style":"color: rgb(255, 0, 0);"}},{"type":"#text","content":"\n　　"}],"attributes":{"data-test":"xxx"}},{"type":"#text","content":"\n　　"},{"type":"SPAN","content":[{"type":"#text","content":"6789"}],"attributes":{}},{"type":"#text","content":"\n"}],"attributes":{"data-key":"0","data-number":"0","data-type":"p","data-level":"0","data-align":"left"}},{"type":"DIV","content":[],"attributes":{}}]
64
61
 
65
- */
66
62
 
67
63
 
68
64
 
@@ -114,11 +110,31 @@
114
110
 
115
111
 
116
112
 
117
- // JSONから戻したHTMLを再表示
113
+
118
114
 
119
115
  window.addEventListener('DOMContentLoaded', ()=>{
120
116
 
121
117
  [...result.children].forEach(x=>document.querySelector('#view').appendChild(x));
118
+
119
+ console.log(document.querySelector('#view').innerHTML);
120
+
121
+ /*
122
+
123
+ <div data-key="0" data-number="0" data-type="p" data-level="0" data-align="left">
124
+
125
+ 　　<span data-test="xxx">
126
+
127
+ 　　　　0
128
+
129
+ 　　　　<span data-color="#f00" style="color: rgb(255, 0, 0);">12345</span>
130
+
131
+ 　　</span>
132
+
133
+ 　　<span>6789</span>
134
+
135
+ </div>
136
+
137
+ */
122
138
 
123
139
  });
124
140
 

2

調整

2021/11/22 04:58

投稿

yambejp
yambejp

スコア116724

test CHANGED
@@ -8,19 +8,21 @@
8
8
 
9
9
  ```javascript
10
10
 
11
+ <script>
12
+
11
13
  const html=`<div data-key="0" data-number="0" data-type="p" data-level="0"data-align="left">
12
14
 
13
- 　　<span>
15
+ 　　<span data-test="xxx">
14
16
 
15
17
  　　　　0
16
18
 
17
- 　　　　<span data-color="#f00"　style="color: rgb(255, 0, 0);">12345</span>
19
+ 　　　　<span data-color="#f00" style="color: rgb(255, 0, 0);">12345</span>
18
20
 
19
21
  　　</span>
20
22
 
21
23
  　　<span>6789</span>
22
24
 
23
- </div>`;
25
+ </div><div></div>`;
24
26
 
25
27
  const template = document.createElement("template");
26
28
 
@@ -36,7 +38,7 @@
36
38
 
37
39
  content:getElements(x.childNodes),
38
40
 
39
- atrributes:x.attributes?Object.fromEntries([...x.attributes].map(x=>[x.name,x.value])):[],
41
+ attributes:x.attributes?Object.fromEntries([...x.attributes].map(x=>[x.name,x.value])):{},
40
42
 
41
43
  }
42
44
 
@@ -50,8 +52,80 @@
50
52
 
51
53
  ));
52
54
 
55
+ // 一旦JSONに保持
56
+
53
57
  const json=JSON.stringify(getElements(nodes));
54
58
 
55
59
  console.log(json);
56
60
 
61
+ /*
62
+
63
+ [{"type":"DIV","content":[{"type":"#text","content":"\n　　"},{"type":"SPAN","content":[{"type":"#text","content":"\n　　　　0\n　　　　"},{"type":"SPAN","content":[{"type":"#text","content":"12345"}],"attributes":{"data-color":"#f00","style":"color: rgb(255, 0, 0);"}},{"type":"#text","content":"\n　　"}],"attributes":{"data-test":"xxx"}},{"type":"#text","content":"\n　　"},{"type":"SPAN","content":[{"type":"#text","content":"6789"}],"attributes":{}},{"type":"#text","content":"\n"}],"attributes":{"data-key":"0","data-number":"0","data-type":"p","data-level":"0","data-align":"left"}},{"type":"DIV","content":[],"attributes":{}}]
64
+
65
+ */
66
+
67
+
68
+
69
+ const appendContent=(node,content,attr)=>{
70
+
71
+ if(content){
72
+
73
+ content.map(x=>
74
+
75
+ x.type=="#text"?
76
+
77
+ document.createTextNode(x.content):
78
+
79
+ appendContent(document.createElement(x.type),x.content,x.attributes))
80
+
81
+ .forEach(x=>node.appendChild(x));
82
+
83
+ }
84
+
85
+ if(attr){
86
+
87
+ Object.entries(attr).forEach(x=>{
88
+
89
+ node.setAttribute(x[0],x[1]);
90
+
91
+ });
92
+
93
+ }
94
+
95
+ return node;
96
+
97
+ };
98
+
99
+
100
+
101
+ const result=JSON.parse(json).reduce((x,y)=>{
102
+
103
+ const node=document.createElement(y.type);
104
+
105
+ const content=y.content;
106
+
107
+ const attr=y.attributes;
108
+
109
+ x.appendChild(appendContent(node,content,attr));
110
+
111
+ return x;
112
+
113
+ },document.createDocumentFragment());
114
+
115
+
116
+
117
+ // JSONから戻したHTMLを再表示
118
+
119
+ window.addEventListener('DOMContentLoaded', ()=>{
120
+
121
+ [...result.children].forEach(x=>document.querySelector('#view').appendChild(x));
122
+
123
+ });
124
+
125
+ </script>
126
+
127
+
128
+
129
+ <div id="view"></div>
130
+
57
131
  ```

1

chousei

2021/11/22 04:56

投稿

yambejp
yambejp

スコア116724

test CHANGED
@@ -50,6 +50,8 @@
50
50
 
51
51
  ));
52
52
 
53
- console.log(JSON.stringify(getElements(nodes)));
53
+ const json=JSON.stringify(getElements(nodes));
54
+
55
+ console.log(json);
54
56
 
55
57
  ```