首页 > 试题广场 >

标题：HTML字符串转换为domTree数据结构 题目描述：

[问答题]
标题：HTML字符串转换为domTree数据结构
题目描述：给到html字符串`
<div id="test" class="myDiv"><div><p id="testP"></p><span></span></div><input type="text"/></div>
`
实现函数`toDomTree()`最后可以得到如下数据
[
  {
    "label": "div",
    "children": [
      {
        "label": "div",
        "children": [
          {
            "label": "p",
            "children": []
          },
          {
            "label": "span",
            "children": []
          }
        ]
      },
      {
        "label": "input"
      }
    ]
  }
]
添加回答
spring-breeze头像 spring-breeze 
function getDOMTree(html) {
  const root = document.createElement('div');
  root.innerHTML = html;
  const domTree = (father) => {
    const obj = { children: [], label: father.tagName.toLowerCase() };
    for (let ele of father.children) {
      obj.children.push(domTree(ele));
    }
    return obj;
  };
  return domTree(root.children[0]);
}
编辑于 2020-06-24 16:25:42 回复(1)
求好运啊啊啊啊头像 求好运啊啊啊啊
var txt='<div id="test" class="myDiv"><div><p id="testP"></p><span></span></div><input type="text"/></div>'
var root = document.createElement("div")
root.id = "root"
root.innerHTML = txt
document.body.appendChild(root)
var father = document.querySelector("#root").firstChild
function domTree(father){
var obj={}
obj.label = father.tagName.toLowerCase()
obj.children = []
var childs = father.children
if(childs){
for(item of childs)
{
obj.children.push(domTree(item))
}
}
return obj
}
console.log(JSON.stringify(domTree(father)))
发表于 2020-04-05 17:45:49 回复(0)
hellogry头像 hellogry 
function toDomTree(html) {
    let tagStart = /\<\w+(?=\s[.*])\/?\>/
    let tagEnd = /\<\/\w+\s*\>/
}

发表于 2019-12-23 09:55:25 回复(0)
提交观点

问题信息

前端工程师 第四范式 2020
上传者：小小
难度：
3条回答 926浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号