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

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• JavaScript/table2csv へ行く。
  • 1 (2012-08-01 (水) 15:00:01)
  • 2 (2012-08-03 (金) 17:44:52)
  • 3 (2012-08-06 (月) 18:27:48)
  • 4 (2012-08-07 (火) 16:45:58)
  • 5 (2012-08-14 (火) 18:26:57)
  • 6 (2012-10-27 (土) 05:23:46)
  • 7 (2012-11-23 (金) 04:35:28)
  • 8 (2013-03-15 (金) 17:38:40)
  • 9 (2013-04-01 (月) 22:19:41)
  • 10 (2013-04-19 (金) 20:45:03)
  • 11 (2013-04-23 (火) 15:16:43)
  • 12 (2013-06-09 (日) 14:43:51)
  • 13 (2013-06-09 (日) 23:05:32)
  • 14 (2013-06-10 (月) 03:48:10)
  • 15 (2013-06-10 (月) 07:35:48)
  • 16 (2013-06-10 (月) 20:53:30)
  • 17 (2014-07-11 (金) 18:24:10)
  • 18 (2014-09-04 (木) 01:36:09)
  • 19 (2014-09-04 (木) 20:19:24)
  • 20 (2014-09-05 (金) 20:26:52)
  • 21 (2014-11-08 (土) 01:41:12)
  • 22 (2014-12-05 (金) 02:25:05)
  • 23 (2015-01-03 (土) 18:59:41)
  • 24 (2015-01-29 (木) 15:33:27)
  • 25 (2015-11-20 (金) 15:13:32)
  • 26 (2016-06-24 (金) 16:27:52)
  • 27 (2017-10-27 (金) 16:26:13)
  • 28 (2019-03-12 (火) 18:18:13)

TITLE:JavaScriptでHtmlのtable要素をCSVに変換する

JavaScriptでHtmlのtable要素をCSVに変換する

概要

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

• 区切り文字はタブ(TSV)
• ブックマークレットなどに登録して表のあるページで実行
• table要素をダブルクリックすると、tableがtextareaに置換されて、内容がCSVになりコピー可能
  • 子要素にtableが存在する場合は、ダブルクリックに反応しない
• textareaをダブルクリックすると、元のtableに戻る
• <thead><tfoot>は気にしていない(例えば、tbodyの前にあるtfootが、そのまま先の行としてCSVになる)
• <capthion>は無視
• <colgroup>のspan属性には未対応

ソースコード

Bookmarklet

• 名前(任意)
  • table2csv
• アドレス(YUI Compressor で圧縮)

  (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++){if(p[n]==null){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++){if(p[n+l]==null){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}c[b].addEventListener("dblclick",d,false)}}());

• アドレス(テスト用にtable2csv.jsを読み込む)

  javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="http://terai.xrea.jp/data/javascript/table2csv.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://terai.xrea.jp/data/javascript/table2csv.min.js?"+(new Date()).getTime();document.body.appendChild(s)}());

テスト用table

• rowspan, colspan

  A	B	C	D
  1	2	3
  4	5		6
  7

• footer

  	ファイル数	サイズ	総行数	コメント行	実行数	空行数	コメント率
  footer
  合計	169	5291916	174370	77045	84804	12521
  平均		31313	1031	455	501	74	44.13%

参考リンク

• CSV from HTML tables Bookmarklet | Bookmarklet Search Engine
• CodeKeep Snippet : Convert html table to csv (JavaScript)

コメント

• 表計算ソフトなどの場合は、tableタグをコピペするだけでspanを考慮した表の取込みが出来るので、このスクリプトを使って CSV, TSV に変換して読み込む意味はあまりないかも。ただ、自分の使いたいソフトには、Htmlでのtable取り込み機能がなく、csvを読み込んで表にする機能と、連続する同文字列セルの結合が可能なので作成してみました。取り込み作業は終わったのでもう必要ないけど、せっかくなので公開しておきます。 -- aterai 2012-07-24 (火) 17:59:18
• innerTextではなく innerHTML.replace(/<.*?>/mg, "") を使用して、FireFoxでも動作するように修正。 -- aterai 2012-07-27 (金) 14:49:37
• @version 1.0.3: セル中改行などに対応。 -- aterai 2013-04-01 (月) 22:23:12