Vue2 - 详细实现解析富文本内容生成侧边栏Toc目录索引，识别富文本内容根据标题h1~h6自动生成文章目录，点击目录导航时跳转到文章内容对应的锚点位置带过渡动画，鼠标滚动内容滑过锚点时高亮对应标题

前言

如果您需要 Vue3 版本，请访问 这篇文章。

在 vue2 | nuxt2 项目开发中，详解实现 “解析识别富文本内容，并在侧边栏动态生成文章目录”，对富文本内的h1~h6标题进行读取分析（可自定义要读取的标签，支持多级标题嵌套渲染），然后在指定位置生成渲染富文本对应的文章锚点目录TOC，点击目录导航菜单时会跳转到文章内容对应的标题锚点位置并且有过渡跳转动画，另外用户浏览富文本滚动经过标题锚点时右侧目录会自动高亮选中效果，您可以自定义目录排版样式、内容渲染样式等灵活度非常高，适用于文章网站、博客平台、富文本内容等，提供详细示例源码。

提供详细示例代码及教程，新手小白复制运行简单修改即可。

---

如下图所示，传入富文本内容自动解析并生成目录，强大可靠无BUG。

详细示例代码及注释，保证新手小白100%搞定。

示例代码

具体实现代码如下，请直接复制运行测试即可。