【JavaScript】ランキング形式のテキストから、テーブルタグ化するスクリプトを作ってみた

要は以下のような感じです。

1位ああああ
2位いいいい
3位うううう
4位ええええ
5位おおおお

こんなプレーンなテキストがあったときに、

1位

ああああ

2位

いいいい

3位

うううう

4位

ええええ

5位

おおおお

こんな感じで、ボタン一つでテーブルタグ化するものです。
自分以外に需要があるのか不明ですが、なかなか便利です。

テーブル化といっても、列を２つ（ヘッダとデータのイメージ）に分けているだけ。
やっていることも簡単で、区切りになる分割文字を決めて、最初に見つかった位置から左右の列に振り分けて、タグを付加して出力しているだけです。

画面はこんな感じです。

f:id:allthewayfrom:20160302202024p:plain

基本的にタグはdivとdisplay:tableを使ってヘッダ部とデータ部を２つのtable-cellに分けてタグを入れ込むだけの作り。
文字数が固定の場合など、tableを使うまでもない場合はspanで囲むだけにするオプションも乗せています。

分割文字も、スペースやコロンなどのパターンに対応（変更も可）、区切り文字をヘッダ部とデータ部のどちらに含めるか、もオプション化です。

さらに、特定の文字が含まれていた場合の背景色の変更パターンも用意。
（追加があって、削除が無いのはご愛嬌）

↓こんな感じで活用しています。

allthewayfrom.blog.fc2.com

設定のインポートとエクスポートは実装途中、、と言うか出力（「保存して閉じる」の表示）って難しいんですね。
データを流し込んだリンクを作成して、「名前をつけて保存」で保存してもらう方法を試していますが、IEだとバージョンに依存しているのが曲者で事実上放置。笑

需要があれば、もう少し体裁を整えて公開ようかなとも思っているのですが（と言うほど、難しいことはやっていません）。。