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

編集履歴

回答編集履歴

4

chousei

2021/11/22 05:00

投稿

yambejp
yambejp

スコア117846

answer CHANGED
@@ -25,11 +25,13 @@
25
25
  content:x.textContent,
26
26
  }
27
27
  ));
28
+ // 一旦JSONに保持
28
29
  const json=JSON.stringify(getElements(nodes));
29
30
  console.log(json);
30
- // 一旦JSONに保持
31
+ /*
32
+ [{"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":{}}]
33
+ */
31
34
 
32
-
33
35
  const appendContent=(node,content,attr)=>{
34
36
  if(content){
35
37
  content.map(x=>

3

chousei

2021/11/22 05:00

投稿

yambejp
yambejp

スコア117846

answer CHANGED
@@ -10,7 +10,7 @@
10
10
  　　　　<span data-color="#f00" style="color: rgb(255, 0, 0);">12345</span>
11
11
  　　</span>
12
12
  　　<span>6789</span>
13
- </div><div></div>`;
13
+ </div>`;
14
14
  const template = document.createElement("template");
15
15
  template.innerHTML = html;
16
16
  const nodes=[...template.content.children];
@@ -25,13 +25,11 @@
25
25
  content:x.textContent,
26
26
  }
27
27
  ));
28
- // 一旦JSONに保持
29
28
  const json=JSON.stringify(getElements(nodes));
30
29
  console.log(json);
31
- /*
32
- [{"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":{}}]
33
- */
30
+ // 一旦JSONに保持
34
31
 
32
+
35
33
  const appendContent=(node,content,attr)=>{
36
34
  if(content){
37
35
  content.map(x=>
@@ -56,9 +54,19 @@
56
54
  return x;
57
55
  },document.createDocumentFragment());
58
56
 
59
- // JSONから戻したHTMLを再表示
57
+
60
58
  window.addEventListener('DOMContentLoaded', ()=>{
61
59
  [...result.children].forEach(x=>document.querySelector('#view').appendChild(x));
60
+ console.log(document.querySelector('#view').innerHTML);
61
+ /*
62
+ <div data-key="0" data-number="0" data-type="p" data-level="0" data-align="left">
63
+ 　　<span data-test="xxx">
64
+ 　　　　0
65
+ 　　　　<span data-color="#f00" style="color: rgb(255, 0, 0);">12345</span>
66
+ 　　</span>
67
+ 　　<span>6789</span>
68
+ </div>
69
+ */
62
70
  });
63
71
  </script>
64
72
 

2

調整

2021/11/22 04:58

投稿

yambejp
yambejp

スコア117846

answer CHANGED
@@ -3,13 +3,14 @@
3
3
  中途半端で、元に戻せそうもないように見えます
4
4
  せめてこんな感じで
5
5
  ```javascript
6
+ <script>
6
7
  const html=`<div data-key="0" data-number="0" data-type="p" data-level="0"data-align="left">
7
- 　　<span>
8
+ 　　<span data-test="xxx">
8
9
  　　　　0
9
- 　　　　<span data-color="#f00"　style="color: rgb(255, 0, 0);">12345</span>
10
+ 　　　　<span data-color="#f00" style="color: rgb(255, 0, 0);">12345</span>
10
11
  　　</span>
11
12
  　　<span>6789</span>
12
- </div>`;
13
+ </div><div></div>`;
13
14
  const template = document.createElement("template");
14
15
  template.innerHTML = html;
15
16
  const nodes=[...template.content.children];
@@ -17,13 +18,49 @@
17
18
  ?{
18
19
  type:x.nodeName,
19
20
  content:getElements(x.childNodes),
20
- atrributes:x.attributes?Object.fromEntries([...x.attributes].map(x=>[x.name,x.value])):[],
21
+ attributes:x.attributes?Object.fromEntries([...x.attributes].map(x=>[x.name,x.value])):{},
21
22
  }
22
23
  :{
23
24
  type:x.nodeName,
24
25
  content:x.textContent,
25
26
  }
26
27
  ));
28
+ // 一旦JSONに保持
27
29
  const json=JSON.stringify(getElements(nodes));
28
30
  console.log(json);
31
+ /*
32
+ [{"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":{}}]
33
+ */
34
+
35
+ const appendContent=(node,content,attr)=>{
36
+ if(content){
37
+ content.map(x=>
38
+ x.type=="#text"?
39
+ document.createTextNode(x.content):
40
+ appendContent(document.createElement(x.type),x.content,x.attributes))
41
+ .forEach(x=>node.appendChild(x));
42
+ }
43
+ if(attr){
44
+ Object.entries(attr).forEach(x=>{
45
+ node.setAttribute(x[0],x[1]);
46
+ });
47
+ }
48
+ return node;
49
+ };
50
+
51
+ const result=JSON.parse(json).reduce((x,y)=>{
52
+ const node=document.createElement(y.type);
53
+ const content=y.content;
54
+ const attr=y.attributes;
55
+ x.appendChild(appendContent(node,content,attr));
56
+ return x;
57
+ },document.createDocumentFragment());
58
+
59
+ // JSONから戻したHTMLを再表示
60
+ window.addEventListener('DOMContentLoaded', ()=>{
61
+ [...result.children].forEach(x=>document.querySelector('#view').appendChild(x));
62
+ });
63
+ </script>
64
+
65
+ <div id="view"></div>
29
66
  ```

1

chousei

2021/11/22 04:56

投稿

yambejp
yambejp

スコア117846

answer CHANGED
@@ -24,5 +24,6 @@
24
24
  content:x.textContent,
25
25
  }
26
26
  ));
27
- console.log(JSON.stringify(getElements(nodes)));
27
+ const json=JSON.stringify(getElements(nodes));
28
+ console.log(json);
28
29
  ```