HTML5アウトラインアルゴリズムとCSS（おそらくはJS）を使ってドキュメントナビゲーションを生成する方法はありますか？

Question

TeXが目次を生成できるように、HTML5アウトラインアルゴリズムとCSS（おそらくJS）を使ってドキュメントナビゲーションを生成する方法はありますか？

EDIT：HTMLドキュメントのリンクアウトラインを明示的に記述することなく表示する方法はありますか？私はTeXで\tableofcontentsのようなものを考えています。したがって、空の<nav>タグは、ページ内のセクションへのリンクの順序のないリストで埋められます。

Answer 1

ドキュメントの概要から自動化されたTocを作成するjavascriptの場合は、あなたはすぐに開発する必要があります。この

研究を[私は実際にはコピー＆ペーストの解決策を見つけていない]：

• http://code.google.com/p/h5o/
• http://code.google.com/p/h5o/downloads/detail?name=outliner.0.5.0.62.js&can=2&q=
• https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo
• https://developer.mozilla.org/en-US/docs/HTML/Sections_and_Outlines_of_an_HTML5_document?redirectlocale=en-US&redirectslug=Sections_and_Outlines_of_an_HTML5_document

この

• http://blog.tremily.us/posts/HTML5_outlines/
• http://projects.jga.me/toc/（あなたが適応する場合がありますjQueryプラグイン）

[ADDON]

は、ユーザー@unorからの推奨読書：github.com/DylanFM/outlinerは別のjavascriptがあり、このjsFiddleに送ってくれました起動。

Javascriptを

// See http://html5doctor.com/document-outlines/ 
// That article begins with info on HTML4 document outlines 
// This doesn't do that yet, it just handles the HTML5 stuff beneath in the article 
// I'm sure there are problems with handling that HTML5 stuff tho 

var headingElements = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'], 
sectioningElements = ['SECTION', 'ARTICLE', 'NAV', 'ASIDE']; 

function makeOutline(root) { 
var ar = [], 
    el = root.firstChild, 
    nested, hg; 
while(el) { 
    // If it's a sectioning element, create a new level in the outline 
    if(sectioningElements.indexOf(el.tagName) > -1) { 
     nested = makeOutline(el); 
     if(nested.every(function(i){ return typeof i !== 'string'; })) { 
      nested.unshift('Untitled ' + el.tagName.toLowerCase()); 
     } 
     ar.push(nested); 
    } else if(headingElements.indexOf(el.tagName) > -1) { 
     ar.push(el.textContent); 
    } else if(el.tagName === 'HGROUP') { 
     hg = undefined; 
     // Find the highest heading element within 
     // Use its text, otherwhise it's untitled 
     try { 
      headingElements.forEach(function(t) { 
       els = el.getElementsByTagName(t); 
       if(els.length) { 
        hg = els[0].textContent; 
        throw BreakException; 
       } 
      }); 
     } catch(e) {} 
     if(!hg) { 
      hg = 'Untitled hgroup'; 
     } 
     ar.push(hg); 
    } 
    el = el.nextSibling; 
} 
return ar; 
}; 

var outline = makeOutline(document.body); 

// This is just used for displaying the outline. 
// Inspect the outline variable to see the generated array: 
// console.log(outline); 

function describeOutline(outline) { 
var indentForDepth = function(depth) { 
    var str = ''; 
    for(i=depth;i>0;i--) { 
     str += '\t'; 
    } 
    return str; 
}, 
childrenAreStrings = function(ar, depth) { 
    var depth = (depth && (depth + 1)) || 1; 
    return ar.map(function(item) { 
     if({}.toString.call(item)=='[object Array]') { 
      return childrenAreStrings(item, depth).join('\n'); 
     } else { 
      return indentForDepth(depth) + '- ' + String(item); 
     } 
    }); 
}; 
// Make sure all items in ar are strings 
return childrenAreStrings(outline).join('\n');  
} 

(document.getElementsByTagName('pre')[0]).textContent = describeOutline(outline);