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

あらかじめ日記

2chまとめサイト「ソノウソホント?」の雑記と、ブログで使えるスクリプトとかテクニックとか。その他、音楽やアニメ、漫画の話題とかも。

まとめサイト「ソノウソホント?」と「ムードもりあげ楽団」はこちら。

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

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

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

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

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


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


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

画面はこんな感じです。

f:id:allthewayfrom:20160302202024p:plain


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

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

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


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

allthewayfrom.blog.fc2.com



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

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