こんにちは。「Javaを復習する初心者」です。
以前、JavaScriptを使ってtable要素のhtmlを生成するプログラムを書きました。そのときはinput要素を使っていたのですが、よく考えたらcsv形式のテキストをtable要素に変換する方が入力が簡単な気がしました。なので、今回はそのプログラムを書きました。
画面概要
以下が概要です。
処理概要
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, '&')
.replace(/</g,'<')
.replace(/>/g,'>')
.replace(/"/g,'"')
.replace(/'/g,''');
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を格納するだけでした。今回はいくつかの記号も表示するようにしました。「&」、「<」、「>」、「"」を実体参照に変換し、「'」を数値参照に変換しています。