自动生成文章目录导航及目录相关UI -- 算法解析-- 原生jq实现

文章目录有关

先上git地址，README完整，有需自取https://github.com/xxx407410849/AutoCatelog 求星哦

自动生成文章目录的基本原理是对所选容器里的所有子节点进行遍历，得到H1 - H6的标签序列，再在顺序结构的基础上创建（模拟）出一棵树，因为默认大标题包含小标题的条目（如H1 H2，则H1包含H2的条目），所以在这棵树上必不存在HX->HN（X>=N）的树枝（即出现H3 H2的情况下，程序不可能分析H2成为H3子条目），抽取出这棵树后，再进行有关的目录UI操作。

当然，若是单纯的想要生成目录，则无需模拟树，只需要根据H标签的顺序和H标签的层级给予<li>标签相应的margin-left值，就能模拟出目录结构了，但是那样则不可能实现某些帅气的UI。

---

UI有关

一般与目录相关的有以下UI

点击目录自动滚动到相应的标题（锚点）

目录的路径标红

目录的滚动展开

目录条目的高亮选取与滚动检测

作者演示如下：

没错这是作者自己的博客，还没完工的，富文本编辑器用的自己的，有兴趣的可以看一下我的富文本编辑器项目https://github.com/xxx407410849/Leditor

---

抽取标签的顺序序列

//目录检测
var $articleElem = $('.article-body-text');
var $articleChildElem = $articleElem.children();
var hReg = /^h/i;
var $hCtn = [];
var $liCtn = [];
var $wayList = [];
var $setList = [];
//鉴定存在的最高级H,最低级H
//实际上推荐只使用H3 H4 H5
var $minH = "H6";
var $maxH = "H1";
for(var i = 0 ; i < $articleChildElem.length ; i++){
	if(hReg.test($articleChildElem[i].nodeName)){
		$hCtn.push($articleChildElem[i]);
		if($minH > $articleChildElem[i].nodeName){
			$minH = $articleChildElem[i].nodeName;
		}
		if($maxH < $articleChildElem[i].nodeName){
			$maxH = $articleChildElem[i].nodeName;
		}
	}
}

代码中 $articleElem 是所选取的要生成目录的文章容器，鉴定所使用最高和最低的H的原因是因为需要适配存在不同数量H标签的情况，给予不同的样式。

同时将选取到的H标签按照顺序push至数组$hCtn中。

目录排序与UI锚点定位

//目录排序,提取
//实际上用margin模拟排序,而不是真的有顺序
var minHNum = parseInt($minH.slice(1,2));
var maxHNum = parseInt($maxH.slice(1,2));
var $ulElem = $("<ul class='catalog'></ul>");
//点击事件绑定以及抽取标题文字
$hCtn.forEach(function(item){
	var $liElem = $("<li class='catalogitem'></li>")
	$liElem.addClass(item.nodeName + "item");
	$liElem.text(item.innerHTML);
	$liElem.on('click',function(e){
		var $el