login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > PHP > Handige scripts > table of contents (toc) generator

table of contents (toc) generator

Auteur: Thomas - 10 februari 2016 - 17:11 - Gekeurd door: Thomas - Hits: 7681 - Aantal punten: (0 stemmen)





De code omvat een functie: generateToC($in, $class='toc'). Deze genereert aan de hand van een HTML-tekst $in op grond van de daarin aanwezige headers (<h1> t/m <h9>) een zogenoemde table of contents, oftewel een inhoudsopgave in de vorm van een (geneste) bulleted list. Deze bulleted list wordt, inclusief een wrapper div met stijlklasse $class (standaard waarde "toc") geretourneerd als string.

Om deze table of contents te genereren moet wel aan een aantal randvoorwaarden voldaan worden:
- de structuur van de HTML in $in moet kloppen, oftewel, de headers mogen te allen tijde maar maximaal met 1 niveau toenemen (eerst een of meer <h1>'s voor hoofdstukken, met hierin weer nul of meer <h2>'s voor paragrafen en hierin weer nul of meer <h3>'s voor subparagrafen et cetera) zoals in een kloppend document het geval is
- de "bookmarks" waarmee aan deze headers gerefereerd wordt moeten al aanwezig zijn in de headers middels een id-attribuut; dit geeft je tevens de vrijheid om de bookmarks zelf een format te geven

Code:
De functie:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. function generateToC($in, $class='toc') {
  3.     // Regexp voor het vangen van headers (h1 t/m h9).
  4.     preg_match_all('#<h([1-9])([^>]*)>([^<]*)<\/h\1>#', $in, $matches);
  5.  
  6.     // Verzamel gegevens.
  7.     $toc = array();
  8.     // $matches[0][x] bevat totale header matches
  9.     // $matches[1][x] bevat de header nummers
  10.     // $matches[2][x] bevat alle overige data van de openingstag van een header, waaronder het id
  11.     // $matches[3][x] bevat de tekst tussen de header tags (de header titels)
  12.     foreach ($matches[1] as $k => $h) {
  13.         // abstraheer het id
  14.         $id = 'not found !';
  15.         if (preg_match('#id="([^"]*)"#', $matches[2][$k], $match) === 1) {
  16.             $id = $match[1];
  17.         } else {
  18.             // kon id niet uit de header tag vissen - doe iets?
  19.         }
  20.         $toc[] = array(
  21.             'header'    => $h,
  22.             'title'     => $matches[3][$k],
  23.             'bookmark'  => $id,
  24.         );
  25.     }
  26.  
  27.     // Bouw de ToC.
  28.     $currentDepth = 0;
  29.     ob_start(); //vang de HTML op
  30.         // Zet er een wrapper omheen
  31.         ?><div class="<?php echo $class ?>"><?php
  32.             foreach ($toc as $i => $data) {
  33.                 if ($i > 0 && $currentDepth == $data['header']) {
  34.                     // item op zelfde niveau, sluit eerst vorige tag
  35.                     ?></li><?php
  36.                 }
  37.                 if ($data['header'] > $currentDepth) {
  38.                     // we gaan altijd 1 niveau omhoog als je een hoger header nummer hebt, anders klopt je structuur niet
  39.                     ?><ul><?php
  40.                     $currentDepth++; // altijd 1 niveau hoger
  41.                 }
  42.                 if ($data['header'] < $currentDepth) {
  43.                     // we gaan weer een of meer niveaus omlaag, sluit deze tags
  44.                     while ($currentDepth > $data['header']) {
  45.                         ?></li></ul><?php
  46.                         $currentDepth--;
  47.                     }
  48.                     ?></li><?php
  49.                 }
  50.                 // Noot: ook de bookmarks zouden geldig moeten zijn
  51.                 ?><li><a href="#<?php echo $data['bookmark'] ?>"><?php echo $data['title'] ?></a><?php
  52.             }
  53.             // sluit het restant
  54.             while ($currentDepth > 0) {
  55.                 ?></li></ul><?php
  56.                 $currentDepth--;
  57.             }
  58.         // sluit de wrapper
  59.         ?></div><?php
  60.     // retourneer de gegenereerde HTML
  61.     return ob_get_clean();
  62. } // einde functie
  63. ?>


Voorbeeld van invoer:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <h1 id="1-introductie">1. Introductie</h1>
  2.     <h2 id="1.1-inleiding">1.1 Inleiding</h2>
  3.     <p>Blablabla</p>
  4.         <h3 id="1.1.1-subparagraaf">1.1.1 Subparagraaf</h3>
  5.         <p>Blablabla</p>
  6.     <h2 id="1.2-nogwat">1.2 Nog wat</h2>
  7.     <p>Lalalalal</p>
  8. <h1 id="2-meer">2. Meer</h1>
  9.     <h2 id="2-1-vervolg">2.1 Vervolg</h2>
  10.     <p>Lalalalal</p>
  11.         <h3 id="2-1-1-enzo">2.1.1 Enzo</h3>
  12.         <p>Lalalalal</p>
  13.             <h4 id="2-1-1-1-edoch">2.1.1.1 Edoch</h4>
  14.             <p>Lalalalal</p>
  15.         <h3 id="2-1-2-maar">2.1.2 Maar</h3>
  16.         <p>Lalalalal</p>
  17.     <h2 id="2-2-en-ook">2.2 En ook</h2>
  18.     <p>Lalalalal</p>
  19. <h1 id="3-dus">3. Dus</h1>
  20. <p>Lalalalal</p>


Voorbeeld van gegenereerde uitvoer (enigszins gefatsoeneerd):
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="toc">
  2.     <ul>
  3.         <li><a href="#1-introductie">1. Introductie</a><ul>
  4.             <li><a href="#1.1-inleiding">1.1 Inleiding</a><ul>
  5.                 <li><a href="#1.1.1-subparagraaf">1.1.1 Subparagraaf</a></li>
  6.             </ul></li>
  7.             <li><a href="#1.2-nogwat">1.2 Nog wat</a></li>
  8.         </ul></li>
  9.         <li><a href="#2-meer">2. Meer</a><ul>
  10.             <li><a href="#2-1-vervolg">2.1 Vervolg</a><ul>
  11.                 <li><a href="#2-1-1-enzo">2.1.1 Enzo</a><ul>
  12.                     <li><a href="#2-1-1-1-edoch">2.1.1.1 Edoch</a></li>
  13.                 </ul></li>
  14.                 <li><a href="#2-1-2-maar">2.1.2 Maar</a></li>
  15.             </ul></li>
  16.             <li><a href="#2-2-en-ook">2.2 En ook</a></li>
  17.         </ul></li>
  18.         <li><a href="#3-dus">3. Dus</a></li>
  19.     </ul>
  20. </div>
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Geen reacties (0)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.044s