JSでJSONをHTMLに変換したい

Question

こんにちは。いつもお世話になっております。

状況

• contenteditableでブロックエディタを作成しています。
• 昨日に質問でHTMLをJSONに変換する方法について質問させていただきました。

解決したい内容

• HTMLからJSONに変換する事は出来たのですが，JSONからHTMLに変換できません。
• 下記のようなJSONからHTMLに変換する関数を作成したいです。

{
	"type": "DIV",
	"content": [
		{
			"type": "SPAN",
			"content": [
				"0",
				{
					"type": "SPAN",
					"content": [
						"12345"
					],
					"attributes": [
						{
							"key": "data-color",
							"value": "#f00"
						},
						{
							"key": "style",
							"value": "color: rgb(255, 0, 0);"
						}
					]
				},
				""
			],
			"attributes": []
		},
		{
			"type": "SPAN",
			"content": [
				"6789"
			]
		}
	],
	"attributes": [
		{
			"key": "data-key",
			"value": "0"
		},
		{
			"key": "data-number",
			"value": "0"
		},
		{
			"key": "data-type",
			"value": "p"
		},
		{
			"key": "data-level",
			"value": "0"
		},
		{
			"key": "data-align",
			"value": "left"
		}
	]
}

<div data-key="0" data-number="0" data-type="p" data-level="0"data-align="left">
　　<span>
　　　　0
　　　　<span data-color="#f00"　style="color: rgb(255, 0, 0);">12345</span>
　　</span>
　　<span>6789</span>
</div>

検討した解決方法

• 下記の関数でHTMLへの変換を試みましたが，上記のHTMLのような構造になりませんでした。
  • 一つ目のspan内に二つ目のspan(6789)も含まれてしまいます。

/**
*
* @param parent appendする親要素
* @param object 上記のJSON
*/
function ToHTML(parent,object){
    if(object['type']){
        child=document.createElement(object['type']);
        parent.appendChild(child);
        for(let i=0;i<object['attributes'].length;++i){
            child.setAttribute(object['attributes'][i]['key'],object['attributes'][i]['value']);
        }
        if(object['content']){
            for(let i=0;i<object['content'].length;++i){
                if(object['content'][i]['type']){
                    ToHTML(child,object['content'][i]);
                }else{
                    text=document.createTextNode(object['content'][i]);
                    child.appendChild(text);
                }
            }
        }
    }
}

自力での解決や検索の仕方が悪いのかネットでも解決策を見つけられなかったのでご指南の程よろしくお願いします。

Comments

[yambejp]

JSONはそれがマストですか？attributesの持ち方が非効率的だと思いますが・・・

Answer 1

以下の3点

1. 最低限の修正版
2. リファクタ案
3. Reactコンポーネント案

の順に回答します。

1. 最低限の修正版

はじめに、質問の「検討した解決方法」にあるコードのfunction ToHTML(parent,object)に最小限の修正して、とりあえずサンプルのJSONに対しては意図通り動くようにします。

修正点は3つあり、それぞれ、コメントに修正内容を書いています。

 function ToHTML(parent,object){
   if(object['type']){
-    child=document.createElement(object['type']);
+    const child=document.createElement(object['type']); // (1) const を追加
     parent.appendChild(child);
-    for(let i=0;i<object['attributes'].length;++i){
-      child.setAttribute(object['attributes'][i]['key'],object['attributes'][i]['value']);
+    if (object['attributes']) { // (2) attributes が無い場合もあるので、if が必要
+      for(let i=0;i<object['attributes'].length;++i){
+        child.setAttribute(object['attributes'][i]['key'],object['attributes'][i]['value']);
+      }
     }
     if(object['content']){
       for(let i=0;i<object['content'].length;++i){
         if(object['content'][i]['type']){
           ToHTML(child,object['content'][i]);
         }else{
-          text=document.createTextNode(object['content'][i]);
+          const text=document.createTextNode(object['content'][i]); // (3) const を追加
           child.appendChild(text);
         }
       }
     }
   }
 }

• 上記の修正による動作確認サンプル ???? tera: 370429 その1

2. リファクタ案

上記の 1. 最低限の修正版 をリファクタしたものが以下です。

function ToHTML(parent, object) {
  const { type, attributes, content } = object;
  const node = type ? document.createElement(type) : document.createTextNode(object);  
    
  if (type) {    
    if (attributes) {
      attributes.forEach(({ key, value }) => {
        node.setAttribute(key, value);
      });
    }
    if (content) {
      content.forEach(child => ToHTML(node, child));
    }
  }
  
  parent.appendChild(node);  
}

• 上記のリファクタ版の動作確認サンプル ???? tera: 370429 その2

これは、1. 最低限の修正版を、以下の諸点でリファクタしたものです。

• objectを分割代入して、type, attributes, content という変数を作ることによって、object['type'] といったブラケット[･･･]によるプロパティ取得を書かなくて済むようにした。

• typeによって作られるHTML要素の変数名を child から node に変更して、child という変数名は、content の各要素をforEachで取り出したときの変数名とした。

• 変数名nodeには、typeの有無によって、HTML要素のノードかテキストノードのいずれか（に対する参照）が入るようにした。

• for ループを forEach に置き換えた。

3. Reactコンポーネント案

質問をさかのぼってみると、contenteditableでのインライン要素指定について　というご質問があり、この質問にはタグReact が付いていますね。もしReactで作ることも検討しているなら、DOMを直接操作するのではなく、与えられたJSONからReactコンポーネントを作ってこれをrenderするほうが望ましいです。

その場合、ざっくりですが、こんな感じのものを作ればよいかと思います。

const DecoratedText = ({ data }) => {
  if (data === null || typeof data === 'string') {
    return data;
  }
  
  const { type, attributes, content } = data;
  
  if (!type) {
    return null;
  }

  const Outer = type.toLowerCase();

  const props = Object.fromEntries((attributes || []).map(({key, value}) =>
    [key, key === 'style' ? styleProps(value) : value]
  ));

  return (
    <Outer {...props}>
      {content && content.map(data => <DecoratedText key={randomStr()} data={data}/>)}
    </Outer>
  );
}

補助的に使っている関数は以下です。

// ランダム文字列生成関数
const randomStr = () => (Math.random() + 1).toString(36).substring(2);

// style 属性の文字列から、styleオブジェクトを作って返す関数
const styleProps = (styleStr) =>
  styleStr.split(';').filter(s => s).reduce((o, s) => {
    const [k, v] = s.split(':');
    o[k] = v.trim();
    return o;
  }, {});

• Reactコンポーネント案の動作確認サンプル ???? tera: 370429 その3

Answer 2

HTMLからJSONに変換する事は出来た

中途半端で、元に戻せそうもないように見えます
せめてこんな感じで

<script>
const html=`<div data-key="0" data-number="0" data-type="p" data-level="0"data-align="left">
　　<span data-test="xxx">
　　　　0
　　　　<span data-color="#f00" style="color: rgb(255, 0, 0);">12345</span>
　　</span>
　　<span>6789</span>
</div>`;
const template = document.createElement("template");
template.innerHTML = html;
const nodes=[...template.content.children];
const getElements=(n)=>[...n].map(x=>(x.nodeType==1
  ?{
  type:x.nodeName,
  content:getElements(x.childNodes),
  attributes:x.attributes?Object.fromEntries([...x.attributes].map(x=>[x.name,x.value])):{},
  }
  :{
  type:x.nodeName,
  content:x.textContent,
  }
  ));
// 一旦JSONに保持
const json=JSON.stringify(getElements(nodes));
console.log(json);
/*
[{"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":{}}]
*/  

const appendContent=(node,content,attr)=>{
  if(content){
    content.map(x=>
    x.type=="#text"?
    document.createTextNode(x.content):
    appendContent(document.createElement(x.type),x.content,x.attributes))
    .forEach(x=>node.appendChild(x));
  }
  if(attr){
    Object.entries(attr).forEach(x=>{
      node.setAttribute(x[0],x[1]);
    });
  }
  return node;
};

const result=JSON.parse(json).reduce((x,y)=>{
  const node=document.createElement(y.type);
  const content=y.content;
  const attr=y.attributes;
  x.appendChild(appendContent(node,content,attr));
  return x;
},document.createDocumentFragment());


window.addEventListener('DOMContentLoaded', ()=>{
  [...result.children].forEach(x=>document.querySelector('#view').appendChild(x));
  console.log(document.querySelector('#view').innerHTML);
/*
<div data-key="0" data-number="0" data-type="p" data-level="0" data-align="left">
　　<span data-test="xxx">
　　　　0
　　　　<span data-color="#f00" style="color: rgb(255, 0, 0);">12345</span>
　　</span>
　　<span>6789</span>
</div>
*/
});
</script>

<div id="view"></div>