如何用javascript将Html ul/ol列表转换成树状数据结构？

Question

谁能告诉我最有效的方法来转换一个html ul/ol列表字符串到一个树状结构的纯javascript或第三个库？

html字符串和数据结构可能如下所示，数据中的属性名称仅为示例：

​

​

Answer 1

我在中搜索答案，以便标记为重复。令我沮丧的是，我找不到一个能解决你问题的答案。

但好的一面是，它让我编写了自己的函数。

​

const $List = document.getElementById('list')

const processNode = node => {
  if (node.children.length) {
    const children = Array.from(node.children).map(child => {
      return processNode(child)
    })

    return {
      tag: node.localName,
      id: node.id,
      children
    }
  } else {
    return {
      tag: node.localName,
      id: node.id,
      content: node.innerText
    }
  }
}

const vList = processNode($List);

console.log(vList)

<ul id="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <ol>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
  </ol>
</ul>

​