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

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

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

相关课程

相关电子书

相关实验场景

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

相关课程

相关文章

相关电子书

相关实验场景