用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做为1、二级标题。

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>

加上想要的目录样式