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

前言

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

在 vue3 | nuxt3 项目开发中，详解实现 “解析识别富文本内容，并在侧边栏动态生成文章目录”，对富文本内的h1~h6标题进行读取分析（可自定义要读取的标签，支持多级标题嵌套渲染），然后在指定位置生成渲染富文本对应的文章锚点目录TOC，点击目录导航菜单时会跳转到文章内容对应的标题锚点位置并且有过渡跳转动画，另外用户浏览富文本滚动经过标题锚点时右侧目录会自动高亮选中效果。

---

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

示例代码

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