Question

我有以下代码

<html>
  <head>
    <title>Hello!</title>
  </head>
  <body>
    <div class=”div1”>
      <h1>This is a headline!</h1>
      <br>
      <img src=”header-image.png”>
    </div>
    <div class=”div2”>
      <a href=”http://www.google.com”></a>
    </div>
    <div class='div3'>
    </div>
  </body>
</html>

我希望以下面的格式显示此代码

{
"html" : [
    {
        "head" : [{ "title" : "hello" }]
    }, 
    { "body" : [
            { "div1" : [
                { "h1" : "This is a headline!" },
                { "br" : "" },
                { "img" : "header-image.png" } 
            ]},
            { "div2" : [{ "a" : "http://www.google.com" }] },
            {"div3" : [] }
     ] }
   ]
}

我尝试将整个标记转换为字符串并将结果转换为数组。

http://plnkr.co/edit/SslHEaU8bQMvyWJj04iM?p=preview

我被困在中间。有人可以帮我吗？提前谢谢。

Answer 1

我希望这个JavaScript函数能解决你的问题：

function nodeToJSON(node)
{
    if(!node.tagName) { return {}; }
    var key = node.className ? node.className : node.tagName.toLowerCase();
    if(node.hasChildNodes && node.hasChildNodes())
    {
        if(node.childNodes.length == 1 && node.childNodes[0].nodeType === 3)
        {
            var child = node.childNodes[0];
            var value = child.wholeText ? child.wholeText.trim() : "";
        }
        else
        {
            var value = [];
            for(var index in node.childNodes)
            {
                var child = node.childNodes[index];
                if(!child.tagName) { continue; }
                if(child.tagName == "IMG")
                {
                    value.push({img: child.src});
                }
                if(child.tagName == "A")
                {
                    value.push({a: child.href});
                }
                else
                {
                    value.push(nodeToJSON(child));
                }
            }
        }
    }
    else
    {
        var value = "";
    }
    var result = {};
    result[key] = value;
    return result;
}

该函数需要一个选定的HTML元素（参见DOM API），例如整个HTML文档：

console.log(JSON.stringify(nodeToJSON(document.documentElement)));

如果您有字符串输入，请将其转换为DOM。我使用innerHTML属性：

var html = document.createElement("html");
html.innerHTML = "<body><h1>headline</h1><p>my content</p></body>";
nodeToJSON(html);

将html标记转换为对象

1 个答案: