给文章中的h标签生成目录结构(巧妙利用双向链表数据结构)

2019 精帖
0 153

1.前言

例如在用富文本编辑器编辑文章的时候,会用到h标签来代表本段标题,那么h标签是有顺序的,例如:

h标签的顺序可能是这样的
h1
h1
h2
h3
h1
h3
h2
h4

那么目录结构就应该是

那么目录结构应该是
h2
h1
----h2
--------h3
h1
----h3
----h2
--------h4

2.案例如图:

本文就介绍如何使用js设计数据结构,巧妙利用双向链表实现将顺序的目录,转换成树状目录。

3.js代码

<script>
	/**
	*	链表节点信息
	**/
	function Node(data){
		this.data=data;
		this.next=null;
		this.prev=null;
	}
	/**
	*	双向链表数据结构
	**/
	function LinkedList(){
		this.head=null;
		this.tail=null;
		
		/**
		*	添加节点(添加的节点是尾节点)
		**/
		this.add=function(data){
			var node=new Node(data);
			if(this.head==null){
				this.head=this.tail=node;
			}else{
				node.prev=this.tail;
				this.tail.next=node;
				this.tail=node;
			}
		}
		
		/**
		*	删除目标节点
		**/
		this.delete=function(node){
			if(node==null){
				return null;
			}
			if(node==this.head&&node==this.tail){
				this.head=null;
				this.tail=null;
			}else if(node==this.head){
				this.head=this.head.next;
				this.head.prev=null;
			}else if(node==this.tail){
				this.tail=this.tail.prev;
				this.tail.next=null;
			}else{
				node.prev.next=node.next;
				node.next.prev=node.prev;
			}
			node.next=null;
			node.prev=null;
			return node;
		}
	}

	/**
	*	数据节点信息
	**/
	function createNode(name,level){
		return {
			name:name, //名称
			level:level, //标签级别
			child:new Array(), //标签子节点
		};
	}
	
	/**
	*	生成链表和树的组合结构
	**/
	function create(h,arr){
		while(h!=null){
			var li=new LinkedList();
			while(h.next!=null){
				if(h.next.data.level>h.data.level){
					li.add(arr.delete(h.next).data)
				}else {
					break;
				}
			}
			/**
			*	递归生成子树
			**/
			create(li.head,li);
			h.data.child=li;
			h=h.next;
		}
	}
	
	/**
	*	将组合结构中的链表结构转换为数组结构
	**/
	function toArray(arr){
		var a=new Array();
		var h=arr.head;
		while(h!=null){
			if(h.data.child!=null){
				h.data.child=toArray(h.data.child);
			}
			a.push(h.data);
			h=h.next;
		}
		return a;
	}
	
	/**
	*	模拟h标签
	**/
	var array=new LinkedList();
	array.add(createNode("h2",2));
	array.add(createNode("h3",3));
	array.add(createNode("h2",2));
	array.add(createNode("h1",1));
	array.add(createNode("h3",3));
	array.add(createNode("h2",2));
	array.add(createNode("h2",2));
	array.add(createNode("h3",3));
	array.add(createNode("h3",3));
	array.add(createNode("h4",4));
	
	create(array.head,array);//生成树结构
	
	var data=JSON.stringify(toArray(array));//转化json
	
	/**
	*	打印数据
	**/
	console.log(data)
	
</script>

本js只是模拟用顺序的h标签,生成树状的json数据结构,代码多处涉及递归算法

具体html+js+css实现请参考:http://jiajiajia.club/blog/artical/vSdf1Q/406

留言(0)
加载更多
猜你喜欢
  • blog 希尔排序 - 与算法

    算法思想: 希尔排序是插入排序增强版,其主要算法思想还是插入排序思想。 算法描述: 在插入排序基础上,对待排序组进行间隔为inc分组,然后对每个分组进行直接插入排序,一次排序完后,减小inc间隔,然后再进行分组,对每个分
  • blog 选择排序 - 和算法

    算法思想: 对冒泡排序一种改进,每次从没有排序集合a拿取一个最大或最小元素,放入有序集合b,直到a集合元素被取完 算法描述: 变量i遍历整个组,变量j遍历i后面组,每次遍历i初始k=i,每次发现a[k]比a[
  • blog 冒泡排序 - 与算法

    算法思想: 每次从没有排序集合a拿取一个最大或最小元素,放入有序集合b,直到a集合元素被取完 算法描述: 变量i遍历整个组,变量j遍历i后面组,每次交换i比j大元素,使得i遍历过组元素有序,直至整个组被
  • blog -算法-完全二叉树权值

    试题描述:思路: 示完全二叉树,先序遍历方式遍历每一层节点,一个组储存每一层和,因为规模小于100000所以一个容量为17组即可。计算完每一层和,再比较层最小之和最大那一层。代码:packa
  • blog 插入排序 - 与算法

    算法思想: 把所有需要排序两个集合,一个是待排序集合,一个是已排序集合,算法每次从未排序集合顺序或随机拿取一个,把它加入到已排序集合使其有序,直到未排序集合被取走完,算法束 public class Test
  • blog 快速排序 - 与算法

    算法思想 将待排序集合以该集合随机一个为分界点分左右两个集合,一次排序使其右边集合全部大于左边集合,然后再分别递归式对左右两个集合执行上述排序操作,直到递归集合没有,递归束完排序。 算法描述 现有待排序
  • blog 深度优先搜索(dfs、深搜)java实现-和算法

    上一篇:广度优先搜索算法(bfs、广搜)java实现-和算法 邻接矩阵示图定点之间关系 如下图邻接矩阵示为: private static int map[][]={ {0 ,3 ,
  • blog 广度优先搜索算法(bfs、广搜)java实现-和算法

    广度优先搜索算法(dfs、深搜)java实现-和算法 邻接矩阵示图定点之间关系 如下图: 则邻接矩阵示为: private static int map[][]={ {0 ,3 ,6
  • blog 和算法-判断单是否有环 求环入口地址(java)

    问题:如上图一个,如何判断一个是否存在环,以及如何求出环入口以及何如求出长度。 方案一:hash         首先准备一个hash如hashMap等,然后从头部
  • blog +算法-堆排序

    堆排序(英语:Heapsort)是指堆这种所设计一种排序算法。堆是一个近似完全二叉树,并同时满足堆积性质:即子键值或索引总是小于(或者大于)它父节点。以最小堆为例下沉操作对于一个非叶子节点下沉操作指是:如果