https://shimaday.shimane-u.ac.jp/_themes/js/toc_generate.js

1
2function generateTOC() {
3  const toc = document.getElementById("TOC_List");
4  if (!toc) return;
5
6  toc.innerHTML = "";
7
8  const articles = document.querySelectorAll("article.Cont_box");
9
10  const headings = [];
11  articles.forEach(article => {
12    article.querySelectorAll("h2, h3, h4, h5, h6").forEach(h => {
13      headings.push(h);
14    });
15  });
16
17  if (headings.length === 0) return;
18
19  const rootUl = document.createElement("ul");
20  rootUl.classList.add("TOC-list"); 
21
22  toc.appendChild(rootUl);
23
24  const ulStack = [rootUl];
25
26  let currentLevel = parseInt(headings[0].tagName.substring(1));
27
28  headings.forEach((heading, index) => {
29    const level = parseInt(heading.tagName.substring(1));
30
31    if (!heading.id) {
32      heading.id = "toc-" + index;
33    }
34
35    while (level > currentLevel) {
36      const newUl = document.createElement("ul");
37      newUl.classList.add("toc-sublist"); 
38
39
40      let parentLi = ulStack[ulStack.length - 1].lastElementChild;
41      if (!parentLi) {
42        parentLi = document.createElement("li");
43        parentLi.classList.add("TOC-listItem fadeIn-up"); 
44
45        ulStack[ulStack.length - 1].appendChild(parentLi);
46      }
47
48      parentLi.appendChild(newUl);
49      ulStack.push(newUl);
50
51      currentLevel++;
52    }
53
54    while (level < currentLevel) {
55      ulStack.pop();
56      currentLevel--;
57    }
58
59    const li = document.createElement("li");
60
61    li.classList.add("TOC-listItem", "fadeIn-up");
62
63    const a = document.createElement("a");
64
65    a.textContent = heading.textContent.trim();
66    a.href = "#" + heading.id;
67
68    li.appendChild(a);
69    ulStack[ulStack.length - 1].appendChild(li);
70  });
71}
72
73document.addEventListener("DOMContentLoaded", generateTOC);