Você pode distribuí-los da seguinte forma!
Somando a quantidade de caracteres e verificar se atingiu o valor máximo definido nos parâmetros da função. Pra isso, foi aplicado condições simples..
const loremIpsum = "Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.";
const divideTexto = (texto, quantidade) => {
// verifica se o valor de entrada é menor que 0 ou menor que a quantidade definida, ou seja, não vai rolar nada aqui!
if (texto.length <= 0 || texto < quantidade)
return [texto]; // o jeito é retornar o valor total de entrada, pois não condiz com a quantidade total de caracteres.
var resultado = [], posicao = 0;
// é criado um array com cada trecho de palavras ["Lorem", "Ipsum", "é", ...]
var textoSplit = texto.split(/([\s\n\r]+)/);
// vai percorrer todo o array (textoSplit) criado
for (var i = 0; i < textoSplit.length; ++i) {
// instancia a entrada da matriz para uma string vazia caso ela seja null/undefined
if (!resultado[posicao]) resultado[posicao] = "";
// soma a quantidade total de caracteres e verifica se atingiu o valor máximo definido.
if ((resultado[posicao].length + textoSplit[i].length) <= quantidade) {
// vai armazenando até atingir o valor máximo
resultado[posicao] += textoSplit[i];
} else { // caso tenha atingido o valor máximo
posicao++; // incrementa uma nova posição, ou seja, uma nova chave (página) para o array
}
}
return resultado; // retorna o array com seus respectivos valores
}
teste o código!
Ótimo, funciona! Porém...
O correto a se fazer (particularmente falando..) é particionar/distribuir por palavras e não por quantidade. Pois pode ocorrer sim de, definir divideTexto(texto, 100)
e ao atingir a quantidade de 100 caracteres, ser, exatamente a posição do meio de uma palavra, isto é:
"Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sen" (100 caracteres)
"... indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI ..."
O mesmo sentido de usar word-break: break-all
do css em parágrafos que por sinal é horrível o resultado, tentando encaixar o maior número possível de caracteres em cada linha. O contrário do word-wrap: break-word
que quebrará palavras que são muito longas as empurrando para uma nova linha.
Portanto, é mais viável e recomendado..
Distribuí-los por palavras, assim, o processo todo ficará mais dinâmico!
const loremIpsum = "Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.";
const dividePalavras = (texto, quantidade) => {
if (texto.length <= 0 || texto.split(/[\s]+/).length < quantidade)
return [texto];
var resultado = [], posicao = 0;
var textoSplit = texto.split(/([\s\n\r]+)/);
for (var i = 0; i < textoSplit.length; ++i) {
if (!resultado[posicao]) resultado[posicao] = "";
// vai verificar se a quantidade de palavras condiz com a quantidade definida..
if (resultado[posicao].split(/[\s]+/).length <= quantidade) {
resultado[posicao] += textoSplit[i]; // vai armazenando até atingir a quantidade total
} else {
posicao++; // incrementa uma nova posição, ou seja, uma nova chave (página) para o array
if (!resultado[posicao]) resultado[posicao] = ""; // // instancia a entrada da matriz para uma string vazia caso ela seja null/undefined
resultado[posicao] += textoSplit[i]; // para não "engolir" nenhuma palavra, é adicionado para nova posição e assim sucessivamente..
}
}
return resultado;
}
// vai mapear todo o array para imprimir os resultados..
dividePalavras(loremIpsum, 25).map(trecho => {
document.querySelector(".container").innerHTML += `<div class="page">${trecho}</div>`;
});
.page {
width: 150px;
height: 300px;
border: 1px solid #000;
padding: 10px 15px;
float: left;
margin-left: 15px;
}
<div class="container"></div>