开发者社区> 问答> 正文

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

小旋风柴进 2016-05-30 08:59:24 1091

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

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

需要注意的有一下几点:

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

移动开发 JavaScript 前端开发
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:18:57
    <!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);
    
    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程