实现一个类似掘金Style的markdown目录(js编写文章)

一、锚点设置
makdown中的#，##，##组成的标题经过marked等工具转化渲染到网页中会成变成h标签，所以当拿到文章详情页后可以从中抽离出所有的目录标签即h1，h2，h3…

const toc: string[] = data.content.match(/<[hH][1-6]>.*?</[hH][1-6]>/g) // 通过正则的方式
复制代码
拿到这些标题之后就可以进行锚点的设置。在H5中关于锚点的做法很多，我们会采用下面这种做法进行设计：

①：设置一个锚点链接 去找喵星人（注意：href属性的属性值最前面要加#）

②：在页面中需要的位置设置锚点

（注意：a标签中要写一个id属性，属性值要与①中的href的属性值一样，不加#）

通过正则匹配到文章中所有的h标签后,循环添加id属性并将div包裹

tocs.forEach((item: string, index: number) => {
let _toc = <div name='toc-title' id='${index}'>${item} </div>
data.content = data.content.replace(item, _toc)
})
复制代码
二、目录转化
我们看到的文章目录一般都是以ul > li > a 标签形式存在的，所以拿到了文章所有的h标签后如何转化为ul或li这类的标签呢？

从控制台中中可