javascript - 将 HTML 映射到 JSON

我刚刚写了这个函数来做你想做的事；试试看，如果它不适合您，请告诉我:

// 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 页面树结构的对象，然后使用大多数现代浏览器(IE8+、Firefox 3+)中包含的 JSON.stringify() 。ETC);如果您需要支持旧版浏览器，您可以添加 json2.js .

它可以采用 DOM 元素或包含有效 XHTML 的 string 作为参数(我相信，我不确定 DOMParser() 是否会阻塞某些情况，因为它设置为 "text/xml" 或者它是否不提供错误处理。不幸的是 "text/html" 浏览器支持不佳)。

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