0

I have a task going on in which I need to reading the text within a p tag line by line (one line at a time). The p tag is contained within a div tag that has an id too. How can I read the text within the p tag one line at a time in JavaScript. I have tried the following, but it didn't help:-

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

The HTML does not contain any "\n" characters. When ever the line exceed the width of the div the content of the p tag goes to the next line. I want to read the whole content of this p tag on line at a time. That is the first element of the lines array is the first line of the content as seen in the browser and the second element is the second line and so on.

Corporal
  • 157
  • 3
  • 14

4 Answers4

2

Using pure jquery,

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

.text() will return the only text part in the tag.

you can iterate through each line using $.each()

Demo

Anoop Joshi P
  • 25,373
  • 8
  • 32
  • 53
  • Tried it too but the values returns me an array that has 3 elements. Two of which are empty elements and one of them contains the whole text of p tag. – Corporal Apr 04 '14 at 06:32
  • @Corporal i've edited the answer and provided a demo for that – Anoop Joshi P Apr 04 '14 at 06:40
  • @Corporal have you checked that? – Anoop Joshi P Apr 04 '14 at 07:09
  • I really appreciate your efforts. But its not what I need. Try out your demo with this HTML "

    An Article (abbreviated art) is a word (or prefix or suffix) that is used with a noun to indicate the type of reference being made by the noun. Articles specify grammatical definiteness of the noun, in some languages extending to volume or numerical scope.

    ". The alert should give me the lines as they can be seen in the results box. What I mean is the first alert should give me "An Article (abbreviated art) is a word (or prefix or suffix) that is used with a " and so on.     – Corporal Apr 04 '14 at 07:21
  • Kindly check your demo with the HTML I have provided in the previous comment. – Corporal Apr 04 '14 at 07:23
  • its a plain text. It doesnt have any newline in it. – Anoop Joshi P Apr 04 '14 at 07:41
0
var text = document.getElementById('wrap');
var text = text.textContent.split("/(<br \/>|\n/");
var node;
while(node = text.shift()) {
   // do something with node
    alert(node);
}
Ryan
  • 14,392
  • 8
  • 62
  • 102
0

You can use innerText property. 

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

You should not use innerHTML property since it will return the html equivalent. Hence all the new line characters will be substituted with <br> tags.

UdhayaGirish
  • 47
  • 4
0

I've made a fiddle for it. It remarks all words inside P#example as span with CSS classes LINE0, LINE1, .... Everything inside P must be plain text.

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));
    });

Then you can merge appropriate line with:

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

enter image description here http://jsfiddle.net/mainpart/6aWnH/

mainpart
  • 538
  • 5
  • 8