How to parse CSV data embedded in an HTML page?

I have a HTML page full of data separated by commas and each row ends in a <br /> 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 <br /> 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 <br /> tag at the end of the line. I do not know if this is stupid or not.

Solution

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}