javascript：如何自动生成一篇文章的目录

有这样一个需求，通过遍历文章中的h1-h5标签，自动生成一个目录结构。

有没有大神做过相关的需求，或者有什么好的实现思路，求指点。

需要注意的有一下几点：

每一篇文章的h1~h5标签不定，可能是中间的任意一个
标题可能嵌套
生成的目录结构要和文章中的标题出现的位置，嵌套关系一一对应。

求大神指点。

简单实现~~
看下是否满足你的需求

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../script/jquery-2.1.3.min.js"></script>
    <title>quick-start</title>
    <script>
        $(function(){
            var padding=[10,20,30,40,50];
            $('body').find('h1,h2,h3,h4,h5').each(function(index,item){
                $('<a name="c'+index+'"></a>').insertBefore($(this));
                var headerText=$(this).text();
                var tagName=$(this)[0].tagName.toLowerCase();
                var tagIndex=parseInt(tagName.charAt(1))-1;
                //设置不同等级header的排列及缩进样式
                $('#category').append($('<a href="#c'+index+'" style="padding-left:'+padding[tagIndex]+'px;display:block;">'+headerText+'</a>'));

            });
        });

    </script>
</head>
<body>

<h1>AAAA1</h1>
<div>
    <h2>BBBB</h2>
    <p>h2content</p>
    <div>
        <h3>CCC</h3>
        <p>h3content</p>
        <div>
            <h4>DDD</h4>
            <p>h4content</p>
            <div>

                <h5>DDD</h5>
                <p>h5content</p>
            </div>
        </div>
    </div>
</div>
<h1>AAAA2</h1>
<h1>AAAA2</h1>
<h1>AAAA3</h1>
<h1>AAAA4</h1>


<div id="category"></div>

</body>
</html>

使用jQuery获取所有的标题信息后，按出现的顺序及标题的语义，构建目录树结构

var treeArray=['h1','h6','h1','h2','h3','h5','h2','h1','h2','h6','h1','h3','h5','h6','h5'];
function findTopLevelHeader(treeArray){
    var topLevelIndex=0;
    var maxLevel=parseInt(getLevelNumber(treeArray[0]));

    if(maxLevel===1){
        return treeArray[0];
    }
    treeArray.forEach(function(item,index){
        if(getLevelNumber(item)<maxLevel){
            maxLevel=parseInt(getLevelNumber(item));
            topLevelIndex=index;
        }
    });

    return treeArray[topLevelIndex]
}

function getLevelNumber(category) {
    return parseInt(category.charAt(1));
}

function repeat(repeatStr,times){
    var tempArray=[];
    repeatStr=repeatStr||'-';
    for(var i=0;i<times;i++){
        tempArray.push(repeatStr||'-');
    }

    return tempArray.join('')
}


function buildTree(treeArray,parentObject,printFlag){
    var topLevelItem=findTopLevelHeader(treeArray);
    var subArray;
    var startIndex=0;
    var endIndex=treeArray.indexOf(topLevelItem,startIndex);
    var obj;
    while(endIndex<=treeArray.length){
        subArray=treeArray.slice(startIndex,endIndex);
        obj={
            p:parentObject.n,
            n:topLevelItem,
            l:parentObject.l+1,
            s:[]
        };
        if(subArray.length==0){
            if(startIndex!=0){
                printFlag&&console.log(repeat('-',obj.l)+obj.n);
                parentObject.s.push(obj);
            }

        }else{
            printFlag&&console.log(repeat('-',obj.l)+obj.n);
            parentObject.s.push(obj);
            buildTree(subArray,obj,printFlag);
        }

        startIndex=endIndex+1;

        endIndex=treeArray.indexOf(topLevelItem,startIndex);
        if(endIndex==-1){
            endIndex=treeArray.length;
        }

        if(startIndex>endIndex){
            var tp=startIndex;
            startIndex=endIndex;
            endIndex=tp;
        }
    }
}

var resutobject={
    p:"",
    n:'root',
    l:1,
    s:[]
};

//console.log(treeArray);
buildTree(treeArray,resutobject,true);

console.log('%j',resutobject);

给你个参考

使用$('.wrap').children()遍历所有的子元素，新建一个数组

var demo = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];

通过该数组获取所有的h1~h6标签，并保存在新的数组里面

$.each($('.wrap').children(), function(i, val) {
    if(demo.indexOf(val.tagName) > -1) {
        newArray.push(val);
    }
})

于是，这个newArray数组里面就全是hx标签了。
判断newArray[0]，并将与下一个相同标签之间元素全部当成子元素插入[0]中，依次递归，即可。

另一个参考

【热门文章】