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

简单实现~~

看下是否满足你的需求

quick-start

$(function(){

var padding=[10,20,30,40,50];

$('body').find('h1,h2,h3,h4,h5').each(function(index,item){

$('').insertBefore($(this));

var headerText=$(this).text();

var tagName=$(this)[0].tagName.toLowerCase();

var tagIndex=parseInt(tagName.charAt(1))-1;

//设置不同等级header的排列及缩进样式

$('#category').append($(''+headerText+''));

});

});

AAAA1

BBBB

h2content

CCC

h3content

DDD

h4content

DDD

h5content

AAAA2

AAAA2

AAAA3

AAAA4

使用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=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

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