csvやtsvをそのままコピペしてブログに張ろうと思うと、スペース交じりの文字列になってしまうのが不満だったので、変換するためのスクリプトを作成しました。下の「Inputテキストエリア」に表にしたい部分をコピペして、「create table」ボタンを押すと、「Outputテキストエリア」に出力されます。
そのままでは使えませんから、2行目に|---|
を列数分だけ挿入してください。やってることは、全角半角スペース・カンマ・タブなどを全部|
に変換しているだけです。
自分で表を直打ちする場合も、|
は打ちづらくてスペースの方が捗ります。
使用例
スペース区切りで、表にしたい文字列を入植します。
雑誌 出版社 週刊少年ジャンプ 集英社 週刊少年サンデー 小学館 週刊少年マガジン 講談社
変換すると、markdown形式の表に。
|雑誌|出版社| |週刊少年ジャンプ|集英社| |週刊少年サンデー|小学館| |週刊少年マガジン|講談社|
1行目と2行目の間に、区切りを挿入します。
|雑誌|出版社| |:---|:---| |週刊少年ジャンプ|集英社| |週刊少年サンデー|小学館| |週刊少年マガジン|講談社|
markdown形式で張り付けると、以下の表に。
雑誌 | 出版社 |
---|---|
週刊少年ジャンプ | 集英社 |
週刊少年サンデー | 小学館 |
週刊少年マガジン | 講談社 |
markdownの表生成
広告
ソースコード
<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()は空文字列を挿入しているだけ。
関連エントリ
広告
10月14日発売の注目マンガ
- 作者: 田中芳樹(原作),もとむらえり(作画)
- 出版社/メーカー: 秋田書店
- 発売日: 2016/10/14
- メディア: コミック
- この商品を含むブログ (1件) を見る