小编典典

将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解决方案


阅读 357

收藏
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 elementstring包含有效XHTML的参数作为参数(我相信,我不确定DOMParser()在某些情况下,will
是否会因设置为true而窒息,"text/xml"或者只是不提供错误处理。不幸的是"text/html",浏览器支持不佳)。

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

请享用

2020-05-01