JavaScriptでHtmlのtable要素をCSVに変換する
Total: 25892
, Today: 3
, Yesterday: 2
Posted by aterai at
Last-modified:
概要
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(w){var s=w.getElementsByTagName("tr"),p,o,n,m,u,t,v,h,r=[],q=s.length,g;for(p=0;p<q;p++){r[p]=r[p]||[];v=s.item(p).cells;g=v.length;for(o=0;o<g;o++){h=v.item(o);t=h.innerHTML.replace(/<.*?>/mg,"").replace(/\t/g," ").replace(/(^\s+)|(\s+$)/g,"").replace(/\"/,'""');u=0;while(r[p][o+u]!=null){u++}r[p][o+u]=t;for(n=1;n<h.colSpan;n++){r[p][o+u+n]=t}for(m=1;m<h.rowSpan;m++){r[p+m]=r[p+m]||[];for(n=0;n<h.colSpan;n++){r[p+m][o+u+n]=t}}}}return e(r)}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='https://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='https://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
文字列に変換A B C D 1 2 3 4 5 6 7
"A" "B" "C" "D" "1" "2" "3" "3" "4" "5" "5" "6" "7" "5" "5" "6"
- 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)