js提取markdown渲染后的html的文档目录
时间: 2023-07-30 13:04:18 浏览: 56
你可以使用 JavaScript 中的 DOM API 来提取 Markdown 渲染后的 HTML 文档目录。具体步骤如下:
1. 获取 HTML 中的所有标题标签。
```javascript
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
```
2. 遍历所有标题标签,生成目录项。
```javascript
let tocHtml = '';
headings.forEach((heading) => {
const tagName = heading.tagName.toLowerCase();
const title = heading.innerText;
const id = heading.id;
tocHtml += `<li><a href="#${id}">${title}</a></li>`;
});
```
3. 将目录项添加到页面中。
```javascript
const tocContainer = document.querySelector('#toc');
tocContainer.innerHTML = `<ul>${tocHtml}</ul>`;
```
其中,`#toc` 是你指定的目录容器元素的 ID。你需要在 HTML 中添加一个元素来作为目录容器,如下:
```html
<div id="toc"></div>
```
注意:在提取目录时,你需要保证 Markdown 渲染后的 HTML 中所有的标题标签都有 ID 属性,以便于生成目录中的链接。如果你使用的 Markdown 编辑器在渲染 HTML 时没有为标题标签添加 ID 属性,你可以使用 JavaScript 在渲染后的 HTML 中添加 ID 属性。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)