How to Automatically Generate a Table of Contents for Articles Using PHP

This article guides you on how to automatically create a table of contents for your articles using PHP, utilizing the `DOMDocument` class to parse HTML and build a structured table of contents with headers.

In this article, we will learn how to create an automatic table of contents for an article using PHP. By using the generateTOC function, we will parse the HTML content, automatically add IDs to the headers, and generate a list of links to those headers.

PHP Code

<?php

function generateTOC($content) {
    // Load HTML content
    $dom = new DOMDocument();
    $contentType = '<meta http-equiv="Content-Type" content="text/html; charset=utf-8">';
    @$dom->loadHTML($contentType . $content);

    // Find all headers and add IDs
    $headers = $dom->getElementsByTagName('*');
    $toc = [];
    foreach ($headers as $header) {
        if (in_array($header->nodeName, ['h1', 'h2', 'h3', 'h4'])) {
            $id = str_slug($header->textContent);
            $header->setAttribute('id', $id);
            $toc[] = [
                'tag' => $header->nodeName,
                'text' => $header->textContent,
                'id' => $id
            ];
        }
    }

    // Generate TOC HTML with nested structure
    $tocHtml = buildNestedTOC($toc);
    if($tocHtml) {
        $tocHtml = '<div id="toc"><div id="toc-title"><strong>Table Of Contents</strong></div>' . $tocHtml . '</div>';
    }

    return $tocHtml . $dom->saveHTML();
}

function buildNestedTOC($toc) {
    $html = '';
    $prevLevel = 0;
    foreach ($toc as $item) {
        $currentLevel = (int) substr($item['tag'], 1);

        if ($prevLevel == 0) {
            $html .= '<ul>';
        } elseif ($currentLevel > $prevLevel) {
            $html .= '<ul>';
        } elseif ($currentLevel < $prevLevel) {
            $html .= str_repeat('</ul>', $prevLevel - $currentLevel);
        }

        $html .= '<li><a href="#' . htmlspecialchars($item['id']) . '">' . htmlspecialchars($item['text']) . '</a></li>';
        $prevLevel = $currentLevel;
    }
    $html .= str_repeat('</ul>', $prevLevel);

    return $html;
}

function str_slug($string) {
    // Convert string to slug (URL-friendly)
    $slug = preg_replace('/[^A-Za-z0-9-]+/', '-', $string);
    return strtolower(trim($slug, '-'));
}

// Example usage
$content = '<h1>Main Title</h1><h2>Sub Title 1</h2><h3>Sub Title 1.1</h3><

h2>Sub Title 2</h2>';
echo generateTOC($content);

?>

Detailed explanation of each line of code:

1. function generateTOC($content): Defines the generateTOC function that takes HTML content as input.
2. $dom = new DOMDocument();: Initializes a DOMDocument object to handle the HTML.
3. $contentType = '<meta http-equiv="Content-Type" content="text/html; charset=utf-8">';: Sets the content type information.
4. @$dom->loadHTML($contentType . $content);: Loads the HTML content into the DOMDocument object. The @ suppresses error messages if there are any.
5. $headers = $dom->getElementsByTagName('*');: Retrieves all elements in the document.
6. foreach ($headers as $header) {...}: Loops through each element and looks for headers (h1, h2, h3, h4).
7. if (in_array($header->nodeName, ['h1', 'h2', 'h3', 'h4'])) {...}: Checks if the element is a header.
8. $id = str_slug($header->textContent);: Generates an ID from the header content using the str_slug function.
9. $header->setAttribute('id', $id);: Adds the ID attribute to the header.
10. $toc[] = [...];: Adds the header information to the $toc array to create the table of contents.
11. $tocHtml = buildNestedTOC($toc);: Calls the buildNestedTOC function to create the HTML for the table of contents.
12. if($tocHtml) {...}: If there is a table of contents, creates the HTML for it.
13. return $tocHtml . $dom->saveHTML();: Returns the table of contents along with the original HTML content.

System requirements:

• PHP >= 7.0
• No additional libraries required.

Recommendations:

• The str_slug function can be adjusted to handle special characters as per your requirements.
• Creating a table of contents helps readers easily navigate and find information within lengthy articles.