JavaScript/table2csv のバックアップ差分(No.6)
- バックアップ一覧
- 現在との差分 を表示
- 現在との差分 - 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に変換する #navi(../) RIGHT:Posted by [[aterai]] at 2012-07-25 * JavaScriptでHtmlのtable要素をCSVに変換する [#r3f6b8d9] #contents ** 概要 [#k7558714] Html の table 要素を CSV に変換する Bookmarklet です。colspan、rowspan で結合するセルがある場合は、同文字列を挿入しています。 - ブックマークレットなどに登録して表のあるページで実行 - table要素をダブルクリックすると、tableがtextareaに置換されて、内容がCSVになりコピー可能 -- 子要素にtableが存在する場合は、ダブルクリックに反応しない - textareaをダブルクリックすると、元のtableに戻る - <thead><tfoot>は気にしていない(例えば、tbodyの前にあるtfootが、そのまま先の行としてCSVになる) - <capthion>は無視 - <colgroup>のspan属性には未対応 **ソースコード [#sc8e81f4] #code{{ // ==UserScript== // @name <table> to CSV // @namespace http://terai.xrea.jp/ // @include http://* // @description Html table -> CSV(textarea) // @version 1.0.1 // @version 1.0.2 // ==/UserScript== (function() { var listener = function(e) { var tx = document.createElement("textarea"), tr = this.getElementsByTagName("tr"), csv = "", i,j,k,l,xoff, text, csvRow, cells, td, array = [], lenr = tr.length, lenc; function table2csv(table) { var tr = table.getElementsByTagName("tr"), csv = "",i,j,k,l,xoff, text, csvRow, cells, td, array = [], lenr = tr.length, lenc; for(i=0; i<lenr; i++) { if(array[i] == null) array[i] = []; //前行のセルのcolspanで、すでにこの行は初期化されている場合がある csvRow = ""; //前行のセルのcolspanで、すでにこの行は初期化されている場合がある if(array[i] == null) array[i] = []; cells = tr.item(i).cells; lenc = cells.length; for (j=0; j<lenc; j++) { td = cells.item(j); //タグの削除、タブをスペースに置換、両側trim、ダブルクオートの二重化 text = td.innerHTML.replace(/<.*?>/mg, "").replace(/\t/g," ").replace(/(^\s+)|(\s+$)/g, "").replace(/\"/, '""'); //前の行のrowspanですでにこのセルが使用されている場合はxoffだけ移動 xoff = 0; while(array[i][j+xoff] != null) { xoff++; } for(k=0; k<td.colSpan; k++) { array[i][j+xoff+k] = text; for(l=0; l<td.rowSpan; l++) { if(array[i+l] == null) array[i+l] = []; array[i+l][j+xoff+k] = text; } } } } lenr = array.length; lenc = array[0].length; for(k=0; k<lenr; k++) { csvRow = ""; for(l=0; l<lenc; l++) { //内容をダブルクオートで囲んでタブ区切りで追加 csvRow += "\t\""+array[k][l]+"\""; } if (csvRow != "") { if(csvRow != "") { csvRow = csvRow.substring(1,csvRow.length); } csv += csvRow+"\n"; } tx.value = csv; return csv; } var listener = function(e) { var tx = document.createElement("textarea"); tx.value = table2csv(this); //textareaのサイズは適当 tx.style.width = '80%'; tx.style.height = "240px"; tx.originalTable = this; this.tx = tx; this.parentNode.replaceChild(this.tx, this); tx.addEventListener("dblclick", function(e) { this.parentNode.replaceChild(this.originalTable, this); }, false); }, table = document.getElementsByTagName("table"), i = 0, len = table.length; for(; i<len; i++) { //tableがネストしている(子tableが存在する)場合は、クリックしても無視する if(table[i].getElementsByTagName("table").length>0) continue; table[i].addEventListener("dblclick", listener, false); } }()); }} ** Bookmarklet [#ab91c304] - 名前(任意) -- table2csv - アドレス(YUI Compressor で圧縮) javascript:(function(){var d=function(t){var q=document.createElement("textarea"),v=this.getElementsByTagName("tr"),o="",p,n,m,h,x,w,u,y,g,s=[],r=v.length,f;for(p=0;p<r;p++){if(s[p]==null){s[p]=[]}y=v.item(p).cells;f=y.length;for(n=0;n<f;n++){g=y.item(n);w=g.innerHTML.replace(/<.*?>/mg,"").replace(/\t/g," ").replace(/(^\s+)|(\s+$)/g,"").replace(/\"/,'""');x=0;while(s[p][n+x]!=null){x++}for(m=0;m<g.colSpan;m++){s[p][n+x+m]=w;for(h=0;h<g.rowSpan;h++){if(s[p+h]==null){s[p+h]=[]}s[p+h][n+x+m]=w}}}}r=s.length;f=s[0].length;for(m=0;m<r;m++){u="";for(h=0;h<f;h++){u+='\t"'+s[m][h]+'"'}if(u!=""){u=u.substring(1,u.length)}o+=u+"\n"}q.value=o;q.style.width="80%";q.style.height="240px";q.originalTable=this;this.tx=q;this.parentNode.replaceChild(this.tx,this);q.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)}}()); javascript:(function(){function e(x){var t=x.getElementsByTagName("tr"),o="",p,n,m,h,v,u,s,w,g,r=[],q=t.length,f;for(p=0;p<q;p++){if(r[p]==null){r[p]=[]}w=t.item(p).cells;f=w.length;for(n=0;n<f;n++){g=w.item(n);u=g.innerHTML.replace(/<.*?>/mg,"").replace(/\t/g," ").replace(/(^\s+)|(\s+$)/g,"").replace(/\"/,'""');v=0;while(r[p][n+v]!=null){v++}for(m=0;m<g.colSpan;m++){r[p][n+v+m]=u;for(h=0;h<g.rowSpan;h++){if(r[p+h]==null){r[p+h]=[]}r[p+h][n+v+m]=u}}}}q=r.length;f=r[0].length;for(m=0;m<q;m++){s="";for(h=0;h<f;h++){s+='\t"'+r[m][h]+'"'}if(s!=""){s=s.substring(1,s.length)}o+=s+"\n"}return o}var d=function(g){var f=document.createElement("textarea");f.value=e(this);f.style.width="80%";f.style.height="240px";f.originalTable=this;this.tx=f;this.parentNode.replaceChild(this.tx,this);f.addEventListener("dblclick",function(h){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)}}()); - アドレス(テスト用に[http://terai.xrea.jp/data/javascript/table2csv.js 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)}()); 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 [#tab5af2e] - rowspan, colspan |CENTER:100|CENTER:100|CENTER:100|CENTER:100|c |A|B|C|D|h |1|2|>|3| |4|>|5|6| |7|~|~|~| - footer ||ファイル数|サイズ|総行数|コメント行|実行数|空行数|コメント率|h |~合計|169|5291916|174370|77045|84804|12521|| |~平均||31313|1031|455|501|74|44.13%| ||||||||BGCOLOR(white):|c |>|>|>|>|>|>|>|CENTER:footer|f ** 参考リンク [#dc357958] - [http://marklets.com/CSV+from+HTML+tables.aspx CSV from HTML tables Bookmarklet | Bookmarklet Search Engine] - [http://www.codekeep.net/snippets/ec9f4704-b88a-486a-98f9-896de6afb021.aspx CodeKeep Snippet : Convert html table to csv (JavaScript)] ** コメント [#pfe243fb] - もっと良い物(rowspan, colspan に対応している)が、すでに沢山あるはずだと思うけど、検索しても見つからない…ので、作ってみた。自分に必要だった作業にはこれで十分だったけど、もうすこし修正した方がいいかもしれない…。 -- [[aterai]] &new{2012-07-24 (火) 17:59:18}; - FireFoxでも動くようにinnerTextを使用しないように修正。 -- [[aterai]] &new{2012-07-27 (金) 14:49:37}; #comment