Como crear un Índice automatizado Paso a Paso de un Documento HTML

▶

Te voy a mostrar cómo puedes crear un índice para tu documento HTML, es decir, una forma de navegar entre cada una de las secciones del contenido.

En este caso, configuré el índice para que tome en cuenta los elementos que van desde el <h1> hasta el <h3>, es decir, son esos niveles de encabezado los que se podrán utilizar como enlaces de navegación dentro del documento.

function generateIndex() {
    const indexContainer = document.createElement("div"); // Contenedor del índice
    indexContainer.innerHTML = "<h2>Índice</h2>";

    const list = document.createElement("ul");

    // Obtener todos los encabezados h1, h2, h3 en el orden en que aparecen
    const headers = document.querySelectorAll('.book-chapter h1, .book-chapter h2, .book-chapter h3');

    let chapterToken = 'chapter1.xhtml'
    headers.forEach((header, index) => {
        // Generar un ID único si no tiene

        // Crear el enlace al encabezado
        const listItem = document.createElement("li");
        const link = document.createElement("a");
        link.href = "#" + header.id;
        link.textContent = header.textContent;

        // Agregar clase según el tipo de encabezado (para estilos)
        if (header.tagName === "H1") listItem.classList.add("index-h1");
        if (header.tagName === "H2") listItem.classList.add("index-h2");
        if (header.tagName === "H3") listItem.classList.add("index-h3");

        listItem.appendChild(link);
        list.appendChild(listItem);
        document.querySelector('#indexSection').appendChild(list);
    });
}

En otra entrada, te comentaba como exportar e importar contenido HTML mediante Google Doc.

Es importante tener en cuenta que cada uno de estos elementos HTML debe tener un id único, ya que la navegación desde el índice funciona mediante enlaces que apuntan a esos id.

Es decir, el índice no hace más que crear enlaces internos del tipo href="#mi-id", por lo tanto, si el encabezado no tiene un id definido, no se podrá navegar hacia este enlace.

link.href = "#" + header.id;

La variable link le establecemos con el texto que, en este caso, sería el texto del <h1>, <h2> o <h3> —otra vez, usando textContent.
Y luego el id, que es el que va a usar como destino del enlace.

Aquí también le agregamos unas clases CSS. No serían estrictamente necesarias  pero, si en algún caso las necesitas, ahí las puedes colocar.
Yo, en este caso, sí se las coloqué. para poder agregar unas clases para la tabulación:

.index-h1 {
    margin-left: 0px;
    margin-top: 30px;
    font-weight: bold;
}

.index-h2 {
    margin-left: 30px;
}

.index-h3 {
    margin-left: 60px;
}

Después, lo agregamos al <li> con li.appendChild(link), y hacemos lo mismo con el <ul>: lo agregamos en alguna parte del documento, que en este caso es un contenedor div con la clase .index-section (así lo llamé). Ahí lo insertamos, y ya lo tenemos funcionando automáticamente.