データにカンマが含まれているJavaScriptでCSV文字列を解析するにはどうすればよいですか？
私は次のタイプの文字列を持っています
var string = "'string, duppi, du', 23, lala"
文字列を各コンマで配列に分割しますが、単一引用符の外側のコンマのみです。
私は分割のための正しい正規表現を理解することはできません...
string.split(/,/)
くれます
["'string", " duppi", " du'", " 23", " lala"]
ただし、結果は次のようになります。
["string, duppi, du", "23", "lala"]
クロスブラウザソリューションはありますか？
免責事項
2014-12-01更新：以下の回答は、CSVの非常に特定の形式に対してのみ機能します。コメントでDGが正しく指摘したように、このソリューションはCSVのRFC 4180定義に適合せず、MS Excel形式にも適合しません。このソリューションは、文字列にエスケープされた引用符とコンマが含まれる可能性のある文字列型の混合を含む入力の1つの（非標準）CSV行を解析する方法を示しています。
非標準のCSVソリューション
Austincheneyが正しく指摘しているように、エスケープ文字を含む可能性のある引用符付き文字列を適切に処理する場合は、文字列を最初から最後まで解析する必要があります。また、OPは「CSV文字列」が実際に何であるかを明確に定義していません。最初に、有効なCSV文字列とその個々の値を構成するものを定義する必要があります。
指定：「CSV文字列」の定義
この説明の目的上、「CSV文字列」はゼロ以上の値で構成され、複数の値はコンマで区切られています。各値は次のもので構成されます。
- 二重引用符で囲まれた文字列。 （エスケープされていない一重引用符が含まれる場合があります。）
- 単一引用符で囲まれた文字列。 （エスケープされていない二重引用符が含まれる場合があります。）
- 引用符で囲まれていない文字列。 （引用符、コンマ、またはバックスラッシュを含めることはできません。）
- 空の値。 （すべての空白値は空と見なされます。）
ルール/注意：
- 引用符で囲まれた値にはコンマが含まれる場合があります。
- 引用符で囲まれた値には、エスケープされたものが含まれる場合があります。
'that\'s cool'。 - 引用符、コンマ、または円記号を含む値は引用符で囲む必要があります。
- 先頭または末尾の空白を含む値は引用符で囲む必要があります。
- バックスラッシュはすべてから削除されます：単一引用符で囲まれた値の
\'。 - バックスラッシュはすべてから削除されます：
\"二重引用符で囲まれた値。 - 引用符で囲まれていない文字列は、先頭および末尾のスペースが削除されます。
- カンマ区切りには、隣接する空白が含まれる場合があります（無視されます）。
見つける：
有効なCSV文字列（上記で定義）を文字列値の配列に変換するJavaScript関数。
解決：
このソリューションで使用される正規表現は複雑です。 （IMHO）all非自明な正規表現は、多くのコメントとインデントを使用して、フリースペースモードで表示する必要があります。残念ながら、JavaScriptはフリースペースモードを許可していません。したがって、このソリューションで実装される正規表現は、ネイティブの正規表現構文（Pythonの便利なr'''...''' raw-multi-line-string構文を使用して表現）で最初に提示されます。
最初に、CVS文字列が上記の要件を満たしていることを検証する正規表現を示します。
「CSV文字列」を検証する正規表現：
re_valid = r"""
# Validate a CSV string having single, double or un-quoted values.
^ # Anchor to start of string.
\s* # Allow whitespace before value.
(?: # Group for value alternatives.
'[^'\\]*(?:\\[\S\s][^'\\]*)*' # Either Single quoted string,
| "[^"\\]*(?:\\[\S\s][^"\\]*)*" # or Double quoted string,
| [^,'"\s\\]*(?:\s+[^,'"\s\\]+)* # or Non-comma, non-quote stuff.
) # End group of value alternatives.
\s* # Allow whitespace after value.
(?: # Zero or more additional values
, # Values separated by a comma.
\s* # Allow whitespace before value.
(?: # Group for value alternatives.
'[^'\\]*(?:\\[\S\s][^'\\]*)*' # Either Single quoted string,
| "[^"\\]*(?:\\[\S\s][^"\\]*)*" # or Double quoted string,
| [^,'"\s\\]*(?:\s+[^,'"\s\\]+)* # or Non-comma, non-quote stuff.
) # End group of value alternatives.
\s* # Allow whitespace after value.
)* # Zero or more additional values
$ # Anchor to end of string.
"""
文字列が上記の正規表現と一致する場合、その文字列は有効なCSV文字列であり（前述の規則に従って）、次の正規表現を使用して解析できます。次に、次の正規表現を使用して、CSV文字列の1つの値を照合します。一致するものがなくなるまで繰り返し適用されます（すべての値が解析されます）。
有効なCSV文字列から1つの値を解析する正規表現：
re_value = r"""
# Match one value in valid CSV string.
(?!\s*$) # Don't match empty last value.
\s* # Strip whitespace before value.
(?: # Group for value alternatives.
'([^'\\]*(?:\\[\S\s][^'\\]*)*)' # Either $1: Single quoted string,
| "([^"\\]*(?:\\[\S\s][^"\\]*)*)" # or $2: Double quoted string,
| ([^,'"\s\\]*(?:\s+[^,'"\s\\]+)*) # or $3: Non-comma, non-quote stuff.
) # End group of value alternatives.
\s* # Strip whitespace after value.
(?:,|$) # Field ends on comma or EOS.
"""
この正規表現が一致しない特別なケースの値が1つあることに注意してください。その値が空の場合の最後の値です。この特別な "empty last value"ケースは、後に続くjs関数でテストされ、処理されます。
CSV文字列を解析するJavaScript関数：
// Return array of string values, or NULL if CSV string not well formed.
function CSVtoArray(text) {
var re_valid = /^\s*(?:'[^'\\]*(?:\\[\S\s][^'\\]*)*'|"[^"\\]*(?:\\[\S\s][^"\\]*)*"|[^,'"\s\\]*(?:\s+[^,'"\s\\]+)*)\s*(?:,\s*(?:'[^'\\]*(?:\\[\S\s][^'\\]*)*'|"[^"\\]*(?:\\[\S\s][^"\\]*)*"|[^,'"\s\\]*(?:\s+[^,'"\s\\]+)*)\s*)*$/;
var re_value = /(?!\s*$)\s*(?:'([^'\\]*(?:\\[\S\s][^'\\]*)*)'|"([^"\\]*(?:\\[\S\s][^"\\]*)*)"|([^,'"\s\\]*(?:\s+[^,'"\s\\]+)*))\s*(?:,|$)/g;
// Return NULL if input string is not well formed CSV string.
if (!re_valid.test(text)) return null;
var a = []; // Initialize array to receive values.
text.replace(re_value, // "Walk" the string using replace with callback.
function(m0, m1, m2, m3) {
// Remove backslash from \' in single quoted values.
if (m1 !== undefined) a.Push(m1.replace(/\\'/g, "'"));
// Remove backslash from \" in double quoted values.
else if (m2 !== undefined) a.Push(m2.replace(/\\"/g, '"'));
else if (m3 !== undefined) a.Push(m3);
return ''; // Return empty string.
});
// Handle special case of empty last value.
if (/,\s*$/.test(text)) a.Push('');
return a;
};
入力と出力の例：
次の例では、中括弧を使用して{result strings}を区切ります。 （これは、先頭/末尾のスペースと長さゼロの文字列を視覚化するためです。）
// Test 1: Test string from original question.
var test = "'string, duppi, du', 23, lala";
var a = CSVtoArray(test);
/* Array hes 3 elements:
a[0] = {string, duppi, du}
a[1] = {23}
a[2] = {lala} */
// Test 2: Empty CSV string.
var test = "";
var a = CSVtoArray(test);
/* Array hes 0 elements: */
// Test 3: CSV string with two empty values.
var test = ",";
var a = CSVtoArray(test);
/* Array hes 2 elements:
a[0] = {}
a[1] = {} */
// Test 4: Double quoted CSV string having single quoted values.
var test = "'one','two with escaped \' single quote', 'three, with, commas'";
var a = CSVtoArray(test);
/* Array hes 3 elements:
a[0] = {one}
a[1] = {two with escaped ' single quote}
a[2] = {three, with, commas} */
// Test 5: Single quoted CSV string having double quoted values.
var test = '"one","two with escaped \" double quote", "three, with, commas"';
var a = CSVtoArray(test);
/* Array hes 3 elements:
a[0] = {one}
a[1] = {two with escaped " double quote}
a[2] = {three, with, commas} */
// Test 6: CSV string with whitespace in and around empty and non-empty values.
var test = " one , 'two' , , ' four' ,, 'six ', ' seven ' , ";
var a = CSVtoArray(test);
/* Array hes 8 elements:
a[0] = {one}
a[1] = {two}
a[2] = {}
a[3] = { four}
a[4] = {}
a[5] = {six }
a[6] = { seven }
a[7] = {} */
その他の注意事項：
このソリューションでは、CSV文字列が「有効」である必要があります。たとえば、引用符で囲まれていない値には、バックスラッシュまたは引用符を含めることはできません。次のCSV文字列は無効です。
var invalid1 = "one, that's me!, escaped \, comma"
これは、サブストリングが単一引用符または二重引用符で囲まれた値として表現される可能性があるため、実際には制限ではありません。また、このソリューションは、「カンマ区切り値」の可能な定義を1つだけ表していることに注意してください。
編集：2014-05-19：免責事項を追加しました。 編集：2014-12-01：免責事項を先頭に移動しました。
RFC 4180ソリューション
その形式はRFC 4180に準拠していないため、これは質問の文字列を解決しません。許容されるエンコードは、二重引用符で二重引用符をエスケープすることです。以下のソリューションは、GoogleスプレッドシートのCSVファイルで正常に機能します。
更新（2017年3月）
単一行の解析は間違っています。 RFC 4180によると、フィールドにはCRLFが含まれている可能性があり、これにより、任意のラインリーダーがCSVファイルを破損します。 CSV文字列を解析する更新バージョンは次のとおりです。
'use strict';
function csvToArray(text) {
let p = '', row = [''], ret = [row], i = 0, r = 0, s = !0, l;
for (l of text) {
if ('"' === l) {
if (s && l === p) row[i] += l;
s = !s;
} else if (',' === l && s) l = row[++i] = '';
else if ('\n' === l && s) {
if ('\r' === p) row[i] = row[i].slice(0, -1);
row = ret[++r] = [l = '']; i = 0;
} else row[i] += l;
p = l;
}
return ret;
};
let test = '"one","two with escaped """" double quotes""","three, with, commas",four with no quotes,"five with CRLF\r\n"\r\n"2nd line one","two with escaped """" double quotes""","three, with, commas",four with no quotes,"five with CRLF\r\n"';
console.log(csvToArray(test));古い回答
（単線ソリューション）
function CSVtoArray(text) {
let ret = [''], i = 0, p = '', s = true;
for (let l in text) {
l = text[l];
if ('"' === l) {
s = !s;
if ('"' === p) {
ret[i] += '"';
l = '-';
} else if ('' === p)
l = '-';
} else if (s && ',' === l)
l = ret[++i] = '';
else
ret[i] += l;
p = l;
}
return ret;
}
let test = '"one","two with escaped """" double quotes""","three, with, commas",four with no quotes,five for fun';
console.log(CSVtoArray(test));楽しみのために、配列からCSVを作成する方法を次に示します。
function arrayToCSV(row) {
for (let i in row) {
row[i] = row[i].replace(/"/g, '""');
}
return '"' + row.join('","') + '"';
}
let row = [
"one",
"two with escaped \" double quote",
"three, with, commas",
"four with no quotes (now has)",
"five for fun"
];
let text = arrayToCSV(row);
console.log(text);http://en.wikipedia.org/wiki/Comma-separated_values でRFC 4180の例を処理するPEG（.js）文法
start
= [\n\r]* first:line rest:([\n\r]+ data:line { return data; })* [\n\r]* { rest.unshift(first); return rest; }
line
= first:field rest:("," text:field { return text; })*
& { return !!first || rest.length; } // ignore blank lines
{ rest.unshift(first); return rest; }
field
= '"' text:char* '"' { return text.join(''); }
/ text:[^\n\r,]* { return text.join(''); }
char
= '"' '"' { return '"'; }
/ [^"]
http://jsfiddle.net/knvzk/1 または https://pegjs.org/online でテストします。
生成されたパーサーを https://Gist.github.com/33628 でダウンロードします。
Googleスプレッドシートからウェブアプリにセルをコピーするという非常に具体的なユースケースがありました。セルには二重引用符と改行文字を含めることができます。コピーと貼り付けを使用すると、セルはタブ文字で区切られ、奇数データのセルは二重引用符で囲まれます。この主なソリューション、regexp、Jquery-CSV、およびCSVToArrayを使用したリンク記事を試しました。 http://papaparse.com/ 箱から出して動作する唯一のものです。コピーと貼り付けは、デフォルトの自動検出オプションを備えたGoogleスプレッドシートでシームレスです。
リストにもう1つ追加すると、上記のすべてが "KISS"で十分ではないことがわかります。
これは正規表現を使用して、引用された項目をスキップしながらコンマまたは改行を検索します。願わくば、これはヌービが自分で読み通せるものであることが望まれます。 splitFinder正規表現には3つのことがあります（|で分割）：
,-コンマを検索します\r?\n-新しい行を検索します（エクスポーターがNiceの場合、キャリッジリターンが含まれる可能性があります）"(\\"|[^"])*?"-カンマと改行は関係ないため、引用符で囲まれたものはすべてスキップします。引用符で囲まれたアイテムにエスケープされた引用符\\"がある場合、引用符が見つかる前にキャプチャされます。
const splitFinder = /,|\r?\n|"(\\"|[^"])*?"/g;
function csvTo2dArray(parseMe) {
let currentRow = [];
const rowsOut = [currentRow];
let lastIndex = splitFinder.lastIndex = 0;
// add text from lastIndex to before a found newline or comma
const pushCell = (endIndex) => {
endIndex = endIndex || parseMe.length;
const addMe = parseMe.substring(lastIndex, endIndex);
// remove quotes around the item
currentRow.Push(addMe.replace(/^"|"$/g, ""));
lastIndex = splitFinder.lastIndex;
}
let regexResp;
// for each regexp match (either comma, newline, or quoted item)
while (regexResp = splitFinder.exec(parseMe)) {
const split = regexResp[0];
// if it's not a quote capture, add an item to the current row
// (quote captures will be pushed by the newline or comma following)
if (split.startsWith(`"`) === false) {
const splitStartIndex = splitFinder.lastIndex - split.length;
pushCell(splitStartIndex);
// then start a new row if newline
const isNewLine = /^\r?\n$/.test(split);
if (isNewLine) { rowsOut.Push(currentRow = []); }
}
}
// make sure to add the trailing text (no commas or newlines after)
pushCell();
return rowsOut;
}
const rawCsv = `a,b,c\n"test\r\n","comma, test","\r\n",",",\nsecond,row,ends,with,empty\n"quote\"test"`
const rows = csvTo2dArray(rawCsv);
console.log(rows);私はFakeRainBrigandの回答が好きでしたが、いくつかの問題があります。引用とコンマの間の空白を処理できず、2つの連続したコンマをサポートしていません。私は彼の答えを編集しようとしましたが、私の編集は明らかに私のコードを理解していないレビューアによって拒否されました。これが私のバージョンのFakeRainBrigandのコードです。フィドルもあります： http://jsfiddle.net/xTezm/46/
String.prototype.splitCSV = function() {
var matches = this.match(/(\s*"[^"]+"\s*|\s*[^,]+|,)(?=,|$)/g);
for (var n = 0; n < matches.length; ++n) {
matches[n] = matches[n].trim();
if (matches[n] == ',') matches[n] = '';
}
if (this[0] == ',') matches.unshift("");
return matches;
}
var string = ',"string, duppi, du" , 23 ,,, "string, duppi, du",dup,"", , lala';
var parsed = string.splitCSV();
alert(parsed.join('|'));
引用符の区切り文字を二重引用符にすることができる場合、これは CSVデータを解析するJavaScriptコード の複製です。
最初にすべての単一引用符を二重引用符に変換できます。
string = string.replace( /'/g, '"' );
...またはその質問の正規表現を編集して、二重引用符ではなく単一引用符を認識することができます：
// Quoted fields.
"(?:'([^']*(?:''[^']*)*)'|" +
しかし、これはあなたの質問から明確でない特定のマークアップを想定しています。あなたの質問に対する私のコメントごとに、マークアップのさまざまな可能性のすべてを明確にしてください。
この点で人々は正規表現に反対しているようです。どうして？
(\s*'[^']+'|\s*[^,]+)(?=,|$)
これがコードです。 fiddle も作成しました。
String.prototype.splitCSV = function(sep) {
var regex = /(\s*'[^']+'|\s*[^,]+)(?=,|$)/g;
return matches = this.match(regex);
}
var string = "'string, duppi, du', 23, 'string, duppi, du', lala";
var parsed = string.splitCSV();
alert(parsed.join('|'));
Csvを文字列に読み込んでいる間、文字列の間にnull値が含まれているので、試してみてください\行ごとに動作します。
stringLine = stringLine.replace( /\0/g, "" );
補完するために この答え
別の引用符でエスケープされた引用符を解析する必要がある場合、例：
"some ""value"" that is on xlsx file",123
使用できます
function parse(text) {
const csvExp = /(?!\s*$)\s*(?:'([^'\\]*(?:\\[\S\s][^'\\]*)*)'|"([^"\\]*(?:\\[\S\s][^"\\]*)*)"|"([^""]*(?:"[\S\s][^""]*)*)"|([^,'"\s\\]*(?:\s+[^,'"\s\\]+)*))\s*(?:,|$)/g;
const values = [];
text.replace(csvExp, (m0, m1, m2, m3, m4) => {
if (m1 !== undefined) {
values.Push(m1.replace(/\\'/g, "'"));
}
else if (m2 !== undefined) {
values.Push(m2.replace(/\\"/g, '"'));
}
else if (m3 !== undefined) {
values.Push(m3.replace(/""/g, '"'));
}
else if (m4 !== undefined) {
values.Push(m4);
}
return '';
});
if (/,\s*$/.test(text)) {
values.Push('');
}
return values;
}
私の答えは、一重引用符と二重引用符がエスケープされていない一致セットとして発生する場合、完全に交換可能なWebソースからのコード/コンテンツを反映していると仮定しています。
これには正規表現を使用できません。実際には、分割する文字列を分析するためにマイクロパーサーを作成する必要があります。この答えのために、文字列の引用部分をサブ文字列と呼びます。具体的には、文字列を横断する必要があります。次の場合を考えてください：
var a = "some sample string with \"double quotes\" and 'single quotes' and some craziness like this: \\\" or \\'",
b = "sample of code from JavaScript with a regex containing a comma /\,/ that should probably be ignored.";
この場合、文字パターンの入力を分析するだけでは、部分文字列の開始位置または終了位置がまったくわかりません。代わりに、引用文字が引用文字として使用されているかどうか、引用文字自体が引用されていないかどうか、および引用文字がエスケープに従っていないかどうかを判断するロジックを記述する必要があります。
このレベルの複雑さのコードを作成するつもりはありませんが、最近書いた、必要なパターンを持つものを見ることができます。このコードはコンマとは何の関係もありませんが、それ以外の場合は、独自のコードを作成するのに十分な有効なマイクロパーサーです。次のアプリケーションのasifix関数を調べます。
https://github.com/austincheney/Pretty-Diff/blob/master/fulljsmin.js
CSVファイルを解析する必要があるときにも、同じタイプの問題に直面しました。ファイルには、「、」を含むアドレス列が含まれています。
CSVをJSONに解析した後、JSONファイルに変換する際にキーのマッピングが一致しません。
ファイルとライブラリの解析に baby parse や csvtojson のようなノードを使用しました
ファイルの例-
address,pincode
foo,baar , 123456
JSONでベビーパースを使用せずに直接解析している間に、
[{
address: 'foo',
pincode: 'baar',
'field3': '123456'
}]
だから私はすべてのフィールドで他のデリミネーターでカンマ（、）を削除するコードを書きました
/*
csvString(input) = "address, pincode\\nfoo, bar, 123456\\n"
output = "address, pincode\\nfoo {YOUR DELIMITER} bar, 123455\\n"
*/
const removeComma = function(csvString){
let delimiter = '|'
let Baby = require('babyparse')
let arrRow = Baby.parse(csvString).data;
/*
arrRow = [
[ 'address', 'pincode' ],
[ 'foo, bar', '123456']
]
*/
return arrRow.map((singleRow, index) => {
//the data will include
/*
singleRow = [ 'address', 'pincode' ]
*/
return singleRow.map(singleField => {
//for removing the comma in the feild
return singleField.split(',').join(delimiter)
})
}).reduce((acc, value, key) => {
acc = acc +(Array.isArray(value) ?
value.reduce((acc1, val)=> {
acc1 = acc1+ val + ','
return acc1
}, '') : '') + '\n';
return acc;
},'')
}返される関数はcsvtojsonライブラリに渡すことができるため、結果を使用できます。
const csv = require('csvtojson')
let csvString = "address, pincode\\nfoo, bar, 123456\\n"
let jsonArray = []
modifiedCsvString = removeComma(csvString)
csv()
.fromString(modifiedCsvString)
.on('json', json => jsonArray.Push(json))
.on('end', () => {
/* do any thing with the json Array */
})[{
address: 'foo, bar',
pincode: 123456
}]
次の例のように papaparse.js を使用できます。
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSV</title>
</head>
<body>
<input type="file" id="files" multiple="">
<button onclick="csvGetter()">CSV Getter</button>
<h3>The Result will be in the Console.</h3>
<script src="papaparse.min.js"></script>
<script>
function csvGetter() {
var file = document.getElementById('files').files[0];
Papa.parse(file, {
complete: function(results) {
console.log(results.data);
}
});
}
</script>
同じフォルダーにpapaparse.jsを含めることを忘れないでください。
このブログ投稿 によれば、この関数はそれを行うべきです：
String.prototype.splitCSV = function(sep) {
for (var foo = this.split(sep = sep || ","), x = foo.length - 1, tl; x >= 0; x--) {
if (foo[x].replace(/'\s+$/, "'").charAt(foo[x].length - 1) == "'") {
if ((tl = foo[x].replace(/^\s+'/, "'")).length > 1 && tl.charAt(0) == "'") {
foo[x] = foo[x].replace(/^\s*'|'\s*$/g, '').replace(/''/g, "'");
} else if (x) {
foo.splice(x - 1, 2, [foo[x - 1], foo[x]].join(sep));
} else foo = foo.shift().split(sep).concat(foo);
} else foo[x].replace(/''/g, "'");
} return foo;
};
次のように呼び出します。
var string = "'string, duppi, du', 23, lala";
var parsed = string.splitCSV();
alert(parsed.join("|"));
このjsfiddle 一種の動作ですが、一部の要素の前にスペースが含まれているようです。
Ridgerunnerからの優れた完全な回答は別として、バックエンドがphpを実行するときの非常に簡単な回避策を考えました。
このphpファイルをドメインのバックエンドに追加します（例：csv.php）
<?php
session_start(); //optional
header("content-type: text/xml");
header("charset=UTF-8");
//set the delimiter and the End of Line character of your csv content:
echo json_encode(array_map('str_getcsv',str_getcsv($_POST["csv"],"\n")));
?>
ここで、この関数をjavascriptツールキットに追加します（クロスブラウザを作成するには、少し修正する必要があります）。
function csvToArray(csv) {
var oXhr = new XMLHttpRequest;
oXhr.addEventListener("readystatechange",
function () {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
console.log(JSON.parse(this.responseText));
}
}
);
oXhr.open("POST","path/to/csv.php",true);
oXhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=utf-8");
oXhr.send("csv=" + encodeURIComponent(csv));
}
Ajax呼び出しは1回かかりますが、少なくともコードを複製したり、外部ライブラリを含めたりすることはありません。