はてなのブログ記事内容に,自動で「ページ内目次」を生成するJSフォーム
「もくじジェネレータ for はてだ」

ブログ記事に,ページ内目次を生成します。JavaScriptでテキストを解析・加工しています。

元テキストをペースト:


   
子見出しを持つような親見出しに対して,「目次に戻る」リンクをつけない
末尾に「目次に戻る」リンクをつけない

実行結果(テキスト):



実行結果(HTMLプレビュー):




デバッグ用・動作ログ:




このプログラムの変更ログ:


14/12/29 新規作成,公開(紹介記事)

15/02/27 FIXED: 章のタイトル内に空白文字も許可




このプログラムの目次生成の仕様:

・記事の中に見出しがたくさんある場合,見出しを自動的にまとめて冒頭に目次を作りたい。

そして,記事トップから各見出しにワンタッチでジャンプしたい。

また,記事内の見出しから,記事のトップにワンタッチでジャンプしたい。

そうすれば,記事内の各見出しと記事冒頭の目次が相互にリンクしあう状況を作り出せる。

→それを自動でやってくれるのがこのフォーム。


・行頭に,はてなの「見出し記号」である ** があれば,章とみなす。


・**で始まる行の末尾に,HTMLコメントがあることを想定し,その内容がHTMLアンカー文字列となる。

例:
**(1)これは第一章です <!-- hoge -->
となっていれば,#hoge がその章へのジャンプ時のURL。


・記事内目次からは,各章にジャンプすることができるように,リンクが設置される。


・各章の末尾からは,記事内目次に戻ることができるように,「目次に戻る」リンクが設置される。


・「子見出しをもつような親見出し」とは,下記のようなもの。

**(0)

**(1) ※←これ。

**(1-1)

この場合,(0)と(1-1)の内容末尾には「目次へ戻る」リンクが必要。

しかし,(1)から(1-1)の間にある内容には,「目次へ戻る」リンクがいらないと思う。

(1)は,小見出しを持つような大見出しだが,(0)は小見出しを持たない親見出し。

そういった違いを判別してくれる。


・末尾の見出しの内容には,冒頭へ戻るリンクを設置しないオプションもある。

なぜかというと,末尾の章はたいてい「結論」「おまけ」などの内容なので。