用javascript自动生成html的目录树_js上传html文件自动生成目录-优快云博客

本文链接：https://blog.youkuaiyun.com/BLADCS/article/details/108956384

本文展示了如何使用JavaScript（辅助jQuery）为HTML文档生成目录树。代码示例中，遍历了HTML中的标题元素，为其添加ID，并构建了一个链接列表，形成目录结构。内容包括一个完整的HTML示例，包含目录树和文章段落，演示了如何展示和导航文档结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一时兴起的需求是：用javascript自动生成html的目录树
效果是这个样子：
在这里插入图片描述

代码

虽然用了jQuery，但用的地方并不是很多，主要还是javascript。用的jQuery的版本是jquery-3.4.1.js

<script src="jquery-3.4.1.js"></script>
<script>
$(document).ready(function (){
    var hs=$("h2").siblings();
    var con=0;
    for (var i=0;i<hs.length;i++){//遍历网页，找文章标题
        if(hs[i].localName.charAt(0)=="h"){
            hs[i].setAttribute("id","t"+con);//给标签添加id
            var num=parseInt(hs[i].localName.charAt(1))-2;
            while (num--){//添加空格
                $("#cataStree").append("&emsp;");
            }
            //添加目录树
            $("#cataStree").append("<a href='#t"+con+"'>"+$(hs[i]).text()+"</a><br>");
            con++;
        }
    }
});
</script>

哎，这个是纯自己写的，感觉挺繁重的。嗨嗨~

一个完整的html，demo

<!doctype html>
<html>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
<title>spring帮助文档</title></head>
<style>
    a:link{
        text-decoration:none;
        color:black;
        /* 指正常的未被访问过的链接*/
    }
    a:visited{
        text-decoration:none;
        color:black;
        /*指已经访问过的链接*/
    }a:hover{
         text-decoration:none;
         color: greenyellow;
         /*指鼠标在链接*/
     }
    a:active{
        text-decoration:none;
        color:black;
        /* 指正在点的链接*/
    }
.cata {
width: 23%;
    height: 100%;
    overflow:hidden;
    float: left;

    text-overflow:ellipsis;
}
    .text {
width: 77%;
        height: 100%;
        float: left;
    }
</style>
<script src="jquery-3.4.1.js"></script>
<script>
$(document).ready(function (){
    var hs=$("h2").siblings();
    var con=0;
    for (var i=0;i<hs.length;i++){//遍历网页，找文章标题
        if(hs[i].localName.charAt(0)=="h"){
            hs[i].setAttribute("id","t"+con);//给标签添加id
            var num=parseInt(hs[i].localName.charAt(1))-2;
            while (num--){//添加空格
                $("#cataStree").append("&emsp;");
            }
            //添加目录树
            $("#cataStree").append("<a href='#t"+con+"'>"+$(hs[i]).text()+"</a><br>");
            con++;
        }
    }
});
</script>

<body>
<div id="cataStree" class="cata"></div>
<div class="text">
<h2>springboot</h2>
<h3>springboot帮助</h3>
<h4>简介</h4>
<p>如果你接触过spring你会觉得spring开发数据库，网络编程真的简单，当你学完springboot后你会觉的springboot就是个神器。开发是真的高效率。</p>
<p>我对springboot的理解就是，对spring的再一次封装，springboot的底层还是调用spring。</p>
<h4>特点</h4>
<ul>
<li>创建独立的Spring应用程序</li>
<li>直接嵌入Tomcat，Jetty或Undertow（无需部署WAR文件）</li>
<li>提供自以为是的“入门”依赖项，以简化构建配置</li>
<li>尽可能自动配置Spring和3rd Party库</li>
<li>提供可用于生产的功能，例如指标，运行状况检查和外部化配置</li>
<li>完全没有代码生成，也不需要XML配置</li>

</ul>
<h4>配置文件</h4>
<h4>自动生成的引导类</h4>
<p>这个作为springboot启动引导类，使项目的启动入口。其他写的逻辑业务代码包必须是在这个类的同包或者是子包。</p>
<p>@SpringBootApplication标记启动类</p>
<pre><code class='language-java' lang='java'>/**
 * 注意：本类必须在其他代码的父包或同包中
 */
@SpringBootApplication
public class QuickApplication {
    public static void main(String[] args) {
        SpringApplication.run(QuickApplication.class, args);
    }
}
</code></pre>
<p>&nbsp;</p>
<h3>springboot注解帮助</h3>
<h4>@RequestBody与@RequestParam()</h4>
<p>@RequestBody</p>
<p>主要用来<strong>接收前端传递给后端的json字符串中的数据</strong>(请求体中的数据的)；</p>
<p>GET方式无请求体，所以使用@RequestBody接收数据时，前端不能使用GET方式提交数据，而是用POST方式进行提交。</p>
<p>@RequestBody与@RequestParam()可以同时使用，@RequestBody最多只能有一个，而@RequestParam()可以有多个。</p>
<h4>@RestController</h4>
<p>已准备好使用该类来处理Web请求。</p>
<p>这是因为@RestController将@Controller和@ResponseBody组合在一起。即@RestController=@ResponseBody ＋ @Controller。</p>
<h4>@ResponseBody</h4>
<p>返回json或xml数据到前台页面</p>
<h4>@RequestMapping</h4>
<p>使用@RequestMapping(&quot;/a&quot;)来映射请求,下面给出栗子：</p>
<pre><code class='language-java' lang='java'>@Controller
public class web1 {
    @RequestMapping(&quot;/m1&quot;)
    @ResponseBody
    public String m1(){
        return &quot;你好啊&quot;;
    }
}
</code></pre>
<p>&nbsp;</p>
</div>
</body>
</html>