有这样一个需求,通过遍历文章中的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);
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。