Christian Espinosa

I wanted to contribute to this and provide an up to date version of the original js code without the fragility of regex, onload and var.

document.addEventListener('DOMContentLoaded', function() {
  const tocContainer = document.getElementById('toc');
  const contentContainer = document.getElementById('contents');

  function generateTableOfContents() {
    const headings = contentContainer.querySelectorAll('h1, h2, h3, h4, h5, h6');
    let currentLevel = 0;
    let tableOfContents = '';

    headings.forEach((heading) => {
      const headingLevel = parseInt(heading.tagName.charAt(1));
      const headingText = heading.textContent.trim();
      const headingId = headingText.replace(/\s/g, '_');

      heading.id = headingId;

      if (headingLevel > currentLevel) {
        tableOfContents += '
';
      } else if (headingLevel < currentLevel) {
        tableOfContents += '
'.repeat(currentLevel - headingLevel);
      }

      tableOfContents += `
${headingText}
`;
      currentLevel = headingLevel;
    });

    if (currentLevel > 0) {
      tableOfContents += ''.repeat(currentLevel);
    }

    tocContainer.innerHTML = tableOfContents;
  }

  generateTableOfContents();
});

Best,

Christian