将html标记转换为对象

converting html markup to object

本文关键字：对象 转换 html      更新时间：2023-12-22

我有下面的代码

<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

我被夹在中间。有人能帮我吗？提前谢谢。

编写一个以HTML元素为参数的递归函数。功能应：

1） 创建一个空对象。2） 检查输入元素是否有任何子元素（hasChildNodes）。3） 如果它没有子对象，请向空对象添加一个属性，该属性的名称等于标记名称，值等于标记中的文本（textContent）。4） 如果它有子级，那么制作一个数组，并通过在每个子级上递归调用函数来填充它。

我希望这个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);
相关文章：