如何使用JavaScript逐行获取div内容？

Question

我需要逐行处理<div>的内容。 缩短的部分看起来像这样：

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

我需要使用JavaScript单独处理每一行。

Answer 1

假设“行”由换行符分隔，您可以执行以下操作：

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

也就是说，获取元素的innerHTML ，删除innerHTML和结尾的空格，然后在换行符上进行拆分。

演示： http ： //jsfiddle.net/RG2WT/

编辑：现在您已经添加了<br>元素（尽管我将删除结尾的元素）：

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

也就是说，获取innerHTML ，删除前导和后继空格以及任何尾随<br>元素，然后拆分每个剩余的<br>元素及其周围的空格。

演示： http ： //jsfiddle.net/RG2WT/3/

无论哪种方式， lines都将是一个数组，每个元素都是您的一行。 无论哪种方式，我都将删除开头和结尾的空白，以便例如，第一项将是"Ammonium NH%4^+"而不是" Ammonium NH%4^+ " 。

Answer 2

我首先要获取innerHTML并将其分配给var。 取var并在br上拆分以获取一个数组，您可以使用它进行任何操作。

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