有这样一个需求，通过遍历文章中的h1-h5标签，自动生成一个目录结构。有没有大神做过相关的需求，或者有什么好的实现思路，求指点。需要注意的有一下几点：每一篇文章的h1~h5标签不定，可能是中间的任意一个标题可能嵌套生成的目录结构要和文章中的标题出现的位置，嵌套关系一一对应。求大神指点。

使用 $('.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]中，依次递归，即可。

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

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

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

需要注意的有一下几点：

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

求大神指点。

阅读 12k

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

<!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);

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

为什么会出现CORS error？

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

为什么会出现CORS error？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？