You can distribute them as follows!
Adding up the number of characters and check if you have reached the value maximum defined in the function parameters. For this, simple conditions were applied..
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
}
test the code!
Great, it works! But...
The right thing to do (particularly speaking..) is partitioning/distributing by words and not by amount. For it can rather occur of, define divideTexto(texto, 100) and to reach the quantity of 100 characters, be, exactly the middle position of a word, that is to say:
"Lorem Ipsum is simply a simulation of typeface and print industry text, and comes" (100 characters)
"... printing and printing industry, and comes being used since the 16th century ..."
The same sense of using word-break: break-all of css in paragraphs that by the way is horrible the result, trying to fit as many characters as possible into each line. The opposite of the word-wrap: break-word that will break words that are too long by pushing them to a new line.
Therefore, it is more viable and recommended..
Distribute them by words, so the whole process will become more dynamic!
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>
Very good idea to separate by words, but I noticed that from the second column is printing only 24 words.
– André Cabral
@Andrécabral ready, corrected! It’s because in
else { posicao++ ...ended up "swallowing" a word, because it did not have the condition to validate whether it is less or equal to the defined amount, so the loop would only validate in the next execution! Good point, thank you!– gleisin-dev