Apply consecutive line numbering to lines in a paragraph: is this possible?

Question

Is it possible for jquery / javascript to insert a sequential line number at the beginning of all lines in a paragraph and, even better, follow the sequence until the next paragraphs?

I want to be able to quickly transfer students to specific lines of the article (in class settings). I have many articles to which I would like to apply this functionality, each of which has a different number of paragraphs.

I hoped this was possible, even on a responsive page, where the width of the paragraphs varies, depending on the display device, and the subsequent number of lines in each paragraph becomes larger or smaller.

Thanks in advance to everyone who can help.

Answer 1

Here is one approach that can fit your goals.

• Get the paragraph height of a single line for reference.
• For each paragraph, get the actual height and indicate the number of lines.
• Scroll through the lines and add numbering to absolute positions.

---

var refHeight = $("p").eq(0).height(); $("p").eq(0).remove(); var cnt = 1; $("p").each(function(index) { var pos = $(this).position(); var h = $(this).height(); var lines = h / refHeight; var lineHeight = h / lines; for (var i=pos.top ; i<pos.top+h ; i += lineHeight) { var num = $("<p>", { class: "number" }); num.text(cnt++); num.css("top", i); $(this).before(num); console.log(i); } }); 

(Fiddle)

---

Edit

If you want to use a fixed string length (so that everyone sees the same numbers), you could combine the above with the following:

• Separate paragraphs into lines.
• Wrap each line in span / div and add again.
• Block browser from text wrapping .

---

 $("p").each(function() { var text = $(this).text(); $(this).html(""); var i=0; while (i<text.length) { lineCharWidth = charWidth; while (i+lineCharWidth < text.length && text[i+lineCharWidth] != ' ') { lineCharWidth++; } var line = $("<span>", { class: "line" }).text(text.substr(i, lineCharWidth)); $(this).append(line).append("<br/>"); i += lineCharWidth; } }); 

(Fiddle)

Answer 2

Sure. Just make sure you encode your string and use it to split the text with a simple replacement.

Sample text:

 The quick brown fox jumped over the lazy dog 

for this, the actual line will be as follows:

 The quick\r\nbrown fox\r\njumped over\r\nthe lazy dog 

I think something like this will work (without document.write, and there may be performance improvements):

 var input = '\r\nThe quick\r\nbrown fox\r\njumped over\r\nthe lazy dog'; input = input.replace(/\r\n/g, '<div class=\'index\'></div>'); document.write(input); var idx = 0; $('.index').each(function(){ $(this).text(idx++); }); 

If I am not mistaken, this should write out the index number on each line. I can use some checks / debugs though :)

An example of how this is done, check out the Github diff pages.

Answer 3

Here is a solution that uses a function to separate paragraph text into space characters based on a given line length and then replace the text with <ol> consisting of <li> elements, each of which contains one line of text:

 var lineNum = 1; function splitLines(text, lineLen) { var words = text.split(/\s/g), line = '', lines = []; $.each(words, function(idx) { line += this + ' '; if (line.length > lineLen || idx == words.length - 1) { lines.push(line); line = ''; lineNum += 1; } }); return lines; } $('p').each(function() { var $p = $(this), $ol = $('<ol start="' + lineNum + '">'), lineLen = 50; $.each(splitLines($p.text(), lineLen), function(idx) { $ol.append('<li>' + this + '</li>'); }); $p.text('').append($ol); }); 

I am not sure about the support for the start <ol> attribute. It works in Chrome. Even so, I like to use the list item because it is, in my opinion, a little more semantically meaningful.