js 匹配出包含众多子元素的内容

<li>
  <a href="http://test.com/">首页</a>
  <ul>
    <li><a href="http://test.com/category-2.html">子菜单1</a></li>
    <li>
       <a href="http://test.com/category-8.html">子菜单2</a>
       <ul>
           <li><a href="http://test.com/category-9/.html">搞笑</a></li>
           <li><a href="">新增菜单</a></li>
       </ul>
    </li>
  </ul>
 </li>
 <li><a href="http://test.com/category-2.html">工具</a></li>
 <li><a href="http://test.com/category-8.html">视频</a></li>

想用js方式匹配得出如下的json

[{
        "name": "首页",
        "url": "http://test.com/",
        "child": [{
                "name": "子菜单1",
                "url": "http://test.com/category-2.html"
            },
            {
                "name": "子菜单2",
                "url": "http://test.com/category-8.html",
                "child": [{
                    "name": "子菜单1",
                    "url": "http://test.com/category-9.html"
                }]
            }
        ]
    },
    {
        "name": "工具",
        "url": "http://test.com/category-2.html"
    },
    {
        "name": "视频",
        "url": "http://test.com/category-8.html"
    }
]

自己尝试了一下，没能成功，没有好的思路，求大佬指导。

啥意思没太理解