目次(Wikiのような)を作成するブックマークレット

Wikiでは見出し「*」があると自動的に目次を作成してくれます。

それをブックマークレットでやってみました。

javascript:(
  function(f,t,v,a){
    t='<div style=\'background-color:beige;padding:6px;border:2px solid gray;margin:6px\'>';
    f=function(k,s,p){
      s='';
      p='&nbsp;';
      while(--k>0){s+=p+p+p+p}
      return s;
    };
    with(document)
    {
      for(i=0;i<all.length;i++)
      {
        with(all[i])
        {
          if(v=tagName.match(/^H(\d)$/i)){
            a=id='anchor_'+i;
            t+=f(v[1])+innerHTML.replace(/<\/?a[\s\S]*?>/gim,'').link('javascript:void(location.hash=\'#'+id+'\')')+'<br>';
          }
        }
      }
      body.innerHTML=t+'</div>'+body.innerHTML;
      // 戻るボタンを押した場合に目次が消えないように一度移動させている
      if(a)location.hash='#'+a;scrollTo(0,0);
    }
  }
)();

戻るボタン押しても動的に追加した目次が消えないように小細工してあります。
(最初に最後のリンクを押して戻ると目次が消えてしまいます・・・が、文字数が厳しいので)


一行にまとめたソース。
コピーしてアドレス欄へペーストしてみてください

blogなんかで使うとなかなか便利な気がします。


参考にさせていただいたページ
http://www-ui.is.s.u-tokyo.ac.jp/~kobayash/misc/bookmarklets.html の「Outline View 1」

英語で書いてありますが、書いているのは日本の方(東京大学の研究科の方)のようです。


2D BLOG
凄すぎです・・・