jsで深さがわからない子要素をjsonで簡単に構造化したい

Question

閲覧ありがとうございます。

状況

‐ contenteditableでのインライン要素指定についてこの回答内容をもとにブロックエディタを作成しています。

• 上記のインライン要素を指定する際に

let r = getSelection().getRangeAt(0);
let newSpan = document.createElement('span');
newSpan.dataset.italic = 'true';
newSpan.appendChild(r.extractContents());
r.insertNode(newSpan);

でインライン要素をしています。

• この方法では<span>の階層が増えてしまい，構造が複雑になってしまいます。

解決したい内容

• 下記のようなHTMLをJavaScriptを用いてJSONで簡単に表したい。
• 子要素の階層は無限にあり得る。(下記のHTMLでは，BoldItalicのノードにも子要素や孫要素がある可能性がある。)

<div>
  <span data-bold="true">
    Bold
  </span>
  <span data-italic="true">
    <span data-bold="true">
      BoldItalic
    </span>
    Italic
  </span>
</div>

{
  0:{
    "text":"Bold",//タグ内の文字列
    "bold":true
  },
  1:{
    "text":"BoldItalic",
    "bold":true,//親要素の属性も含める
    "italic":true
  },
  2:{
    "text":"Italic",
    "italic":true
  }
}

お願いしたい解決内容

• 子要素が有限な階層であればできるのですが，階層の数がわからず能力不足でできません。上記のHTMLをもとにJSONに変換する方法
• DOMを操作し，下記のコードのように簡単なHTMLにする方法

<div>
  <span data-bold="true">
    Bold
  </span>
  <span data-italic="true" data-bold="true"><!--親要素のdata-italicも継承-->
    BoldItalic
  </span>
  <span data-italic="true">
    Italic
  </span>
</div>

のどちらかの方法(もしくはほかの方法)のアドバイスをいただければと思います。
ご指南の程よろしくお願いします。

Comments

[yambejp]

頂上のDIVは属性をひろわないのでしょうか？

[ikeyu.tp]

それはどちらでも。DIVを親要素として子要素のspanをすべて取得してもDIVに親要素があってDIVが子要素だとしても本質的には変わらないはず(親要素をどれに設定するか)だと思うので。

[yambejp]

親を再帰的に検索するとして、data-＊の値が競合したときはどうするのでしょうか？

[ikeyu.tp]

data-*の値が競合することはないと思いますが，競合したときは一番最後の値を採用したいと思います。

Answer 1

自分だったら、何かを作ろうとしている途中で、

HTMLをJavaScriptを用いてJSONで簡単に表したい。

といった類いの汎用的な問題に当たったら、まずは、「すでに誰かがやってくれているんじゃないだろうか？」と考えて、他の人の成果に（ありがたく）乗っかることを考えます。

この質問の場合も、（ある程度信頼できて）試せるコードはないか？という目線で検索したところ、すぐに以下が見つかりました。

• Map HTML to JSON [closed] @stackoverflow

で、これのベストアンサーの関数、mapDOM(element, json)

function mapDOM(element, json) {
    var treeObject = {};
    
    // If string convert to document Node
    if (typeof element === "string") {
        if (window.DOMParser) {
              parser = new DOMParser();
              docNode = parser.parseFromString(element,"text/xml");
        } else { // Microsoft strikes again
              docNode = new ActiveXObject("Microsoft.XMLDOM");
              docNode.async = false;
              docNode.loadXML(element); 
        } 
        element = docNode.firstChild;
    }
    
    //Recursively loop through DOM elements and assign properties to object
    function treeHTML(element, object) {
        object["type"] = element.nodeName;
        var nodeList = element.childNodes;
        if (nodeList != null) {
            if (nodeList.length) {
                object["content"] = [];
                for (var i = 0; i < nodeList.length; i++) {
                    if (nodeList[i].nodeType == 3) {
                        object["content"].push(nodeList[i].nodeValue);
                    } else {
                        object["content"].push({});
                        treeHTML(nodeList[i], object["content"][object["content"].length -1]);
                    }
                }
            }
        }
        if (element.attributes != null) {
            if (element.attributes.length) {
                object["attributes"] = {};
                for (var i = 0; i < element.attributes.length; i++) {
                    object["attributes"][element.attributes[i].nodeName] = element.attributes[i].nodeValue;
                }
            }
        }
    }
    treeHTML(element, treeObject);
    
    return (json) ? JSON.stringify(treeObject) : treeObject;
}

を借りると、それなりに要件に近いJSONが出来るのではと思い、検証してみました。

???? tera: 370356 @codepen

どうでしょう？

エディタを作る作業を優先するのであれば、このmapDOM(element, json)をこのまま使うか、オブジェクトのプロパティだったりを微調整していく等を検討してみるのはアリかもしれません。もちろん、ちょっと寄り道して、ソースを細かく読んで理解して、これの改良版を作るのもよいかと思います。

Comments

[ikeyu.tp]

ありがとうございます！！
まさにやりたかったことです。自力でこの検索結果には到達できなかったので大変助かりました！

ただ，このJSONをHTMLに変換することができないのでこちらもよければご指南いただければと思います。
https://teratail.com/questions/370429

[退会済みユーザー]

こちら ???? https://teratail.com/questions/370429
修正点を回答しました。

Answer 2

const html=`<div>
  <span data-bold="true">
    Bold
  </span>
  <span data-italic="true">
    <span data-bold="true">
      BoldItalic
    </span>
    Italic
  </span>
</div>`;
const getClosest=(n,ret=[])=>(ret.push(n),(n=n.parentElement)?getClosest(n,ret):ret);
const template = document.createElement("template");
template.innerHTML = html;
const nodes=[...template.content.querySelectorAll('*')];
const datas=nodes.reduce((x,y)=>(x.push({
  text:[...y.childNodes].filter(x=>x.nodeType==3).map(x=>x.textContent.trim()).join(''),
  ...Object.fromEntries(getClosest(y).map(x=>Object.entries(x.dataset)).flat()),
}),x),[]);
console.log(JSON.stringify(datas));