Cleanup and Export

Quoted Field Parser

A small parser keeps commas inside quoted fields while splitting a CSV row into cells.

Program

CSV files often contain commas inside quoted values. A parser has to track quote state before splitting on commas.

quoted_field_parser.html
Visuals: captured from real browser rendering
<pre id="raw">name,notes
Ada,"ships, reviews"</pre>
<table id="grid"></table>
<script>
  const raw = document.querySelector("#raw");
  const grid = document.querySelector("#grid");
  const row = raw.textContent.trim().split("\n")[1];
  let quoted = false;
  const cells = row.split("").reduce((parts, char) => {
    if (char === "\"") quoted = !quoted;
    else if (char === "," && !quoted) parts.push("");
    else parts[parts.length - 1] += char;
    return parts;
  }, [""]);
  grid.innerHTML = "<tr>" + cells.map(cell => `<td>${cell}</td>`).join("") + "</tr>";
</script>

  1. Show a row with an embedded comma.

    The comma inside quotes must stay in the notes field.
    The comma inside quotes must stay in the notes field.

  2. Read the data row from the displayed CSV.

    The parser uses the same row shown in the pre block.
    The parser uses the same row shown in the pre block.

  3. Start outside quoted text.

    The parser tracks whether commas are delimiters.
    The parser tracks whether commas are delimiters.

  4. Toggle quote state at quote characters.

    Entering quotes changes how commas are interpreted.
    Entering quotes changes how commas are interpreted.

  5. Split only on unquoted commas.

    The comma inside notes is preserved.
    The comma inside notes is preserved.

  6. Render parsed cells.

    The final table shows name and notes as separate cells.
    The final table shows name and notes as separate cells.
quoted fields A quoted CSV field can contain commas that are data, not delimiters.
parser state The parser needs state to know whether it is inside quotes.