javascript - 极具挑战：根据html
信息，生成文章多级目录。期待大神

Question

以下问题 我搞不定，看高手如何解决： 问题描述： 需要将一段html代码（主要是h1、h2、h3） 转化为对应的json html： {代码...} 希望能生成如下的json数据 ，并存储到items 变量中： {代码...} 综上所述：根据htm...

黄舟 · Answer

正则匹配，先把h1标签中间的东西找到。然后使用一下，那个正则的子集吧好像是。再把中间的元素整出来。

怪我咯 · Answer

//script
    $(".main-content").find("h2,h3,h4,h5,h6").each(function(i,item){
          var tag = $(item).get(0).nodeName.toLowerCase();
          $(item).attr("id","wow"+i);
          $("#AnchorContent").append(''+$(this).text()+'');
          $(".newh2").css({"margin-left":0,"font-weight":"bold"});
          $(".newh3").css({"margin-left":20,"font-size":"16px"});
          $(".newh4").css({"margin-left":40,"font-size":"14px"});
      });

  $(".anchor-link").click(function(){
      $("html,body").animate({scrollTop: $($(this).attr("link")).offset().top}, 600);
  })
//html

    

          //js生成标题
    
    
        //内容

伊谢尔伦 · Answer

var items = [];
    var interimObj = null;
    var fn = {
        'H1' : function (v) {
            if(interimObj){items.push(interimObj);}
            var obj = {
                headTitle : v,
                children : []
            };
            interimObj = obj;
        },
        'H2' : function (v) {
            interimObj.children.push({
                headTitle : v,
                children : []
            });
        },
        'H3' : function (v) {
            interimObj.children[interimObj.children.length-1].children.push({
                headTitle : v
            });
        }
    };
    $('body').find('h1,h2,h3').each(function () {
        var name = $(this)[0].tagName;
        var v = $(this).html();
        fn[name](v);
    });
    items.push(interimObj);
    console.log(items);

PHP中文网 · Answer

另外一个朋友的解法：

再另外一个解法：

伊谢尔伦 · Answer

纯js、纯函数实现，可以方便的扩展到4、5、6级标题

var headerList = Array.from(document.querySelectorAll("h1,h2,h3"));

function tree(headerList, e){
    if(!e) return listChildren(headerList, {tagName: 'H0'})
    var resultTree = {'headTitle': e.innerText};

    if(getLevel(e) < 3){
        var children = listChildren(headerList ,e);
        if(children.length != 0)
            resultTree.children = children;
    }
    
    return resultTree;
}

function getLevel(e){
    return e.tagName.match(/\d/);
}

function listChildren(headerList, e){
    var resultList = [];
    var index = headerList.indexOf(e);

    while(headerList[index+1] && getLevel(headerList[index+1]) > getLevel(e)){
        if(getLevel(headerList[index+1]) - 1 == getLevel(e))
            resultList.push(tree(headerList, headerList[index+1]))
        index++;
    }
    return resultList;
}

//计算
console.log(tree(headerList));