javascript - 如何使用 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删除元素的前导和尾随空格，然后在换行符处拆分。

演示: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^+ " .