Какая библиотека или фреймворк javascript поддерживает генерацию «Таблицы содержимого»?

Question

Я ищу "на лету" генерацию "оглавления" javascript из HTML (с якорями).

Пример:

<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

Должен вернуть что-то вроде

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

со строками, связанными с заголовками, а также оригинальным html должен быть возвращен с вставленными якорями.

Есть ли что-то, включенное в одну из больших библиотек JavaScript или фреймворков?

Если ни у кого из них нет, кто-нибудь видел хороший модуль JS для этой цели?

Answer 1

jQuery - ваш друг с этим плагином: оглавление . Домашняя страница http://code.google.com/p/samaxesjs/

Answer 2

Сделай сам, я написал :), надеюсь, это поможет

добавление элемента div в качестве первого дочернего элемента элемента body и присвоение идентификатора в виде "tableOfContents"

и добавьте приведенный ниже скрипт как последний дочерний элемент элемента тела

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

этот скрипт обнаружит каждое значение H (от 1 до 5) и сгенерирует оглавление

Answer 3

Это очень простая проблема, которую можно решить с помощью функции 10-20 строк. Не требуется никаких рамок. Либо обходите DOM с помощью getElementsByTagName ('h1'), getElementsByTagName ('h2'), либо используйте регулярные выражения. Загрузка фреймворков связана с производительностью и рисками, поэтому я предлагаю не устанавливать фреймворк для простых проблем.