순수 JavaScript로 만드는 자동 목차 기능

다른 라이브러리의 도움 없이 순수 자바스크립트로 만든 자동목차 생성 기능입니다.

방식

본문 내용이 article-wrap클래스 안에 있다는 가정을 두고 본문에 있는 표제(heading)를 h1, h2, h3의 3단계까지 찾아서 각각의 id를 만들고, 목차에 항목을 추가하는 작업을 합니다. 중복을 피하고자 내부링크는 태그이름과 내용의 조합으로 만들었지만 같은 단계의 같은 제목인 경우 오작동을 피할 수 없습니다.

만든 목차는 ul리스트이며, toc-wrap 클래스를 가지고 있는 컨테이너 안에 들어가게 됩니다. 스킨편집등을 통해 별도로 제작해야 합니다.

소스코드

타입스크립트

// 본문 컨테이너와 목차 컨테이너 선택
var article_wrapper = <HTMLDivElement> document.querySelector(".article-wrap");
var toc_wrapper     = <HTMLDivElement> document.querySelector(".toc-wrap");

document.addEventListener("DOMContentLoaded",()=>{
    let toc: string = '';
    let headings = article_wrapper.querySelectorAll('H1, H2, H3');
    headings.forEach((heading: HTMLHeadingElement)=>{
        let title: string   = heading.innerHTML;
        let tagname: string = heading.tagName;
        // 내부 URL 생성
        let href: string = encodeURI(`${tagname}-${title}`);
        heading.id = href;
        toc += `<li class="${tagname}"><a href="#${href}">${title}</a></li>`;
    });
    toc_wrapper.innerHTML = `<ul>${toc}</ul>`;
});

자바스크립트(ES6)

// 본문 컨테이너와 목차 컨테이너 선택
var article_wrapper = document.querySelector(".article-wrap");
var toc_wrapper = document.querySelector(".toc-wrap");
document.addEventListener("DOMContentLoaded", () => {
    let toc = '';
    let headings = article_wrapper.querySelectorAll('H1, H2, H3');
    headings.forEach((heading) => {
        let title = heading.innerHTML;
        let tagname = heading.tagName;
        // 내부 URL 생성
        let href = encodeURI(`${tagname}-${title}`);
        heading.id = href;
        toc += `<li class="${tagname}"><a href="#${href}">${title}</a></li>`;
    });
    toc_wrapper.innerHTML = `<ul>${toc}</ul>`;
});

스타일시트

위의 스크립트를 사용하면 새로 생기는 요소를 꾸미기 위한 선택자 모음입니다.

.toc-wrap {
  /* 목차 컨테이너 */
}
.toc-wrap H1{
  /* 1단계 표제 <li> */
}
.toc-wrap H2{
  /* 2단계 표제 <li> */
}
.toc-wrap H3{
  /* 3단계 표제 <li> */
}