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. [Go+Copy]を押下する。
  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となる。

[Go+Copy]ボタンを押下して何も反応がないときは,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