1
0

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.

Slack 4スペースをタブ文字に変換

Last updated at Posted at 2018-05-10

Slackにレポートをincoming-webhook使ったボットで投稿したいとするじゃないですか。
タブ区切りとかでデータ送ればそのままスプレッドシートに貼れたりして便利だなあと思うじゃないですか。

でも…

Slackが勝手にタブ文字をスペース4個( )に変換しちゃうんですよ。

image.png

これではコピペしてシートに貼り付けてもうまいこといかない。
みんなも困ってるだろうと思ってググってみたけど、みんな困ってないみたいw

ならば我らがjsで解決しよう。

pre要素をクリックしたタイミングでスペース4字をタブ文字に変換するようにした。
Tampermonkeyべんり。

// ==UserScript==
// @name         Replace 4 spaces with a tab character for Slack.
// @namespace    M_Ishikawa
// @version      0.1
// @description  Slack 4スペースをタブ文字に変換
// @author       Masayuki Ishikawa
// @match        https://*.slack.com/*
// @grant        none
// ==/UserScript==

/**
 * https://qiita.com/M_Ishikawa/items/8d8db8d0c50039777f00
 * Slackはタブ文字を投稿するとスペース4字に変換してしまう。コピペで困る。
 * ので、要素をclickするとスペース4字をタブ文字に変換する。
 * <pre>のみで有効。
 */
(function() {
    'use strict';

    $(window).on('click', function(e) {
        if ($(e.target).prop("tagName") !== 'PRE' || $(e.target).attr('data-tab')) {
            return;
        }
        $(e.target).attr('data-tab', true);

        var str = $(e.target).html();
        var newStr = $(e.target).html().replace(/&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>/g, '\t');
        if (newStr != str) {
            $(e.target).html(newStr);

            // delete '```'
            $(e.target).removeAttr('data-stringify-prefix');
            $(e.target).removeAttr('data-stringify-suffix');
        }
    });
})();

これで

image.png

シートに貼り付けてみると

image.png

これこれ!

1
0
1

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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?