java-beginner.com ブログ

プログラミングを学習するブログ(Javaをメインに)

csvからtable要素生成

投稿日:

最終更新日:2016年07月16日

アイキャッチ

こんにちは。「Javaを復習する初心者」です。

以前、JavaScriptを使ってtable要素のhtmlを生成するプログラムを書きました。そのときはinput要素を使っていたのですが、よく考えたらcsv形式のテキストをtable要素に変換する方が入力が簡単な気がしました。なので、今回はそのプログラムを書きました。

画面概要

以下が概要です。

初期画面 初期画面

カンマ区切りテキスト入力エリア
tableのHTMLに変換したいテキストをカンマ区切りで入力するテキストエリア。
HTML生成ボタン
「カンマ区切りテキスト入力エリア」に入力されたテキストを「HTMLテキストエリア」に表示し、その下にプレビューを表示する。
HTML表示テキストエリア
「HTML生成ボタン」によりHTMLが出力されるテキストエリア。
生成画面 「HTML生成ボタン」押下時の動作

  1. 「カンマ区切りテキスト入力エリア」に入力されたテキストをtableのHTMLに変換する。
  2. 変換したHTMLを「HTML表示テキストエリア」に出力する。
  3. 「HTML表示テキストエリア」の下にプレビューを表示する。

処理概要

body要素は以下のように記述しています。

bodyの内容

<textarea id="inputTextArea" rows="15" cols="25"></textarea><br>
<input type="button" value="HTML生成" onclick="createTableHtml()"><br>
<textarea id="outputTextArea" rows="15" cols="25"></textarea><br>

<div id="review"></div>

一番下のdiv要素は実際の表示をするための要素です。

JavaScritpは以下のように記述しました。

scriptの内容

    function createTableHtml() {
        var text = document.getElementById("inputTextArea").value;
        
        // サニタイズ
        text = text
            .replace(/&/g, '&amp;')
            .replace(/</g,'&lt;')
            .replace(/>/g,'&gt;')
            .replace(/"/g,'&quot')
            .replace(/'/g,'&#39');
        
        var tableHtml = "<table>\n";

        var lines = text.split("\n");
        for (var i = 0; i < lines.length; i++) {
            var line = lines[i];
            if (line === "") {
                continue;
            }
            tableHtml += "\t<tr>\n";
            var cells = line.split(",");
            for (var j = 0; j < cells.length; j ++) {
                tableHtml += "\t\t<td>" + cells[j] + "</td>\n";
            }
            tableHtml += "\t</tr>\n";
            

        }
        tableHtml += "</table>"

        // テキストエリアに出力
        document.getElementById("outputTextArea").value = tableHtml;
        
        // divに出力
        document.getElementById("review").innerHTML = tableHtml;
    }

変換処理は単純で、splitを使って改行で分割します。分割後はさらにsplitでカンマで分割します。それをtd要素にするようにtableのhtmlを生成すればできました。

プレビューの箇所はinnerHTMLというプロパティを使いました。あらかじめdiv要素を作り、そのinnerHTMLプロパティにtableのhtmlを格納するだけでした。今回はいくつかの記号も表示するようにしました。「&」、「<」、「>」、「"」を実体参照に変換し、「&#39」を数値参照に変換しています。