Last active
June 3, 2021 09:18
-
-
Save aterai/5441202 to your computer and use it in GitHub Desktop.
Html の table 要素を CSV(character-separated values) に変換する Bookmarklet です。colspan、rowspan で結合するセルがある場合は、同文字列を挿入しています。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name <table> to CSV | |
| // @namespace https://ateraimemo.com/ | |
| // @include /^https?://.* | |
| // @description Html table -> CSV(textarea) | |
| // @grant none | |
| // @version 1.0.7 | |
| // ==/UserScript== | |
| //- [JavaScriptでHtmlのtable要素をCSVに変換する](//ateraimemo.com/JavaScript/table2csv.html) | |
| (function() { | |
| function table2csv(table) { | |
| var tr = table.getElementsByTagName('tr'), i, j, k, l, xoff, text, cells, td, array = [], lenr = tr.length, lenc; | |
| for(i=0; i<lenr; i++) { | |
| //前行のセルのcolspanで、すでにこの行は初期化されている場合がある | |
| array[i] = 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++; | |
| } | |
| array[i][j+xoff] = text; | |
| for(k=1; k<td.colSpan; k++) { | |
| array[i][j+xoff+k] = text; | |
| } | |
| for(l=1; l<td.rowSpan; l++) { | |
| array[i+l] = array[i+l] || []; | |
| for(k=0; k<td.colSpan; k++) { | |
| array[i+l][j+xoff+k] = text; //同文字列 '〃'; | |
| } | |
| } | |
| } | |
| } | |
| return convertArray2CSV(array); | |
| } | |
| function convertArray2CSV(array) { | |
| var lenr = array.length, | |
| lenc = array[0].length, | |
| csv = '', csvRow, k, l; | |
| for(k=0; k<lenr; k++) { | |
| csvRow = ''; | |
| for(l=0; l<lenc; l++) { | |
| //内容をダブルクオートで囲んでタブ区切りで追加 | |
| csvRow += '\t"'+array[k][l]+'"'; | |
| } | |
| if(csvRow != '') { | |
| csvRow = csvRow.substring(1,csvRow.length); | |
| } | |
| csv += csvRow+'\n'; | |
| } | |
| 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>は、無視する(例: <table role="presentation">, <table border="0"> | |
| if(table[i].getAttribute('role')==='presentation' || (table[i].getAttribute('border')==='0')) continue; | |
| table[i].addEventListener('dblclick', listener, false); | |
| } | |
| }()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment