How to parse CSV data embedded in an HTML page?

Question

I have a HTML page full of data separated by commas and each row ends in a   tag. In JavaScript I can get this from the DOM by asking for the innerHTML of the element containing the data.

My question is how to parse the innerHTML to get the data out from between the commas and start on the next line when it hits the   tag?

You can probably ignore the rest as that is my question above.

When I parse each line I will start a new object and put the data into it. I'm just not sure what to do with the innerHTML!

I did put the data through a CSVtoarray function I found but ended up with an array of one large array instead of an array of arrays for each line. I can work my way through this array creating objects from the data along the way but turning the innerHTML into a single array seems an unnecessary step when I could parse the data straight into object.

The data is put there via AJAX. I can change the format that the data comes in. As I said I have it separating data with commas and   tag at the end of the line. I do not know if this is stupid or not.

@josh3736 That's a very clean solution. Thanks for reading through and seeing through my stupidity. — Peter Bushnell
– Peter Bushnell, Commented May 10, 2012 at 18:31

Bergi · Accepted Answer · 2012-05-10 17:17:34Z

2

So, you want to csv-parse a file where newlines are indicated with   instead of \n? Just use that separator in your CSV-Parser then. Simple version:

text.split("<br />".map(function(line){ return line.split(","); })

You could also split by regular expressions, like

text.split(/\s*<br ?\/>\s*/)...

If you really habe the CSV data in a DOM, you could remove all the br-element and use the remaining (text) nodes as the lines-array.

answered May 10, 2012 at 17:17

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

josh3736 · Accepted Answer · 2012-05-10 17:28:09Z

You mention that you have control over the data you're getting via AJAX, and you're right that your current approach is not the best idea. First off, you should never try to parse HTML on your own, even if you think it's "simple" – different browsers will give you different innerHTML for the exact same content. Instead, use the DOM to find the information you're looking for.

That said, the correct approach here is just to return a JSON object from the server; you'll then have direct access to your data. Nearly every server-side language has some kind of facility to output JSON, and JavaScript can parse the JSON string natively¹ with JSON.parse().

From the server, return:

{items: [
    { id: 0, name: '...' },
    { id: 1, name: '...' },
    ...
]}

On the client (assuming jQuery),

$.getJSON('/path-to-script/', function(d) {
    for (var i = 0; i < d.items.length; i++) {
        d.items[i].id;
    }
});

^{1 - in modern browsers}

Elliot Bonneville · Accepted Answer · 2012-05-10 17:22:43Z

1

You could simply do this if you just want to "get the data out from between the commas":

yourElem.innerHTML = yourElem.innerHTML.split(",").join("");

Or if you just want an array of lines:

var lines = yourElem.innerHTML.split(",");

That'll return an array of lines with   elements intact. It's not clear if that's what you want, though.

answered May 10, 2012 at 17:22

Elliot Bonneville

53.6k23 gold badges101 silver badges125 bronze badges

Collectives™ on Stack Overflow

How to parse CSV data embedded in an HTML page?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related