使用 JavaScript 将 HTML DOM 结构（或克隆）转换为 JSON，可能的 JQuery [重复]答案

【问题标题】：convert an HTML DOM structure (or cloned) to JSON by using JavaScript, JQuery possible [duplicate]使用 JavaScript 将 HTML DOM 结构（或克隆）转换为 JSON，可能的 JQuery [重复]
【发布时间】：2015-11-12 19:00:39
【问题描述】：

我之前在这里看到过这个问题（here 和here），但仍然没有看到任何好的解决方案。自从 2011 年被问到，我想我可以自己试试 :)

我需要将整个 HTML 结构转换为 JSON。

结构：

<body>
<div class="container">
    Lorem ipsum dolor
</div>
<h1>This is heading 1
    <div class="footer">
       tessssst
    </div>
</h1>
</body>

所需的 JSON：

{
    "body": {
        "div": {
            "text": "Loremipsumdolor",
            "class": "container"
        },
        "h1": {
            "div": {
                "text": "tessssst",
                "class": "footer"
            }
        }
    }
}

除了编写我的香草代码之外，还有什么好的方法可以做到这一点吗？谢谢。

【问题讨论】：

那是无效的 JSON。我建议使用一些现有的解决方案（例如JSONML）。
对不起，我已经编辑了 sn-p
请注意，JSON 对象中的属性本质上是无序的 - 在您的示例中，h1 可能位于 div 之前。此外，您的格式不支持具有相同标记名称的多个子项，这会导致属性名称重复。您开始使用的阵列是正确的预感。
是的。当我将它们放入对象数组中时，它们将按如下顺序排列：jsbin.com/suhota/edit?html,js,output
只有一个未知键的对象没有多大意义。而是使用{tagName: "div", content:[…]}

标签： javascript jquery json dom

【解决方案1】：

尝试使用$.map()

var res = {};
var elems = $.map($("body"), function(el, index) {
  res[el.tagName] = $(el).children().map(function(i, elem) {
    var obj = {};
    var name = elem.tagName;
    if (!$(elem).children().length) {
      obj[name] = {
        "text": elem.textContent,
        "class": elem.className
      };
    } else {
      var _elems = $.map($(elem).children(), function(val, key) {
        var _obj = {};
        _obj[val.tagName] = {
          "text": val.textContent,
          "class": val.className
        };
        return _obj
      });
      obj[name] = {
        "text": elem.textContent,
        "class": elem.className
      };
      _elems.forEach(function(v, k) {
        var _name = Object.keys(v)[0];
        obj[name][_name] = {
          "class": v[_name]["class"],
          "text": v[_name]["text"]
        }
      })
    }
    return obj
  }).get();
  return res
});

console.log(elems);

$("<pre />", {"text": JSON.stringify(elems, null, 2)})
.prependTo("body");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>
  <div class="container">
    Lorem ipsum dolor
  </div>
  <h1>This is heading 1
    <div class="footer">
       tessssst
    </div>
</h1>
</body>

【讨论】：