GenerateTOC

XHTML5の文章からsection要素を使った明示的なセクション見出し（section>h1-h6）を抽出して目次を作成する。紹介記事：GenerateTOC: Generator for Table of Contents from HTML Headings。

Input/Output Form

Input HTML
Output HTML
Result View

Usage

Brief

  1. ［Input HTML］に目次を生成したいHTMLコードを記入する。
  2. ［Convert］を押下する。
  3. ［Output HTML］に目次とリンクの作成のために見出し要素（h1-h6）のid属性が記入されたHTMLコードが出力される。また，［Result View］に見出し追加後のHTMLコードの描画結果を表示する。

Details

入力として，ルートにsection要素を持つXHTMLを与える。

空要素に終端スラッシュがなかったり，XMLで認められない構文を使っているHTMLを使う場合は，事前に例えば以下のサイトでHTMLをXHTMLに変換しておく。

HTML To XHTML Code Converter

目次には，section要素を使った明示的な見出しのみを対象とする。section要素を使わずに，h1-h6要素を単独で使った暗黙的な見出しは目次の対象外となる。

Sample of Target HTML
<section>
	<h1>Heading 1</h1>
	<section>
		<h2>Heading 2</h2>
	</section>
</section>

Sample of non-Target HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>

目次の生成は，2個目のsection要素（section>section）の直前に，見出しへのリンクが付けられた番号付きリスト（ol>li要素）を含むnav要素を挿入することで行う。

Place of Table of Contents
<section>
	<h1>Heading 1</h1>
	<!-- Here is the place table of contents is inserted by nav element. -->
	<section>
		<h2>Heading 2</h2>
	</section>
</section>

見出しへのリンクを作るために，section>h1-h6要素のid属性に，実行日時（YYYYMMDDThhmm形式）とテキストの空白をハイフン-に置換した値を上書きで設定する。

Example: <h1>Heading 1</h1> -> <h1 id="20170506T04:30_Heading-1">Heading 1</h1>

その際に，以下の文字はエスケープ処理が難しいのでid属性からは削除する。

~^`'"(){}\\|!&<>

目次の見出しは最初の目次対象の見出しと同じh1-h6要素を使い，テキストはTable of Contentsとなる。

［Convert］ボタンを押下して何も反応がないときは，HTMLをうまく処理できていない可能性が高い。例えば，ルートのsection要素の終了タグを記入し忘れるなど，［Input HTML］に記入したHTMLがXHTMLとして適切かどうか確認したほうがいい。

Sample Input/Output

Sample Input and Output

Input Output
Source 
<section>
  <h1>Title</h1>
  <section>
    <h2>Heading 1~^`"'(){}\|!&amp;&lt;&gt;[]=-+*/%;:.,?$#@_</h2>
    <section>
      <h3>Heading 1-1</h3>
    </section>
    <section>
      <h3>Heading 1-2</h3>
    </section>
  </section>
  <section>
    <h2>Heading 2</h2>
  </section>
</section>
 
<section xmlns="http://www.w3.org/1999/xhtml">
  <h1 id="20170505T0118_Title">Title</h1>
  <nav>
<h2>Table of Contents</h2><ol>
<li><a href="#20170505T0118_Heading-1[]=-+*/%;:.,?$#@_">Heading 1~^`"'(){}\|!&amp;&lt;&gt;[]=-+*/%;:.,?$#@_</a>
<ol>
<li><a href="#20170505T0118_Heading-1-1">Heading 1-1</a></li>
<li><a href="#20170505T0118_Heading-1-2">Heading 1-2</a></li>
</ol>
</li>
<li><a href="#20170505T0118_Heading-2">Heading 2</a></li>
</ol>

</nav>
<section>
    <h2 id="20170505T0118_Heading-1[]=-+*/%;:.,?$#@_">Heading 1~^`"'(){}\|!&amp;&lt;&gt;[]=-+*/%;:.,?$#@_</h2>
    <section>
      <h3 id="20170505T0118_Heading-1-1">Heading 1-1</h3>
    </section>
    <section>
      <h3 id="20170505T0118_Heading-1-2">Heading 1-2</h3>
    </section>
  </section>
  <section>
    <h2 id="20170505T0118_Heading-2">Heading 2</h2>
  </section>
</section>
View

Title

Heading 1~^`"'(){}\|!&<>[]=-+*/%;:.,?$#@_

Heading 1-1

Heading 1-2

Heading 2

Title

Heading 1~^`"'(){}\|!&<>[]=-+*/%;:.,?$#@_

Heading 1-1

Heading 1-2

Heading 2