Question

我之前（here和here）看到了这个问题，但仍然没有看到任何好的解决方案。自2011年被问及我以为我可能会自己尝试：）

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

结构：

＆＃13;

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

＆＃13;

所需的JSON：

＆＃13;

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

＆＃13;

除了编写我的香草代码之外，还有什么好方法吗？感谢。

Answer 1

尝试使用$.map()

＆＃13;

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");

＆＃13;

<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>

＆＃13;

使用JavaScript，JQuery实现将HTML DOM结构（或克隆）转换为JSON

1 个答案: