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

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 твой друг, с этим плагином: table of contents. Главная страница http://code.google.com/p/samaxesjs/

Answer 2

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

Answer 3

сделать это самостоятельно, я написал это :), надеюсь, что это помогает

добавить Div элемент в качестве первого потомка элемента тела и дать идентификатор, как «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) и генерирует таблицу содержимого