CSV文字列を二次元配列やtable要素ノードに変換するJavaScriptライブラリ (RFC 4180 準拠)。
RFC 4180 はCSVを規定していますが、以下の制約があります。
rfc4180.js の既定動作は RFC 4180 に準拠したモードになりますが、上の制約を取り除いた動作モードも用意しています。
RFC 4180 の後継規格があれば良かったのですが、rfc-index.txt によると RFC 4180 を上書きする規格はないようなので独自に拡張しました。
rfc4180.js を外部スクリプトに指定します。
<script type="text/javascript" src="./rfc4180.js"></script>コードを書きます。
var csv, csvString, records, table;
csvString = 'Number,String,Boolean\r\n"10","""string""","true"'; // CSV文字列を格納する
/*
new RFC4180([isLoose, separator])
RFC4180 をコンストラクタとして呼び出し、オブジェクトを生成する。
isLoose … true を指定すると Loose Mode (RFC4180非準拠) になり、日本語を含むCSVを扱えるようになります。
false を指定すると Strict Mode (RFC4180準拠) になり、日本語を含むCSVを扱えません。(オプション。規定値は false)
separator … 区切り文字を変更できます。(オプション。規定値は ",")
*/
csv = new RFC4180; // 引数を指定しなかったので、Loose Mode (RFC4180非準拠)。区切り文字は "," となる。
/*
isCSV(csvString)
CSV文字列がCSVフォーマットであれば、true を返す。
csvString … CSV文字列を指定します。
*/
alert(csv.isCSV(csvString)); // true
/*
toArray(csvString)
CSV文字列を二次元配列に変換する。
csvString … CSV文字列を指定します。
*/
records = csv.toArray(csvString); // CSV文字列を配列に変換
alert(records[0][0]); // Number
/*
toTable(csvString, doc [, useThead])
CSV文字列をtable要素ノードに変換する。
csvString … CSV文字列を指定します。
doc … documentオブジェクトを指定します。
useThead … true にすると1行目のセルをthead要素で括ります。(オプション。規定値は false)
*/
table = csv.toTable(csvString, document); // 第三引数を指定しなかったので、1行目がth要素にならない
document.body.appendChild(table); // table要素ノードをbody要素直下に挿入する
/*
fileToTable(url, doc, useThead, callbackfn [, options])
CSVファイルからtable要素ノードに変換する。
url … URL文字列を指定します。
doc … documentオブジェクトを指定します。
useThead … true にすると1行目のセルをthead要素で括ります。
callbackfn … table要素ノードへ変換後に実行されるコールバック関数を指定します。コールバック関数の第一引数にはtable要素ノードが格納されます。
options … その他の動作を決定するオプションとなるオブジェクトを指定します。(オプション)
options に指定できるプロパティ
{
method : リクエストメソッドを指定します。(規定値は "GET")
async : true を指定すると同期通信となります。(規定値は false)
data : リクエスト時に送信データを指定します。(規定値は null)
thisObject: コールバック関数実行時の this値 を指定します。(規定値は未指定。this値は [object DOMWindow] となります。)
}
*/
csv = new RFC4180(true); // Loose Mode (RFC4180非準拠)。日本語にマッチングする。
csv.fileToTable('http://example.com/test.csv', document, true, function (table) { // GETリクエストでCSVファイルを得て、table要素ノードに変換する
document.body.appendChild(table); // 変換後のtable要素ノードをbody要素直下に挿入する
});
/*
fileToArray(url, callbackfn [, options])
CSVファイルから二次元配列に変換する。
url … URL文字列を指定します。
callbackfn … table要素ノードへ変換後に実行されるコールバック関数を指定します。コールバック関数の第一引数には配列が格納されます。
options … その他の動作を決定するオプションとなるオブジェクトを指定します。(オプション)
options に指定できるプロパティ
{
method : リクエストメソッドを指定します。(規定値は "GET")
async : true を指定すると同期通信となります。(規定値は false)
data : リクエスト時に送信データを指定します。(規定値は null)
thisObject: コールバック関数実行時の this値 を指定します。(規定値は未指定。this値は [object DOMWindow] となります。)
}
*/
csv = new RFC4180(true); // Loose Mode (RFC4180非準拠)。日本語にマッチングする。
csv.fileToTable('http://example.com/test.csv', document, true, function (array) { // GETリクエストでCSVファイルを得て、table要素ノードに変換する
var doc, ul, li, a, textNode;
doc = document;
ul = doc.createElement('ul');
li = doc.createElement('li');
a = li.appendChild(doc.createElement('a'));
textNode = a.appendChild(doc.createTextNode(''));
// 「配列の1列目 = URL」「配列の2列目 = アンカー文字列」だとする
for (var i = 0, l = array.length; i < l; i++) {
a.href = array[i][0]; // 配列の1列目をhref属性値に
textNode.nodeValue = array[i][1]; // 配列の2列目をテキストノード値に
ul.appendChild(li.cloneNode(true));
}
doc.body.appendChild(ul);
});
サイズ削減したい場合は参考URLのコード圧縮ツールを利用してください。
下記のpre要素エリアからCSV文字列を読み取り、table要素ノードを挿入します。スクリプトコードはこのページの [ソースを表示] で確認してください。
ASCII文字のみで構成されるCSVファイル。
日本語を含むCSV文字列。
Boolean,String,Number,Array,Object
真偽値,文字列,数値,配列,オブジェクト
"""true"", ""false""","""文字列""",10,"[""test1"", ""test2"", ""test3""]","{a:""va"", b:""vb"", c:""vc""}"
,"[object String]",,"[object Array]",