将HTML映射到JSON

一尘不染

将HTML映射到JSON

javascript

我正在尝试将HTML映射到结构完整的JSON中。那里有没有这样做的库，还是我需要编写自己的库？我想如果没有html2json库，我可以以xml2json库作为开始。毕竟，html只是xml的一种变体，对吗？

更新： 好的，我应该举一个例子。我想做的是以下内容。解析html字符串：

<div>
  <span>text</span>Text2
</div>

变成这样的json对象：

{
  "type" : "div",
  "content" : [
    {
      "type" : "span",
      "content" : [
        "Text2"
      ]
    },
    "Text2"
  ]
}

注意：如果您没有注意到标签，我正在寻找Javascript解决方案

阅读 319

2020-05-01

共1个答案

一尘不染

我只是写了这个函数来实现您想要的功能，请尝试一下，让我知道它是否无法正常工作：

// Test with an element.
var initElement = document.getElementsByTagName("html")[0];
var json = mapDOM(initElement, true);
console.log(json);

// Test with a string.
initElement = "<div><span>text</span>Text2</div>";
json = mapDOM(initElement, true);
console.log(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;
}

工作示例：http :
//jsfiddle.net/JUSsf/（在chrome中测试，我不能保证完全支持浏览器-
您必须对此进行测试）。

它将创建一个对象，该对象包含您请求格式的HTML页面的树状结构，然后使用JSON.stringify()大多数现代浏览器（IE8 +，Firefox
3+等）中包含的结构; 如果您需要支持较旧的浏览器，则可以包含json2.js。

它可以使用a DOM element或string包含有效XHTML的参数作为参数（我相信，我不确定DOMParser()在某些情况下，will
是否会因设置为true而窒息，"text/xml"或者只是不提供错误处理。不幸的是"text/html"，浏览器支持不佳）。

您可以通过传递一个不同的值来轻松更改此函数的范围element。传递的任何值都将成为JSON映射的根。

请享用

2020-05-01