从文章自动生成目录

fuyun 2013-10-23
    如题,从一篇文字/文章/博客/论文中提取h1~h6标签,并生成目录,目录包含链接和锚点,点击链接可跳转到该段落,即类似word从标题中生成目录的功能。
    以下是两个输入输出例子:
    1、输入:
<h1 name="t1">1</h1><h2 name="t2">2</h2><h3 name="t3">3</h3><h2 name="t4">4</h2><h3 name="t5">5</h3><h4 name="t16">16</h4><h5 name="t17">17</h5><h6 name="t18">18</h6><h3 name="t6">6</h3><h2 name="t19">19</h2><h1 name="t7">7</h1><h2 name="t8">8</h2><h3 name="t9">9</h3><h3 name="t10">10</h3><h3 name="t11">11</h3><h2 name="t12">12</h2><h2 name="t13">13</h2><h3 name="t14">14</h3><h1 name="t15">15</h1>

    输出:
<a href="#t1">1</a>
├┄<a href="#t2">2</a>
┆  └┄<a href="#t3">3</a>
├┄<a href="#t4">4</a>
┆  ├┄<a href="#t5">5</a>
┆  ┆  └┄<a href="#t16">16</a>
┆  ┆      └┄<a href="#t17">17</a>
┆  ┆          └┄<a href="#t18">18</a>
┆  └┄<a href="#t6">6</a>
└┄<a href="#t19">19</a>
<a href="#t7">7</a>
├┄<a href="#t8">8</a>
┆  ├┄<a href="#t9">9</a>
┆  ├┄<a href="#t10">10</a>
┆  └┄<a href="#t11">11</a>
├┄<a href="#t12">12</a>
└┄<a href="#t13">13</a>
    └┄<a href="#t14">14</a>
<a href="#t15">15</a>

    2、输入:
<h1 name="t1">1</h1><h2 name="t2">2</h2><h3 name="t3">3</h3><h4 name="t4">4</h4><h5 name="t5">5</h5><h6 name="t6">6</h6><h6 name="t7">7</h6><h5 name="t8">8</h5><h6 name="t9">9</h6><h6 name="t10">10</h6><h4 name="t11">11</h4><h5 name="t12">12</h5><h6 name="t13">13</h6><h6 name="t14">14</h6><h5 name="t15">15</h5><h6 name="t16">16</h6><h6 name="t17">17</h6><h3 name="t18">18</h3><h4 name="t19">19</h4><h5 name="t20">20</h5><h6 name="t21">21</h6><h6 name="t22">22</h6><h5 name="t23">23</h5><h6 name="t24">24</h6><h6 name="t25">25</h6><h4 name="t26">26</h4><h5 name="t27">27</h5><h6 name="t28">28</h6><h6 name="t29">29</h6><h5 name="t30">30</h5><h6 name="t31">31</h6><h6 name="t32">32</h6><h2 name="t33">33</h2><h3 name="t34">34</h3><h4 name="t35">35</h4><h5 name="t36">36</h5><h6 name="t37">37</h6><h6 name="t38">38</h6><h5 name="t39">39</h5><h6 name="t40">40</h6><h6 name="t41">41</h6><h4 name="t42">42</h4><h5 name="t43">43</h5><h6 name="t44">44</h6><h6 name="t45">45</h6><h5 name="t46">46</h5><h6 name="t47">47</h6><h6 name="t48">48</h6><h3 name="t49">49</h3><h4 name="t50">50</h4><h5 name="t51">51</h5><h6 name="t52">52</h6><h6 name="t53">53</h6><h5 name="t54">54</h5><h6 name="t55">55</h6><h6 name="t56">56</h6><h4 name="t57">57</h4><h5 name="t58">58</h5><h6 name="t59">59</h6><h6 name="t60">60</h6><h5 name="t61">61</h5><h6 name="t62">62</h6><h6 name="t63">63</h6>

    输出(二叉树):
<a href="#t1">1</a> 
├┄<a href="#t2">2</a> 
┆  ├┄<a href="#t3">3</a> 
┆  ┆  ├┄<a href="#t4">4</a> 
┆  ┆  ┆  ├┄<a href="#t5">5</a> 
┆  ┆  ┆  ┆  ├┄<a href="#t6">6</a> 
┆  ┆  ┆  ┆  └┄<a href="#t7">7</a> 
┆  ┆  ┆  └┄<a href="#t8">8</a> 
┆  ┆  ┆      ├┄<a href="#t9">9</a> 
┆  ┆  ┆      └┄<a href="#t10">10</a> 
┆  ┆  └┄<a href="#t11">11</a> 
┆  ┆      ├┄<a href="#t12">12</a> 
┆  ┆      ┆  ├┄<a href="#t13">13</a> 
┆  ┆      ┆  └┄<a href="#t14">14</a> 
┆  ┆      └┄<a href="#t15">15</a> 
┆  ┆          ├┄<a href="#t16">16</a> 
┆  ┆          └┄<a href="#t17">17</a> 
┆  └┄<a href="#t18">18</a> 
┆      ├┄<a href="#t19">19</a> 
┆      ┆  ├┄<a href="#t20">20</a> 
┆      ┆  ┆  ├┄<a href="#t21">21</a> 
┆      ┆  ┆  └┄<a href="#t22">22</a> 
┆      ┆  └┄<a href="#t23">23</a> 
┆      ┆      ├┄<a href="#t24">24</a> 
┆      ┆      └┄<a href="#t25">25</a> 
┆      └┄<a href="#t26">26</a> 
┆          ├┄<a href="#t27">27</a> 
┆          ┆  ├┄<a href="#t28">28</a> 
┆          ┆  └┄<a href="#t29">29</a> 
┆          └┄<a href="#t30">30</a> 
┆              ├┄<a href="#t31">31</a> 
┆              └┄<a href="#t32">32</a> 
└┄<a href="#t33">33</a> 
    ├┄<a href="#t34">34</a> 
    ┆  ├┄<a href="#t35">35</a> 
    ┆  ┆  ├┄<a href="#t36">36</a> 
    ┆  ┆  ┆  ├┄<a href="#t37">37</a> 
    ┆  ┆  ┆  └┄<a href="#t38">38</a> 
    ┆  ┆  └┄<a href="#t39">39</a> 
    ┆  ┆      ├┄<a href="#t40">40</a> 
    ┆  ┆      └┄<a href="#t41">41</a> 
    ┆  └┄<a href="#t42">42</a> 
    ┆      ├┄<a href="#t43">43</a> 
    ┆      ┆  ├┄<a href="#t44">44</a> 
    ┆      ┆  └┄<a href="#t45">45</a> 
    ┆      └┄<a href="#t46">46</a> 
    ┆          ├┄<a href="#t47">47</a> 
    ┆          └┄<a href="#t48">48</a> 
    └┄<a href="#t49">49</a> 
        ├┄<a href="#t50">50</a> 
        ┆  ├┄<a href="#t51">51</a> 
        ┆  ┆  ├┄<a href="#t52">52</a> 
        ┆  ┆  └┄<a href="#t53">53</a> 
        ┆  └┄<a href="#t54">54</a> 
        ┆      ├┄<a href="#t55">55</a> 
        ┆      └┄<a href="#t56">56</a> 
        └┄<a href="#t57">57</a> 
            ├┄<a href="#t58">58</a> 
            ┆  ├┄<a href="#t59">59</a> 
            ┆  └┄<a href="#t60">60</a> 
            └┄<a href="#t61">61</a> 
                ├┄<a href="#t62">62</a> 
                └┄<a href="#t63">63</a> 

    注:以上只是演示,真实场景需要从文章的源代码中提取标题标签,且输出应以更友好的方式展现,如可上下收缩的层,但这些都是细枝末节,可自行优化。
Global site tag (gtag.js) - Google Analytics