首发于 Mintimate's Blog

如何根据页面标签自动生成文章目录？分析+代码详解

Mintimate

Mintimate’s Blog

作者：Mintimate

博客： https://www.mintimate.cn

Mintimate's Blog，只为与你分享

文章目录

文章目录功能大家再熟悉不过了吧，主要用于长篇文章、教程内：用户可以根据自己需求，点击目录进行跳转。

常见的目录效果：

这样的文章目录，难道要写到数据库里么？

当然不是，这个肯定是前端人员实现的。而且用简单的JavaScript就可以实现。

“Any application thatcanbe written in JavaScript,willeventually be written in JavaScript.” — — Jeff Atwood

问题分析

一般需要生成目录的文章，标题都是需要标题和章节目录，所以必须要要有特定的标签修饰。举个例子，我这个网站是这样的：

封装标题标签

封装标题标签的目的很简单，最终的效果（有了集合……才方便我们遍历嗷～）：

为了实现这样的效果；首先，我们要在页面加载后，遍历文章：

遍历文章，很简单，我们使用childNodes方法和foreach循坏即可。

childNodes 属性返回节点的子节点集合，以 NodeList 对象。

实操演示如下。

遍历文章

原生JavaScript

单层包括，也就是需要生成目录的文章，外层有一个<div></div>或其他双标签进行嵌套，如：

这个时候我们在根标签加上一个ID即可：

之后，在JavaScript内即可获取子元素：

// 获取文章内容
const article_content = document.getElementById('content');
// 文章内容标签遍历
article_content.childNodes.forEach((e, index) => {
        //具体执行步骤，比如：打印看看
        console.log(e)
}

这样就遍历成功了。

Vue实现

这里在讲一下Vue如何实现，Vue不提倡我们直接操作页面DOM元素，所以这里我们可以在组件上加ref标签进行关联：

获取文章内容，就可以：

// 根据ref获取内容
const article_content = this.$refs.markdownContent;

但是，一般组件生成后，都是多标签进行包裹，要遍历文章标签，就需要children进行指定，比如：

所以，我们就可以这样遍历：

article_content.children[0].children[0].childNodes.forEach((e, index) => {
    //具体执行步骤，比如：打印看看
        console.log(e)
}

这样就遍历成功了。

封装元素

接下来，看到这些#text是不是束手无策？其实也很简单，我们进一步进行解析即可。

首先在循坏遍历的外侧，添加一个数组，如果页面元素标签，在这个数组范围内，就提取到标签集合并生成一个对象丢到titles内：

// 哈哈，三级目录差不多了吧。云+社区也是三级目录～～～
 const titleTag = ["H1", "H2", "H3"];
 let titles = [];

在遍历文章内容时，就可以判断标签是不是在数组内：

if (titleTag.includes(e.nodeName)) {
  //具体封装过程
}

之后，我们看看具体封装过程的逻辑实现。

首先是给文章每个<h>标签，加上id，id的生成，我们使用变量时的index即可：

const id = "header-" + index;
// 设置元素id
 e.setAttribute("id", id);

之后，就是把标签，解析成一个树，丢到titles内：

titles.push({
  id: id,
  title: e.innerHTML,
  level: Number(e.nodeName.substring(1, 2)),
  nodeName: e.nodeName
});

最终代码效果：

< script type = "text/javascript" > 
const article_content = document.getElementById('content');
const titleTag = ["H1", "H2", "H3"];
let titles = [];
article_content.childNodes.forEach((e, index) = >{
    if (titleTag.includes(e.nodeName)) {
        const id = "header-" + index;
        e.setAttribute("id", id);
        titles.push({
            id: id,
            title: e.innerHTML,
            level: Number(e.nodeName.substring(1, 2)),
            nodeName: e.nodeName
        });
    }
});
const catalog = titles;
console.log(catalog); 
< /script>

页面打印效果：

同时，Vue内也差不多：

页面渲染

最后，我们看看页面的渲染，页面渲染就可以根据喜好渲染了。比如我的（Vue工程）：

Vue工程可以使用v-for进行遍历，还是很简单的。

如果是原生JavaScript，就要自己拼接了……

// 原生JavaScript遍历
for (index in catalog) {
    document.getElementById('cataLog').innerHTML += "<li style='padding-left: " + (catalog[index].level * 22 - 22) + "px;'>" + "<a href='#" + catalog[index].id + "'>" + catalog[index].title + "</a>""</li>"
};