JavaScript/table2csv のバックアップ(No.25)

概要

Htmlの<table>要素をCSV(character-separated values)に変換するBookmarkletです。colspan、rowspanで結合するセルがある場合は、同文字列を挿入しています。

  • 区切り文字はタブ(TSV)
  • ブックマークレットなどに登録して表(<table>要素)のあるページで実行
  • <table>要素をダブルクリックすると、その内容をCSVに変換して<textarea>に文字列として挿入
    • 子要素に<table>が存在する場合は、ダブルクリックに反応しない
    • <table role="presentation">や<table border="0">のような、レイアウト目的の<table>は無視する
  • <textarea>をダブルクリックすると、元の<table>に戻る
  • <thead>や<tfoot>の扱いは適当(例えば、<tbody>の前にある<tfoot>が、そのまま先の行としてCSVになる)
  • <capthion>は無視
  • <colgroup>のspan属性には未対応

ソースコード

Bookmarklet

  • 名前(任意)
    • table2csv
  • アドレス(YUI Compressorで圧縮) 
    javascript:(function(){function f(t){var q=t.getElementsByTagName("tr"),n,m,s,r,u,h,p=[],o=q.length,g;for(n=0;n<o;n++){p[n]=p[n]||[];u=q.item(n).cells;g=u.length;for(m=0;m<g;m++){h=u.item(m);r=h.innerHTML.replace(/<.*?>/mg,"").replace(/\t/g," ").replace(/(^\s+)|(\s+$)/g,"").replace(/\"/,'""');s=0;while(p[n][m+s]!=null){s++}p[n][m+s]=r;for(k=1;k<h.colSpan;k++){p[n][m+s+k]=r}for(l=1;l<h.rowSpan;l++){p[n+l]=p[n+l]||[];for(k=0;k<h.colSpan;k++){p[n+l][m+s+k]=r}}}}return e(p)}function e(o){var m=o.length,n=o[0].length,h="",j,i,g;for(i=0;i<m;i++){j="";for(g=0;g<n;g++){j+='\t"'+o[i][g]+'"'}if(j!=""){j=j.substring(1,j.length)}h+=j+"\n"}return h}var d=function(h){var g=document.createElement("textarea");g.value=f(this);g.style.width="80%";g.style.height="240px";g.originalTable=this;this.tx=g;this.parentNode.replaceChild(this.tx,this);g.addEventListener("dblclick",function(i){this.parentNode.replaceChild(this.originalTable,this)},false)},c=document.getElementsByTagName("table"),b=0,a=c.length;for(;b<a;b++){if(c[b].getElementsByTagName("table").length>0){continue}if(c[b].getAttribute("role")==="presentation"||(c[b].getAttribute("border")==0)){continue}c[b].addEventListener("dblclick",d,false)}}());
  • アドレス(テスト用にtable2csv.user.jsを読み込む) 
    javascript:(function(){var s=document.createElement('script');s.charset='UTF-8';s.src='http://ateraimemo.com/data/javascript/table2csv.user.js?'+(new Date()).getTime();document.body.appendChild(s)}());
  • アドレス(テスト用にtable2csv.min.jsを読み込む) 
    javascript:(function(){var s=document.createElement('script');s.charset='UTF-8';s.src='http://ateraimemo.com/data/javascript/table2csv.min.js?'+(new Date()).getTime();document.body.appendChild(s)}());

ユーザースクリプト、拡張機能

  • FireFox
    • Greasmonkeyなどのユーザースクリプトとしてtable2csv.user.jsをドロップして追加
  • Chormeなど
    • dev版などで拡張機能タブにtable2csv.user.jsをドロップして追加

テスト用table

  • rowspan, colspan
    • Bookmarkletを実行、または拡張機能として追加した後、以下の表をダブルクリックするとCSV文字列に変換
      ABCD
      123
      456
      7
"A"	"B"	"C"	"D"
"1"	"2"	"3"	"3"
"4"	"5"	"5"	"6"
"7"	"5"	"5"	"6"
  • footer
    ファイル数サイズ総行数コメント行実行数空行数コメント率
    footer
    合計1695291916174370770458480412521
    平均3131310314555017444.13%

参考リンク

コメント