纯js实现文章导航目录

我们经常看到一些内容较多的文章都有一个目录导航，点击导航会跳转到响应的位置，页面滚动时相应位置的导航也会呈现选中状态非常的方便，这里使用js做一个简单的实现

实现思路

• 为文章中的标题标签h1、h2添加不同的id（举例只取h1、h2其他同理）
• 正则获取文章内容中的h1、h2标签
• 使用将获取到的标签转换成li、a标签，id转换为href属性
• 将转换后的标签插入需要显示目录的位置
• 编写监测页面滚动监听事件
• 编写描点点击事件

为文章中的标题标签添加不同的id

需要保证页面中的id不重复，这里使用了循环赋值的方法

//遍历h1 h2重设id
let idList = 1;
$('.j-article-conn h1').each(function () {
   
	$(this).attr('id', idList);
	idList++;
});
$('.j-article-conn h2').each(function () {
   
	$(this).attr('id', idList);
	idList++;
});

正则获取文章内容中的标题标签

使用正则一行代码即可实现：

let a = $('.j-article-conn'