JavaScript 遍历文档生成目录结构

一、需求描述

在 Word 中编辑文档的时候，可以在视图中打开导航窗格来查看目录树

类似的，现在需要基于页面上的文章，渲染出一个这样的目录结构

 

在网页上这些标题都是通过 <h1> 这样的标签渲染的，而且段落与标题之间是兄弟节点的关系

所以第一步只需要获取到文章的根节点，然后遍历 <h1> 这样的兄弟节点，就能拿到初步的目录结构

 

但有一种特殊情况需要考虑：

可能文章中的第一个标题并不是 h1，而是更低层级的标题，比如 h3，但在显示上依然需要作为一级标题来展示，因为在 h3 之前没有更大的标题

同样的，在 h1 下面如果先出现了 h3，紧接着又出现了 h2，那么先出现的 h3 实际上和后面的 h2 处于一个层级

也就是说类似这样的结构：

<h3>标题3</h3>
<h4>标题4</h4>
<h1>标题1</h1>
<h2>标题2</h2>
<h1>标题1</h1>
<h4>标题4</h4>
<h3>标题3</h3>
<h2>标题2</h2>

需要展示为：

 

 

二、程序设计

虽然页面上的文章是一棵 DOM 树，但由于标题元素是块级元素，所以实际上需要处理的树节点是平铺的，只有一个层级

也就是说，不管是怎样的文档，最终都能处理成这样的结构：

const article = [ { tag: 'h3',content: '标题3' }, { tag: 'p', content: '这里是第一部分的内容' }, { tag: 'h4', content: '标题4' }, { tag: 'p', content: '这里是第二部分的内容' }, { tag: 'p', content: '上面说得很好，接下来再补充一点' }, { tag: 'h1', content: '标题1' }, { tag: 'h2', content: '标题2' }, { tag: 'h1', content: '标题1' }, { tag: 'p', content: '刚才有一点忘记说了' }, { tag: 'p', content: '我话讲完，谁赞成，谁反对' }, { tag: 'h4', content: '标题4' }, { tag: 'h3', content: '标题3' }, { tag: 'p', content: '不好意思，你刚才说什么我没听清' }, { tag: 'h2', content: '标题2' }, { tag: 'p', content: '现在我再问一次，谁赞成，谁反对' }, ]

所以对于文档本身，只需要做一次遍历即可

但是对于文档目录，由于最终计算的是一个相对层级，所以也不太方便使用固定长度的数组来记录层级

所以最终的解决方案是维护一个栈来记录标题的层级关系

在一开始的时候，对于标题节点无论是几级标题，都直接压栈

后面每次处理标题，都和栈尾的标题进行比较，如果当前的标题层级更深，则压入栈内，否则清除栈尾，并比较前一位标题

 

在处理标题层级的同时，还需要另外维护一个记录前缀的栈，这两个栈是映射关系

最终可以通过这两个栈，得到目录的完整文案，甚至是缩进量，所以出参可以这样的结构：

const result = [ { title: '1 标题', indent: 0 }, { title: '1.1 标题', indent: 1 }, ]

 

 

三、代码实现

function getHeadingList(list) { if (!Array.isArray(list)) { return; } const reg = /h(\d)/; // 使用正则来匹配标题节点
  const levelStack = []; // 记录标题层级
  const prefixStack = []; // 记录前缀

  return list.reduce((res, node) => { const { tag, content } = node || {}; const tagSplited = reg.exec(tag); if (!tagSplited) return res; updateLevelList(levelStack, prefixStack, Number(tagSplited[1])); res.push({ title: `${prefixStack.join('.')} ${content}`, indent: prefixStack.length - 1, }); return res; }, []); } function updateLevelList(levelStack, prefixStack, current) { const idx = levelStack.length - 1; const lastLevel = levelStack[idx]; if (!lastLevel || current > lastLevel) { // 当前为最深层级，压入栈尾
 levelStack.push(current); prefixStack.push(1); return; } if (current === lastLevel) { // 层级相等时，只修改前缀
    prefixStack[idx]++; } else if (current < lastLevel) { // 当前层级更高，先和上一层级对比
    const preIndex = idx - 1; const preLevel = levelStack[preIndex]; if (!preLevel || current > preLevel) { // 如果preLevel不存在，则代表当前层级比顶层更高，即 [2, 3, 1] 这种情况 // 如果preLevel比当前层级更高，即 [1, 3, 2] 这种情况
      prefixStack[idx]++; levelStack[idx] = current; } else { // 删除栈尾，继续递归
      levelStack.splice(idx, 1); prefixStack.splice(idx, 1); updateLevelList(levelStack, prefixStack, current); } } }