如何使用JavaScript解析包含数据逗号的CSV字符串?


93

我有以下类型的字符串

var string = "'string, duppi, du', 23, lala"

我想将字符串分成每个逗号的数组,但仅将单引号之外的逗号分隔。

我无法弄清楚分割的正确正则表达式...

string.split(/,/)

会给我

["'string", " duppi", " du'", " 23", " lala"]

但结果应该是:

["string, duppi, du", "23", "lala"]

有跨浏览器的解决方案吗?


总是单引号吗?带引号的字符串中是否有单引号?如果是这样,如何逃脱(反斜杠,加倍)?
Phrogz 2011年

如果双引号和单引号之间的引号字符可以完全互换(如JavaScript和HTML / XML代码)怎么办?如果是这样,则需要比CSV更广泛的解析操作。
austincheney

实际上是的,里面可以有一个单引号,用反斜杠转义就可以了。
汉斯,

值可以是双引号字符串吗?
ridgerunner 2011年

1
Papa Parse做得很好。使用JavaScript和Papa Parse解析本地CSV文件:joyofdata.de/blog/…–
Raffael

Answers:


214

免责声明

2014年12月1日更新:以下答案仅适用于一种非常特定的CSV格式。正如DG在评论中正确指出的那样,此解决方案不适合RFC 4180定义的CSV,也不适合MS Excel格式。此解决方案仅演示了如何解析一个(非标准)CSV输入行,其中包含混合的字符串类型,其中的字符串可能包含转义的引号和逗号。

非标准CSV解决方案

正如奥斯汀芬尼正确指出的那样,如果您希望正确处理可能包含转义字符的带引号的字符串,则确实需要从头到尾解析该字符串。此外,OP并未明确定义“ CSV字符串”的真正含义。首先,我们必须定义什么构成有效的CSV字符串及其各个值。

给定:“ CSV字符串”定义

为了便于讨论,“ CSV字符串”由零个或多个值组成,其中多个值之间用逗号分隔。每个值可以包括:

  1. 用双引号引起来的字符串。(可能包含未转义的单引号。)
  2. 用单引号引起来的字符串。(可能包含未转义的双引号。)
  3. 无引号的字符串。(不得包含引号,逗号或反斜杠。)
  4. 空值。(所有空白值都被认为是空的。)

规则/说明:

  • 引用的值可能包含逗号。
  • 带引号的值可以包含任何转义字符,例如'that\'s cool'
  • 包含引号,逗号或反斜杠的值必须加引号。
  • 包含前导或尾随空格的值必须加引号。
  • 反斜杠从所有\'中删除:用单引号引起来。
  • 反斜杠从所有\"中删除:用双引号引起来。
  • 未引用的字符串会修剪掉任何前导和尾随空格。
  • 逗号分隔符可能具有相邻的空格(将被忽略)。

找:

一个JavaScript函数,可将有效的CSV字符串(如上定义)转换为字符串值的数组。

解:

该解决方案使用的正则表达式很复杂。并且(IMHO)所有非平凡的正则表达式都应以自由间距的方式呈现,并带有大量注释和缩进。不幸的是,JavaScript不允许使用自由间距模式。因此,此解决方案实现的正则表达式首先以本机regex语法表示(使用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字符串中的一个值。重复应用它,直到找不到更多匹配项(并且所有值都已解析)。

正则表达式可从有效CSV字符串中解析一个值:

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.
"""

请注意,此正则表达式有一个不匹配的特殊情况值-当该值为空时的最后一个值。这种特殊的“空的最后一个值”案例将通过以下js函数进行测试和处理。

JavaScript函数来解析CSV字符串:

// 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"

这并不是真正的限制,因为任何子字符串都可以表示为单引号或双引号。还请注意,此解决方案仅代表以下一种可能的定义:“逗号分隔值”。

编辑:2014-05-19:添加了免责声明。 编辑:2014-12-01:将免责声明移至顶部。


1
@Evan Plaice-感谢您的好话。当然可以使用任何分隔符。只需将正则表达式中的每个逗号替换为所选的分隔符即可(但分隔符不能为空格)。干杯。
ridgerunner

2
@Evan Plaice-欢迎您将我的正则表达式用于任何您想要的目的。认可的记录会很好,但不是必须的。祝您插件顺利。干杯!
ridgerunner

1
太好了,这是项目code.google.com/p/jquery-csv。最终,我想向CSV添加扩展格式,称为SSV(结构化分隔值),该扩展格式就是包含元数据(即分隔符,分隔符,行尾等)的CSV格式。
Evan Plaice 2012年

1
非常感谢您的出色实现-我将其用作Node.js模块(csv-iterator)的基础。
mirkokiefer

3
我赞扬您的回答并详细说明了这一点,但应在某处指出您对CSV的定义不适合RFC 4180,这与CSV标准相距甚远,我可以说这是常识。特别是,这是在字符串字段中“转义”双引号字符的常规方法:"field one", "field two", "a ""final"" field containing two double quote marks"我尚未在此页面上测试过Trevor Dixon的答案,但这是解决RFC 4180定义的CSV的答案。
DG。

53

RFC 4180解决方案

这不能解决问题中的字符串,因为其格式不符合RFC 4180;可接受的编码是用双引号转义双引号。以下解决方案可与Google电子表格中的d / l CSV文件正确配合使用。

更新(3/2017)

解析单行将是错误的。根据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);


1
这是我的工作,而不是我的工作
WtFudgE

7

可在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/10https://pegjs.org/online上进行测试。

https://gist.github.com/3362830下载生成的解析器。


6

我有一个非常特定的用例,我想将单元格从Google表格复制到我的Web应用程序中。单元格可以包含双引号和换行符。使用复制和粘贴,单元格由制表符分隔,带有奇数数据的单元格用双引号引起来。我尝试了这个主要解决方案,即使用正则表达式,Jquery-CSV和CSVToArray的链接文章。 http://papaparse.com/ 是唯一开箱即用的软件。复制和粘贴与具有默认自动检测选项的Google表格无缝结合。


1
它的排名应该更高,切勿尝试滚动自己的CSV解析器,否则将无法正常工作 -特别是在使用正则表达式时。Papaparse 很棒 -使用它!
cbley

6

我喜欢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('|'));

4

人们似乎为此反对正则表达式。为什么?

(\s*'[^']+'|\s*[^,]+)(?=,|$)

这是代码。我也做了一个小提琴

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('|'));

3
嗯,您的正则表达式确实存在一些问题:它不能处理引号和逗号之间的空格,并且不支持2个连续的逗号。我已经用解决了这两个问题的代码更新了您的答案,并做了一个新的提琴:jsfiddle.net/xTezm/43
HammerNL '16

由于某种原因,我对您的代码的编辑被拒绝了,因为它“偏离了帖子的初衷”。很奇怪!?我只是拿走了您的代码,并修复了两个问题。这如何改变职位的意图!?无论如何...我只是为这个问题添加了新的答案。
HammerNL '16

您的回答中的好问题,@ FakeRainBrigand。我为正则表达式一概而论,因此,我承认这是完成这项工作的错误工具。
niry

2
@niry我的代码很糟糕。我保证在过去6年中我会变得更好:-p
Brigand

4

在列表中再添加一个,因为我发现以上所有内容都不够“ KISS”。

此代码使用正则表达式来查找逗号或换行符,同时跳过引用的项目。希望这是菜鸟可以自己读懂的东西。在splitFinder正则表达式有它(通过拆分三件事情|):

  1. , -查找逗号
  2. \r?\n -查找新行(如果出口商很好,则可能带有回车符)
  3. "(\\"|[^"])*?"-跳过引号中的所有内容,因为逗号和换行符在这里无关紧要。如果\\"在引用的项目中有一个转义的报价,它将被捕获,然后才能找到结束报价。

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);


如果我通过fileReader和结果读取文件:Id, Name, Age 1, John Smith, 65 2, Jane Doe, 30 如何根据指定的列进行解析?
bluePearl

获取2d数组后,删除第一个索引(它们是您的道具名称),然后遍历数组的其余部分,以每个值作为属性创建对象。它看起来像这样:[{Id: 1, Name: "John Smith", Age: 65}, {Id: 2, Name: "Jane Doe", Age: 30}]
Seph Reed

3

如果您可以将引号定界符设为双引号,则这是JavaScript代码以解析CSV数据的副本。

您可以先将所有单引号转换为双引号:

string = string.replace( /'/g, '"' );

...或者您可以在该问题中编辑正则表达式以识别单引号而不是双引号:

// Quoted fields.
"(?:'([^']*(?:''[^']*)*)'|" +

但是,这假设某些标记不清楚您的问题。根据我对您的问题的评论,请阐明标记的所有各种可能性。


2

我的回答假设您的输入反映了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


2

为了补充这个答案

如果您需要使用其他引号来解析转义的引号,则示例:

"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;
}

我发现解析仍然失败"jjj "" kkk""","123"
niry

2

没有正则表达式,可读,根据https://en.wikipedia.org/wiki/Comma-separated_values#Basic_rules

function csv2arr(str: string) {
    let line = ["",];
    const ret = [line,];
    let quote = false;

    for (let i = 0; i < str.length; i++) {
        const cur = str[i];
        const next = str[i + 1];

        if (!quote) {
            const cellIsEmpty = line[line.length - 1].length === 0;
            if (cur === '"' && cellIsEmpty) quote = true;
            else if (cur === ",") line.push("");
            else if (cur === "\r" && next === "\n") { line = ["",]; ret.push(line); i++; }
            else if (cur === "\n" || cur === "\r") { line = ["",]; ret.push(line); }
            else line[line.length - 1] += cur;
        } else {
            if (cur === '"' && next === '"') { line[line.length - 1] += cur; i++; }
            else if (cur === '"') quote = false;
            else line[line.length - 1] += cur;
        }
    }
    return ret;
}

2

在将CSV文件读取为字符串时,它在字符串之间包含空值,因此请逐行\ 0进行尝试。这个对我有用。

stringLine = stringLine.replace(/\0/g, "" );

2

当我必须解析CSV文件时,我也遇到过相同类型的问题。

该文件包含一个包含','的列地址。

将CSV文件解析为JSON之后,在将其转换为JSON文件时,我得到了键的不匹配映射。

我使用Node.js来解析文件和库,例如baby parsecsvtojson

文件示例-

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
}]

1

根据此博客文章,此功能应做到:

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的作品,但是看起来有些元素在它们前面有空格。


想象一下必须在正则表达式中执行所有这些操作。这就是为什么正则表达式有时并不真正适合解析的原因。
CanSpice

该解决方案根本行不通。给定原始测试字符串:"'string, duppi, du', 23, lala",此函数返回:["'string"," duppi"," du'"," 23"," lala"]
ridgerunner 2011年

@ridgerunner:对,你是。我已经编辑了答案和jsfiddle来修复该功能。基本上,我切换"'"'"',反之亦然。
CanSpice

这有所帮助,但是现在该函数错误地处理了带有双引号的单引号CSV字符串。例如,像这样反转原始测试字符串的引用类型:'"string, duppi, du", 23, lala'结果为:['"string',' duppi'.' du"',' 23',' lala']
ridgerunner 2011年

@CanSpice,您的评论启发我尝试使用RegEx。它没有那么多功能,但可以轻松添加。(如果您有兴趣的话,我的回答是在此页面上。)
Brigand

0

正则表达式可以解救!这几行代码根据RFC 4180标准使用嵌入的逗号,引号和换行符来正确处理带引号的字段。

function parseCsv(data, fieldSep, newLine) {
    fieldSep = fieldSep || ',';
    newLine = newLine || '\n';
    var nSep = '\x1D';
    var qSep = '\x1E';
    var cSep = '\x1F';
    var nSepRe = new RegExp(nSep, 'g');
    var qSepRe = new RegExp(qSep, 'g');
    var cSepRe = new RegExp(cSep, 'g');
    var fieldRe = new RegExp('(?<=(^|[' + fieldSep + '\\n]))"(|[\\s\\S]+?(?<![^"]"))"(?=($|[' + fieldSep + '\\n]))', 'g');
    var grid = [];
    data.replace(/\r/g, '').replace(/\n+$/, '').replace(fieldRe, function(match, p1, p2) {
        return p2.replace(/\n/g, nSep).replace(/""/g, qSep).replace(/,/g, cSep);
    }).split(/\n/).forEach(function(line) {
        var row = line.split(fieldSep).map(function(cell) {
            return cell.replace(nSepRe, newLine).replace(qSepRe, '"').replace(cSepRe, ',');
        });
        grid.push(row);
    });
    return grid;
}

const csv = 'A1,B1,C1\n"A ""2""","B, 2","C\n2"';
const separator = ',';      // field separator, default: ','
const newline = ' <br /> '; // newline representation in case a field contains newlines, default: '\n' 
var grid = parseCsv(csv, separator, newline);
// expected: [ [ 'A1', 'B1', 'C1' ], [ 'A "2"', 'B, 2', 'C <br /> 2' ] ]

除非另有说明,否则您不需要有限状态机。正则表达式,正向表达式和正向表达式使得正则表达式能够正确处理RFC 4180。

https://github.com/peterthoeny/parse-csv-js上克隆/下载代码


0

除了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调用,但是至少您不会重复代码,也不会包含任何外部库。

参考:http : //php.net/manual/zh/function.str-getcsv.php


0

您可以像下面的示例一样使用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>
    </body>

</html>

不要忘记在同一文件夹中包含papaparse.js。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.