使用 js 根据文章中h标签生成目录结构，生成树状结构

当编写长篇文章或技术文档时，为了方便读者阅读和快速导航，添加一个目录结构是一种常见的做法。在本文中，我将介绍如何使用 JavaScript 根据文章中的 HTML 标签生成一个目录结构。

准备工作

首先，我们需要一个由 HTML 标签组成的文章。在这个示例中，我们将使用 h2- 会标签来构建标题层次结构。

menu

    
文章目录 1 
    
文章内容 1 文章内容 1 文章内容 1 文章内容 1 
    
文章目录 1 -1
    
章内容 1 文章内容 1 文章内容 1 文章内容 1 
    
文章目录 1 -2
    
章内容 1 文章内容 1 文章内容 1 文章内容 1 
    
文章目录 2 
    
章内容 1 文章内容 1 文章内容 1 文章内容 1 
    
文章目录 2 -1
    
章内容 1 文章内容 1 文章内容 1 文章内容 1 
    
文章目录 2 -2
    
章内容 1 文章内容 1 文章内容 1 文章内容 1 
    
文章目录 3 
    
章内容 1 文章内容 1 文章内容 1 文章内容 1 
    
文章目录 3 -1
    
章内容 1 文章内容 1 文章内容 1 文章内容 1 

生成目录结构

要生成目录结构，我们可以编辑一个 JavaScript 函数。以下是一个基本的实现：

function createMenu() {
  // 首先获取所有 H 标签，若页面中有 h4，h5，h6 则可以添加到参数中
  var headList = [...document.querySelectorAll("h1,h2,h3")]; // 将 H 标签构造成一棵树，就可以明确 H 标签之间的层级
  var root = {children: []
  };
  var h = {node: headList[0],
    children: [],
    parent: root
  };
  root.children.push(h);
  headList.reduce(function (pre, cur) {
    var n = {
      node: cur,
      children: []};
    while (h.node.localName[1] - n.node.localName[1] !== -1) {
      h = h.parent;
      if (h === root) {break;}
    }
    n.parent = h;
    h.children.push(n);
    h = n;
    return h;
  }); // 给 H 标签加 id
  var index = 1;
  function createList(list) {var text = list.reduce(function (pre, cur) {
      var childText; // 判断该 H 标签有没有子层 H 标签
      if (cur.children.length) {childText = createList(cur.children);
      } else {childText = "";}
      cur.node.id = "header" + index++;
      pre += `

`;
      return pre;
    }, “”);
    var text = `

 ${text} 

`;
    return text;
  }
  var content = createList(root.children);
  document.getElementById(“menu”).innerHTML = content;
}
createMenu();// 调用

最终效果图

以下是运行代码后的结果

文章来源地址 https://www.toymoban.com/diary/js/696.html

到此这篇关于使用 js 根据文章中 h 标签生成目录结构，生成树状结构的文章就介绍到这了, 更多相关内容可以在右上角搜索或继续浏览下面的相关文章，希望大家以后多多支持 TOY 模板网！

原文地址:https://www.toymoban.com/diary/js/696.html

如若转载，请注明出处：如若内容造成侵权 / 违法违规 / 事实不符，请联系站长进行投诉反馈，一经查实，立即删除！