转载于:JavaScript自动生成博文目录导航

我们在写博客的时候,如果博文里面有目录,会给人结构清晰、一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到 具体的内容,这样园友们在看博客的时候就可以很方便地浏览自己感兴趣的内容,但是遗憾的是博客园不支持博文目录的生成,好像也有园友给博客园提建议,希望 能够像CSDN那样能够自动生成博文目录,但是不知道是什么原因,博客园一直都没有把这个功能加上去,既然没有,那我就自己做吧,研究了2天,总算是按照 自己的设想做出来了,最终效果如下:

    

下面来介绍一下这个小工具的实现。

一、功能描述

  这个小工具要实现的核心功能只有两个:

    1.自动生成博文目录。

    2.点击目录标题定位到标题对应的具体内容,就像使用word生成的目录那样。

1.1、自动生成博文目录

  小工具的第一个核心功能,就是通过代码自动抽取标题,然后再包装一下插入文档中。基本实现原理:首先要求博主在写博文的时候,将主标题和次级标题用 HTML标签中的 title tag(如:h1、h2、h3...)包起来;

  比如"1.1、自动生成博文目录"这个次级标题现在是段落的形式

  将"1.1、自动生成博文目录"设置成"标题3"

  然后通过 JS 代码遍历整个包含博文正文的 <div>,过滤出这些标签,再把它们组装成自定义列表的形式,再插入到HTML文档中,如下:

 1     <dl>
 2         <dt>一、JAVA流式输入/输出原理</dt>
 3         <dt>二、输入输出流分类</dt>
 4         <dt>三、节点流和处理流</dt>
 5             <dd>3.1.节点流类型</dd>
 6             <dd>3.2.处理流类型</dd>
 7         <dt>四、InputStream(输入流)</dt>
 8             <dd>4.1.InputStream的基本方法</dd>
 9         <dt>五、OutputStream(输出流)</dt>
10             <dd>5.1.OutputStream的基本方法</dd>
11         <dt>六、Reader流</dt>
12             <dd>6.1.Reader的基本方法</dd>
13         <dt>七、Writer流</dt>
14             <dd>7.1.Writer的基本方法</dd>
15         <dt>八、节点流讲解</dt>
16         <dt>九、处理流讲解</dt>
17             <dd>9.1.第一种处理流——缓冲流(Buffering)</dd>
18             <dd>9.2.第二种处理流——转换流</dd>
19             <dd>9.3.第三种处理流——数据流</dd>
20             <dd>9.4.打印流——Print</dd>
21             <dd>9.5. 对象流——Object</dd>
22         <dt>十、IO流总结</dt>
23     </dl>

  如果不加任何样式,它在浏览器中的默认显示效果如下: