How does one get div content line-by-line with Javascript?

Question

I need to process the content of a <div> line-by-line. A shortened piece of it looks like this:

<div id='aoeu'>
    Ammonium NH%4^+ <br />
    Copper(I) Cu^+ <br />
    Gold(I) Au^+ <br />
    Rubidium Rb^+ <br />
    Acetone CH%3COCH%3 <br />
    Glycerin C%3H%5(OH)%3 <br />
</div>

I need to work with each line individually with Javascript.

Are the "lines" separated by newline characters (`\n`)? Because if you want them to actually appear on separate lines in the browser you need to put `
` between. — nnnnnn, Jul 20 '12 at 03:38

nnnnnn · Accepted Answer · 2012-07-20T03:59:19.643

5

Assuming that the "lines" are separated by newline characters you can do something like this:

var el = document.getElementById("aoeu"),
    content = el.innerHTML.replace(/  |^\s+|\s+$/g,""),
    lines = content.split("\n");

That is, get the innerHTML of the element, remove the leading and trailing whitespace, and then split on the newline character.

Demo: http://jsfiddle.net/RG2WT/

EDIT: Now that you've added <br> elements (though I'd remove the trailing one):

var el = document.getElementById("aoeu"),
    content = el.innerHTML.replace(/^\s+|\s*(<br *\/?>)?\s*$/g,""),
    lines = content.split(/\s*<br ?\/?>\s*/);

That is, get the innerHTML, remove leading and traling whitespace and any trailing <br> element, and then split on each remaining <br> element plus the whitespace around it.

Demo: http://jsfiddle.net/RG2WT/3/

Either way lines will be an array with each element being one of your lines. Either way I'm removing leading and trailing white space so that, e.g., the first item will be "Ammonium NH%4^+" not " Ammonium NH%4^+ ".

edited Jul 20 '12 at 03:59

answered Jul 20 '12 at 03:43

nnnnnn

147,572
30
200
241

Why are you using a comma as a line terminator? – Christian Mann Jul 20 '12 at 03:45
@ChristianMann - I'm not. I'm splitting on a newline character. – nnnnnn Jul 20 '12 at 03:47
`document.getElementById("aoeu"),` Why is there a comma there and not a semicolon? – Christian Mann Jul 20 '12 at 03:50
@ChristianMann - Because the `var` statement goes for three lines and declares three variables, each separated by a comma. – nnnnnn Jul 20 '12 at 03:52
I actually ended up using the version of your code before you made it compatible with `
`, but it worked like a charm. Thank you to the Awnry Bear too, as his code also works. – RandomDuck.NET Jul 20 '12 at 04:02

The Awnry Bear · Answer 2 · 2012-07-20T03:49:22.143

1

I would first get the innerHTML and assign to a var. Take the var and split on br's to get an array, which you can do whatever you need with.

var contents = document.getElementById("aoeu").innerHTML;
var lines = contents.split("<br />");
// Do whatever you want with lines

edited Jul 20 '12 at 03:49

answered Jul 20 '12 at 03:41

The Awnry Bear

4,599
3
29
33

How does one get div content line-by-line with Javascript?

2 Answers2

Linked