読者です 読者をやめる 読者になる 読者になる

PHMPK.LOG

漫画、ゲーム、投資、育児

広告

スペース・カンマ・タブ区切りの文字列(csv, tsv, ...)からmarkdown形式の表を生成

はてなブログ プログラミング
広告

はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)

csvやtsvをそのままコピペしてブログに張ろうと思うと、スペース交じりの文字列になってしまうのが不満だったので、変換するためのスクリプトを作成しました。下の「Inputテキストエリア」に表にしたい部分をコピペして、「create table」ボタンを押すと、「Outputテキストエリア」に出力されます。

そのままでは使えませんから、2行目に|---|を列数分だけ挿入してください。やってることは、全角半角スペース・カンマ・タブなどを全部|に変換しているだけです。

自分で表を直打ちする場合も、|は打ちづらくてスペースの方が捗ります。

使用例

スペース区切りで、表にしたい文字列を入植します。

雑誌 出版社
週刊少年ジャンプ 集英社
週刊少年サンデー 小学館
週刊少年マガジン 講談社

変換すると、markdown形式の表に。

|雑誌|出版社|
|週刊少年ジャンプ|集英社|
|週刊少年サンデー|小学館|
|週刊少年マガジン|講談社|

1行目と2行目の間に、区切りを挿入します。

|雑誌|出版社|
|:---|:---|
|週刊少年ジャンプ|集英社|
|週刊少年サンデー|小学館|
|週刊少年マガジン|講談社|

markdown形式で張り付けると、以下の表に。

雑誌 出版社
週刊少年ジャンプ 集英社
週刊少年サンデー 小学館
週刊少年マガジン 講談社

markdownの表生成

Input




Output

広告

ソースコード

<form name="js">
<p>Input<br>
<textarea cols="50" rows="12" name="inputstr">
</textarea><br>
<br>
<input type="button" value="create table" onclick="ct()">
<input type="button" value="clear" onclick="cl()"><br>
<br>
<p>Output<br>
<textarea cols="50" rows="12" name="outputstr" readonly>
</textarea>
</form>

<script> // click "create table" button // \u3000は全角スペース function ct(){ // get input string var str=document.js.inputstr.value; var result = ""; var tempstr ="" var strarray = str.split(/\r\n|\r|\n/); for(var i = 0; i < strarray.length; i++){ tempstr = strarray[i].replace(/(^[,\u3000\t ]+)|([,\u3000\t ]+$)/g, ""); tempstr = tempstr.replace(/[,\u3000\t ]+/g, '|'); tempstr = "|" + tempstr + "|"; result += tempstr + "\r"; tempstr = ""; } // set output string document.js.outputstr.value = result; }

// click "clear" button function cl(){ document.js.inputstr.value = ""; document.js.outputstr.value = ""; } </script>

ソースコードの説明

HTML

複数行にわたって入力したいので、testareaを使用しています。Outputは編集しないので、readonly属性。2つのボタンにonclick属性で関数ctとclを定義しています。

JavaScript

var str=document.js.inputstr.value;
でInputテキストエリアの文字列を取得。

var strarray = str.split(/\r\n|\r|\n/);
文字列を改行で分割して、配列にしています。for文で各行に|置換・挿入を行っています。列数の整合性や最初から|が入っていた場合の処理はありません。

ループの最初に、各行の最初と最後でスペースを削除しています。u3000は全角スペースのUnicode。^,$はそれぞれ行の最初と最後を意味するエスケープシーケンス。replaceで正規表現を記述しています。

tempstr = strarray[i].replace(/(^[,\u3000\t ]+)|([,\u3000\t ]+$)/g, "");
行中のスペース置換は、以下のコード。

tempstr = tempstr.replace(/[,\u3000\t ]+/g, '|');

cl()は空文字列を挿入しているだけ。

関連エントリ

phmpk.hatenablog.com

phmpk.hatenablog.com

広告

10月14日発売の注目マンガ

風よ、万里を翔けよ(1)(プリンセス・コミックス)

風よ、万里を翔けよ(1)(プリンセス・コミックス)

広告