疫情期间在家完成了一套手册文档项目，在文档详情页需根据 H1、H2、… H6 标签生成目录结构的锚点定位。

本文示例中目录结构的样式是根据 css 中 .li1、.li2 … .li6 的 padding-left 来设置各个节点位置的。

JS 示例代码：

var treeArray = [];
var reg = /^[1-6]$/;

// 获取文本中所有 H 标签，并整理等级 level 标识
$('.content').children().each(function(index, element) {
    var tagName = $(this).get(0).tagName;
    if (tagName.substr(0, 1) == "H" && reg.test(tagName.substr(1, 1))) {
        treeArray.push({
            id: $(this).attr('id'),
            name: $(this).text(),
            level: tagName.substr(1, 1)
        });
    }
})
if (!treeArray.length) return false;

// 创建 array 数组，定位 H* 标签在当前组的位置 .li1 .li2 ... .li6
var array = [];
treeArray.map(function(item) {
    array.push(item['level']);
});

// 排序 array 数组
// 当 H1 下面无 H2，有 H3 标签的话，H3在当前组的二号位
array.sort(function(a, b) {return a - b});
$.unique(array);

// 获取文本中最大的 H 标签数组（H1 大于 H2）
var min_lavel = Math.min.apply(null, array);

// 生成目录结构 html 代码
var str = '<ul>';
for (var i = 0; i < treeArray.length; i++) {
    var ident = ($.inArray(treeArray[i].level, array)) + 1;
    str += '<li class="li'+ident+'" onclick="scrollToNode(\'#'+treeArray[i].id+'\');">'+treeArray[i].name+'</li>';
}
str += '</ul>';
$('.node').html(str);

目录结构的 html/css 代码示例：

// HTML
<div class="node">
    <ul>
        <li class="li1" onclick="scrollToNode('#文件操作');">文件操作</li>
        <li class="li2" onclick="scrollToNode('#删除文件');">删除文件</li>
        <li class="li2" onclick="scrollToNode('#复制文件');">复制文件</li>
        <li class="li2" onclick="scrollToNode('#压缩文件');">压缩文件</li>
        <li class="li1" onclick="scrollToNode('#vi--vim');">vi / vim</li>
    </ul>
</div>

// CSS
.node ul li.li1 {
    padding-left: 1rem;
}
.node ul li.li2 {
    padding-left: 2rem;
}
...
.node ul li.li6 {
    padding-left: 6rem;
}
// 根据个人需求，不建议设置到 .li6，一般到 .li3 .li4 即可

本文文档项目地址：http://lh1010.com/doc.html