Question

I want to split a long text into smaller chunks, that will act as pages.

    var longText = document.getElementById('content').innerHTML;

    for (i=0; i<10; i++) {
            var page = longText.substring(i*100,(i+1)*100);
            document.write(page + "<br /><hr />");
    }

See it here on jsfiddle.

This code splits the text, but in a stupid way, cutting also words in half.
It would be far better, for example, creating substrings ending at the last space in a certain number of characters (count 100 characters, then go back to the last space).
How would you achieve it?

Second shot
Third shot

Answer 1

For those looking for a working answer:

<div id="long-text">Lorem ipsum [...]</div>


    <script>
var splitter = function(id) {
var longText = document.getElementById(id).innerHTML;

var pageLenght = 200;
var charsDone = 0;
var htmlBefore = "<p>";
var htmlAfter = "</p>";

while (charsDone <= longText.length && (pageLenght+charsDone)<longText.length) {
    var pageBox = longText.substr(lastSpace,pageLenght);
    var lastSpace = charsDone + pageBox.lastIndexOf(" ");
    var page = longText.substring(charsDone,lastSpace);
    document.write(htmlBefore + page  + htmlAfter);
    charsDone = lastSpace;
    }

    document.write(longText.substr(lastSpace,pageLenght));
}


splitter("#long-text");

You can easily use arrays instead of writing to document.
You will also want to set your html to your needs, do it in htmlBefore and htmlAfter.
See it in action here.