用jquery实现文章自动生成二级目录

前段时间有个同学问有没有办法在博客园上发一篇文章然后自动生成文章的目录。之前不知道该怎么做这几天看了些jquery之后觉得还是容易的。

一级目录

一级目录的思路很简单，找出作为一级标题的元素，在某个地方将text列出，再加上链接就好。

target = $("#contents");
$(document).ready(function() {
    GenerateContents();
});

function GenerateContents() {
    var num = 0;
    var target = $("#contents");
    var content = "目录";
    content += "<ul>";
    $("h2").each(function(){
        content += "<li>" + GenerateA(num,$(this).text()) + "</li>";
        $(this).before(GenerateLabel(num));
        num++;
    });
    target.append(content);
}

//这两个函数本来想的是以后改着方便
function GenerateLabel(num){
    var a = "<a name = 'label" + num + "'></a>";
    return a;
}

function GenerateA(num ,text){
    var ss = "<a href='" + "#label" 
            + num +"'>" + text
            + "</a>";
    return ss;
}

 

二级目录

二级目录就是再找出两个h2之间的h3就好，我这里用h2,h3作为一、二级标题。

target = $("#contents");
$(document).ready(function() {
    GenerateContents2();
});

function GenerateContents2() {
    var num = 0;
    var target = $("#contents");
    var content = "目录";
    content += "<ul>";
    $("h2").each(function(){
        content += "<li>"+GenerateA(num,$(this).text());
        $(this).before(GenerateLabel(num));
        num++;

        var second = $(this).nextUntil("h2","h3");
        if (second) {
            content += "<ul>";
            second.each(function(){
                    content += "<li>"+GenerateA
                        (num,$(this).text())+"</li>";
                    $(this).before(GenerateLabel(num));
                    num++;
                }
            );
            content += "</ul>";
        };
        content += "</li>";
    });
    content += "</ul>";
    target.append(content);
}


//这两个函数本来想的是以后改着方便
function GenerateLabel(num){
    var a = "<a name = 'label" + num + "'></a>";
    return a;
}

function GenerateA(num ,text){
    var ss = "<a href='" + "#label" 
            + num +"'>" + text
            + "</a>";
    return ss;
}

使用方法

写完提交的时候突然发现在随笔里加js要申请js权限，想申请下来之后再加上。。不过想想我这么懒说不定哪天就忘记了，还是加上好了。

 

首先，没有js权限的申请js权限。

在写好的文章的想要插入目录的位置的HTML代码里加上：

<div id="contents" display="block" style="padding:10px 0;background:#BBB">
</div>

在

<script type="text/javascript"></script>

之间加上代码

在

<script type="text/css"></script>

加上想要的目录样式