Skip to content

Instantly share code, notes, and snippets.

@aterai
Last active June 3, 2021 09:18
Show Gist options
  • Select an option

  • Save aterai/5441202 to your computer and use it in GitHub Desktop.

Select an option

Save aterai/5441202 to your computer and use it in GitHub Desktop.
Html の table 要素を CSV(character-separated values) に変換する Bookmarklet です。colspan、rowspan で結合するセルがある場合は、同文字列を挿入しています。
// ==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