给Joplin导出的html文档自动生成目录

joplin选择导出的html目录

打开html文件 在最后贴上这段script即可

逻辑为 搜索出html文档里的所有标题标签 即H1 ~H6 ,然后实时维护 0级到5级的最后的标签对象
拿到新的一个标题从上级标题往前找,找到最近的那个标题,加入那个标题下的ol里

<script type="text/javascript">
    var nowEles = [null, null, null, null, null, null];
    document.addEventListener("DOMContentLoaded", function () {

        // 创建目录容器
        var rootContent = createContent();
        //容器是目录根节点
        nowEles[0]=[null, rootContent];
        // 获取所有的标题标签
        var headers = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
        for (var i = 0; i < headers.length; i++) {

            var ele_ols = null;
            // get H* and prepare for the ordered list
            var header = headers[i];
            //header.setAttribute("id", "t" + i + header.tagName);
            header.setAttribute("id", header.textContent);

            //目录层级
            var h = parseInt(header.tagName.substr(1), 10);

            var parent = getParent(h);
            var ele_li = createTag(header);
            parent.append(ele_li);
            refreshParent(h, ele_li);

        }
    });

    //创建个放目录的容器 此容器绝对定位与左上角
    function createContent() {
        var outline = document.createElement("div");
        outline.setAttribute("id", "outline-list");
        outline.style.cssText = "border:solid 1px #ccc; background:#eee; " +
            "min-width:400px;padding:4px 10px;max-width:400px;position:fixed;overflow-y:auto;max-height:100%;left:0px;top:0px;";

        var ele_p = document.createElement("p");
        ele_p.style.cssText = "text-align: left; margin: 0;";
        outline.appendChild(ele_p);

        var ele_span = document.createElement("span");
        // ele_span.style.cssText = "float: left;";
        var ele_text = document.createTextNode("TOC");
        ele_span.appendChild(ele_text);

        var ele_a = document.createElement("a");
        ele_a.appendChild(document.createTextNode("[+]"));
        ele_a.setAttribute("href", "#");
        ele_a.setAttribute("onclick", "javascript:return openct(this);");
        ele_a.setAttribute("title", "Click to Open TOC");

        ele_span.appendChild(ele_a);
        ele_p.appendChild(ele_span);

        var ele_ol = document.createElement("ol");
        ele_ol.style.cssText = "display:none;margin-left:14px;padding-left:14px;line-height:160%;";
        ele_ol.setAttribute("id", "outline_ol");
        outline.appendChild(ele_ol);
        document.body.insertBefore(outline, document.body.childNodes[0]);
        return ele_ol;
    }

    // 给目录容器添加展开关闭方法
    function openct(e) {
        if (e.innerHTML == '[+]') {
            // createTextNode
            e.setAttribute('title', 'collapse');
            e.innerHTML = '[-]';
            var element = document.getElementById("outline_ol");
            element.style.cssText = "margin-left:14px;padding-left:14px;line-height:160%;";
            //这句直接修改body样式,让出目录的位置,不需要可注释掉
            document.body.style.cssText="margin-left:400px;"
        } else {
            e.setAttribute('title', 'expand');
            e.innerHTML = '[+]';
            var element = document.getElementById("outline_ol");
            element.style.cssText = "display:none;margin-left:14px;padding-left:14px;line-height:160%;";
            //这句直接修改body样式,让出目录的位置,不需要可注释掉
            document.body.style.cssText="margin-left:0px;"
        }
        e.blur();
        return false;
    }

	//创建节点 <li><a>目录名称</a> </li>
    function createTag(header) {
        var ele_li = document.createElement("li")

        var a = document.createElement("a");
        // set href for the TOC item
        //a.setAttribute("href", "#t" + i + header.tagName);
        a.setAttribute("href", "#" + header.textContent);
        // TOC item text
        a.innerHTML = header.textContent;
        ele_li.appendChild(a);
        return ele_li;
    }

    //获取上级容器
    function getParent(h) {
        for (var i = h - 1; i > -1; i--) {
            var n = nowEles[i];
            if (n[1]) {
                return n[1];
            }
            if (n[0]) {
                var ele_ols = document.createElement("ol");
                n[0].appendChild(ele_ols);
                n[1] = ele_ols;
                return n[1];
            }
        }
        return null;
    }

    //刷新最新容器,低于此元素的全部清空
    function refreshParent(h, ele_li) {
        nowEles[h]=[ele_li,null];
        for (var i = h+1; i < nowEles.length; i++) {
            nowEles[i]=null;
        }
    }
</script>