Qual biblioteca javascript ou Framework suporta “Tabela de Conteúdo” geração?

Question

Eu estou procurando um javascript na mosca "Tabela de conteúdos" geração de HTML (com âncoras).

Exemplo:

<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

deve retornar algo como

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

com as linhas ligadas aos títulos, e também o html orignal deve ser devolvido com âncoras inseridas.

Existe algo incluído em uma das bibliotecas javascript grande ou estruturas?

Se nenhum deles, tem alguém viu um bom módulo JS para esse fim?

Answer 1

jQuery é seu amigo, com este plugin: tabela de conteúdos . Home page é http://code.google.com/p/samaxesjs/

Answer 2

Faça você mesmo, eu escrevi :), espero que ajude

adicionar um elemento div como primeiro filho do elemento do corpo e dar um id como "TableOfContents"

e adicione o script abaixo como último filho do elemento do corpo

<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>

este script detecta cada H (1 a 5) e gera a sua tabela de conteúdo

Answer 3

Este é um problema muito simples que poderia ser resolvido com uma função 10-20 line. No quadro necessário. Caminhar o DOM com getElementsByTagName ( 'h1'), getElementsByTagName ( 'h2') ou usar expressões regulares. Carregando estruturas vem com implicações de desempenho e os riscos para que eu não sugerem a instalação de um para problemas simples.