18
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Markdownのテーブルでもセルの連結をしたかった

Last updated at Posted at 2017-12-21

nocd5/md2htmlというMarkdownを1ファイルのhtml(jsやcss、画像もbase64で埋め込み)に変換するツールをGo言語で書いて常用しているのですが、
常用すればするほど、セルを連結したい場合も出てきたので実験的に機能を追加してみました
(現在はdevelopブランチで有効)。

nocd5/md2htmlのMarkdownへの変換部分はrussross/blackfridayを使っていますが、
QiitaのMarkdownの吐くテーブルでも動くようなので
ここに残しておきます(デバッガのコンソールから下のjsを実行)。

シンタックスは検討中ですが、とりあえず

  • カラム方向は¦ broken bar (U+00A6)で区切られている場合
    • Vimの場合はCtrl+k Shift-b Shift-bで入力
  • ロウ方向は下が空白の場合

それぞれ結合するようにしています。

変換スクリプト

// translate column
var recol = new RegExp('\u00a6\\s*', 'g');
var trans_col = function(rows, elm) {
    [].forEach.call(rows, function(row) {
        var cells = row.querySelectorAll(elm);
        var ts = 0;
        Array.prototype.forEach.call(cells, function(cell) {
            var seps = cell.innerHTML.match(recol)
            if (seps != null && seps.length > 0) {
                cell.innerHTML = cell.innerHTML.replace(recol, '');
                ts += seps.length;
                cell.setAttribute('colspan', 1 + seps.length);
            }
        });
        for (var i = 1; i <= ts; i++) {
            cells[cells.length-i].outerHTML = '';
        }
    });
};
// translate row
var get_colpos = function(row, n) {
    var pos = 0;
    var i = 0;
    while (true) {
        var s = row[pos].getAttribute('colspan');
        i += s == null ? 1 : Number(s);
        if (i > n) {
            break;
        }
        pos++;
    }
    return pos;
};
var trans_row = function(rows, elm) {
    var datalist = [];
    var maxcol = 0;
    [].forEach.call(rows, function(row) {
        var cells = row.querySelectorAll(elm);
        datalist.push(cells);
        var col = 0;
        [].forEach.call(cells, function(cell) {
            var s = cell.getAttribute('colspan');
            col += s == null ? 1 : Number(s);
        });
        maxcol = Math.max(maxcol, col);
        i++;
    });
    for (var i = 0; i < maxcol; i++) {
        var span = 0;
        var root = get_colpos(datalist[0], i);
        for (var j = 1; j < datalist.length; j++) {
            var cur = get_colpos(datalist[j], i);
            if (datalist[j][cur] != null && datalist[j][cur].innerHTML == '') {
                span++;
                if (datalist[j - span] != null && datalist[j - span][root] != null) {
                    datalist[j - span][root].setAttribute('rowspan', 1 + span);
                    if (datalist[j][cur].parentNode != null) {
                        datalist[j][cur].outerHTML = '';
                    }
                }
            }
            else {
                root = get_colpos(datalist[j], i);
                span = 0;
            }
        }
    }
};
[].forEach.call(document.querySelectorAll('table'), function(tbl) {
    // thead
    var headrows = tbl.querySelectorAll('thead > tr');
    trans_col(headrows, 'th');
    trans_row(headrows, 'th');
    // tbody
    var rows = tbl.querySelectorAll('tbody > tr');
    trans_col(rows, 'td');
    trans_row(rows, 'td');
});

変換後のイメージ

1.png

2.png

3.png

4.png

Sampleテーブル

1 2 3 4 5 6 7 8 9
11 21 ¦ ¦ ¦ ¦ ¦ ¦ ¦
22 32 ¦ ¦ ¦ ¦ ¦ 92
33 43 ¦ ¦ ¦ 83
44 54 ¦ 74
55 65
¦ 56
¦ ¦ ¦ 67
¦ ¦ ¦ ¦ ¦ 78
¦ ¦ ¦ ¦ ¦ ¦ ¦ 89
1 2 3 4 5 6 7 8 9
¦ ¦ ¦ ¦ ¦ ¦ ¦ 81 91
12 ¦ ¦ ¦ ¦ ¦ 72 82
23 ¦ ¦ ¦ 63 73
34 ¦ 54 64
45 55
56 ¦
47 ¦ ¦ ¦
38 ¦ ¦ ¦ ¦ ¦
29 ¦ ¦ ¦ ¦ ¦ ¦ ¦
1 2 3 4
1 11 ¦ 31 ¦
2 ¦ ¦
3 13 ¦ 33 ¦
4 ¦ ¦
1 2 3 4 5 6
1 11 ¦ ¦ 41 ¦ ¦
2 ¦ ¦ ¦ ¦
3 ¦ ¦ ¦ ¦
4 14 ¦ ¦ 44 ¦ ¦
5 ¦ ¦ ¦ ¦
6 ¦ ¦ ¦ ¦

元Markdown

|  1 |  2 |  3 |  4 |  5 |  6 |  7 |  8 |  9 |
|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
| 11 | 21 ¦    ¦    ¦    ¦    ¦    ¦    ¦    |
|    | 22 | 32 ¦    ¦    ¦    ¦    ¦    | 92 |
|    |    | 33 | 43 ¦    ¦    ¦    | 83 |    |
|    |    |    | 44 | 54 ¦    | 74 |    |    |
|    |    |    |    | 55 | 65 |    |    |    |
|    |    |    |    ¦ 56 |    |    |    |    |
|    |    |    ¦    ¦    ¦ 67 |    |    |    |
|    |    ¦    ¦    ¦    ¦    ¦ 78 |    |    |
|    ¦    ¦    ¦    ¦    ¦    ¦    ¦ 89 |    |

|  1 |  2 |  3 |  4 |  5 |  6 |  7 |  8 |  9 |
|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
|    ¦    ¦    ¦    ¦    ¦    ¦    ¦ 81 | 91 |
| 12 |    ¦    ¦    ¦    ¦    ¦ 72 | 82 |    |
|    | 23 |    ¦    ¦    ¦ 63 | 73 |    |    |
|    |    | 34 |    ¦ 54 | 64 |    |    |    |
|    |    |    | 45 | 55 |    |    |    |    |
|    |    |    |    | 56 ¦    |    |    |    |
|    |    |    | 47 ¦    ¦    ¦    |    |    |
|    |    | 38 ¦    ¦    ¦    ¦    ¦    |    |
|    | 29 ¦    ¦    ¦    ¦    ¦    ¦    ¦    |

| № |  1 |  2 |  3 |  4 |
|:-:|:--:|:--:|:--:|:--:|
| 1 | 11 ¦    | 31 ¦    |
| 2 |    ¦    |    ¦    |
| 3 | 13 ¦    | 33 ¦    |
| 4 |    ¦    |    ¦    |

| № |  1 |  2 |  3 |  4 |  5 |  6 |
|:-:|:--:|:--:|:--:|:--:|:--:|:--:|
| 1 | 11 ¦    ¦    | 41 ¦    ¦    |
| 2 |    ¦    ¦    |    ¦    ¦    |
| 3 |    ¦    ¦    |    ¦    ¦    |
| 4 | 14 ¦    ¦    | 44 ¦    ¦    |
| 5 |    ¦    ¦    |    ¦    ¦    |
| 6 |    ¦    ¦    |    ¦    ¦    |
18
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?