Quelle bibliothèque ou framework javascript supporte la génération de "Table Of Content"?

Question

Je suis à la recherche d'une génération javascript à la volée "Table Of Contents" à partir de HTML (avec ancres).

Exemple:

<h1>First level1 heading</h1> 
lorem ipsum 
<h2>1a heading</h2> 
lorem ipsum 
<h2>1b heading</h2> 
lorem ipsum 
<h1>Second level1 heading</h1> 
lorem ipsum 

doit retourner quelque chose comme

First level1 heading 
    1a heading 
    1b heading 
Second level1 heading 

avec les lignes liées aux rubriques, ainsi que le code html Orignal doit être retourné avec des ancres insérés.

Y a-t-il quelque chose dans l'une des grandes librairies ou frameworks javascript?

Si aucun d'eux n'a, quelqu'un a vu un bon module JS à cet effet?

Answer 1

jQuery est votre ami, avec ce plugin: table of contents. La page d'accueil est http://code.google.com/p/samaxesjs/

Answer 2

Ceci est un problème très simple qui pourrait être résolu avec une fonction 10-20 lignes. Aucun cadre requis. Marchez le DOM avec getElementsByTagName ('h1'), getElementsByTagName ('h2') ou utilisez des expressions régulières. Le chargement de frameworks s'accompagne d'implications en termes de performances et de risques. Je suggère donc de ne pas en installer un pour des problèmes simples.

Answer 3

faire vous-même, je l'ai écrit il :), espérons qu'il aide

ajouter un élément div comme premier enfant de l'élément de corps et donner un identifiant comme « tableOfContents »

et ajoutez le script ci-dessous en dernier enfant de l'élément corporel

<script> 
    var el = document.getElementsByTagName("*") || []; 
    var toc = "<ul>"; 
    var lvl = 1; 
    for(var i=0;i<el.length;i++) 
    { 
     var ce = el[i]; 
     var tag = ce.tagName + ""; 
     var m = tag.match(/^h([1-5])$/i); 
     if(m) 
     { 
      var n = Number(m[1]); 
      if(lvl > n) 
      { 
       while(lvl-->n)toc+="</ul></li>"; 
      }else if(lvl < n){ 
       while(lvl++<n)toc+="<li style='list-style:none'><ul>"; 
      } 
      toc += '<li><a href="#toc_' + i + '">' + 
        (ce.innerText || ce.text()) + 
        '</a></li>'; 
      var ta = document.createElement("div"); 
      ta.innerHTML = '<a name="toc_' + i + '" />'; 
      ce.insertBefore(ta, ce.firstChild); 
     } 
    } 
    while(lvl-->1)toc+="</ul></li>"; 
    toc+="</ul>"; 
    document.getElementById("tableOfContents"). 
     innerHTML = toc; 
</script> 

ce script détecte chaque H (1 à 5) et génère la table des matières