在JavaScript </p>中逐行读取HTML <p>标记内的文本

Question

我正在进行一项任务，我需要逐行读取p标签内的文本（一次一行）。 p标记包含在也具有id的div标记中。如何在JavaScript中一次读取p标签中的文本。我尝试了以下方法，但没有帮助： -

var text = document.getElementById('wrap');
var lines = text.innerHTML.split('\n');

HTML不包含任何“\ n”字符。当行超过div的宽度时，p标签的内容将转到下一行。我想一次在线阅读这个p标签的全部内容。这是行数组的第一个元素是浏览器中显示的第一行内容，第二行是第二行，依此类推。

Answer 1

使用纯jquery，

var values = $('#wrap').text().split("\n");
   $.each(values , function(i){
          alert(values[i]);
       });

.text()将返回标记中唯一的文本部分。

您可以使用$.each()

遍历每一行

Demo

Answer 2

var text = document.getElementById('wrap');
var text = text.textContent.split("/(<br \/>|\n/");
var node;
while(node = text.shift()) {
   // do something with node
    alert(node);
}

Answer 3

您可以使用innerText属性。

var node=document.getElementById('wrap');
var text = node.innerText || node.textContent ; //innerText is not supported in firefox
var lines = text.split("\n")

您不应该使用innerHTML属性，因为它将返回html等效项。因此，所有新行字符将被替换为＆lt; br＆gt;标签。

Answer 4

我为它做了一个 fiddle 。它将P＃示例中的所有单词注释为包含CSS类LINE0，LINE1，......的内容.P中的所有内容都必须是纯文本。

var words = $('#example').text().replace(/\t/g, ' ').replace(/\r/g, ' ').replace(/\n/g, ' ').replace(/\s+/g, ' ').split(' ');
$('#example').html('<span>'+words.join('</span> <span>')+'</span>');
$('#example span').each(
    function (i,e)
    {
        var offsettop = $(e).offset(); 
        if (lines.indexOf(offsettop.top)===-1) lines.push(offsettop.top);
        $(e).addClass('line'+lines.indexOf(offsettop.top));
    });

然后您可以合并适当的行：

var line = [];
$('#example span.line0').each(function(i,e){line.push($(e).html());});
console.log(line.join(' '));

http://jsfiddle.net/mainpart/6aWnH/