每行放100个字

Question

我遇到了一个问题，当我经历一段大约1000字等的单词时，它会假设用最大100个字符行长度的空格分隔单词。行长度应尽可能接近但不超过每行100个字符的限制。

问题是我只是分隔字符串（忽略单词）每100个字符。由于我四舍五入，这意味着在最后一次迭代中可能会遗留一些字符。

我想知道如果有人能帮助我解决这个问题，创造更好的功能来做到这一点

我的JS：

const paragraph = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque. Cras ipsum. Vestibulum pretium, lectus nec venenatis volutpat, purus lectus ultrices risus, a condimentum risus mi et quam. Pellentesque auctor fringilla neque. Duis eu massa ut lorem iaculis vestibulum. Maecenas facilisis elit sed justo. Quisque volutpat malesuada velit.", 

    lines = Math.round(paragraph.length/100); 

let line = 0; 

for (let i = 0; lines > i; i++) { 
    document.body.innerHTML += paragraph.slice(line, line + 100) + '<br>'; 

小提琴链接：Here

我想它的方式，是我们有N => 1000我需要能够创建由空格分隔的行，其中行长度> = 100

javascript a我最强烈的一点，但我放弃了，所以任何帮助解决这个问题都会很好。

Answer 1

只要行数不超过100个字符，就应该在空格上分割。 JSFiddle

var paragraph = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque. Cras ipsum. Vestibulum pretium, lectus nec venenatis volutpat, purus lectus ultrices risus, a condimentum risus mi et quam. Pellentesque auctor fringilla neque. Duis eu massa ut lorem iaculis vestibulum. Maecenas facilisis elit sed justo. Quisque volutpat malesuada velit.'; 

var result = ''; 
// While there's text left to parse 
while(paragraph.length > 100){ 
    // Find the last space character in the first 100 characters 
    var lastSpace = paragraph.substring(0,100).lastIndexOf(' '); 

    // Add the chunk to the results 
    result += paragraph.substring(0,lastSpace) + '<br/><br/>'; 

    // Remove the used chunk from the original body 
    paragraph = paragraph.substring(lastSpace + 1); 
} 

// Add on the last trailing bit 
result += paragraph; 

document.body.innerHTML = result; 

Answer 2

您可以使用.slice()和100

let chunks = paragraph.split(/\s/); 

for (let i = 0, n = 100; i < chunks.length; i += 100, n += 100) { 
    document.body.innerHTML += chunks.slice(i, n).join(" ") + '<br>'; 
} 

的jsfiddle递增传递给方法的参数https://jsfiddle.net/8gs78vra/18/

要获得获得100个字符，每行可以使用.match()，.lastIndexOf()和.slice()

const paragraph = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque. Cras ipsum. Vestibulum pretium, lectus nec venenatis volutpat, purus lectus ultrices risus, a condimentum risus mi et quam. Pellentesque auctor fringilla neque. Duis eu massa ut lorem iaculis vestibulum. Maecenas facilisis elit sed justo. Quisque volutpat malesuada velit."; 
 

 
let matches = paragraph.match(/.{100}|.+$/g); 
 

 
let len = []; 
 
     
 
for (let i = 0; i < matches.length; i++) { 
 
    let str; 
 
    if (matches[i][matches[i].length - 1] === " ") { 
 
    str = matches[i].trim(); 
 
    } else { 
 
    let index = matches[i].lastIndexOf(" "); 
 
    str = matches[i].slice(0, index).trim(); 
 
    if (matches[i + 1]) { 
 
     matches[i + 1] = matches[i].slice(index) + matches[i + 1]; 
 
    } else { 
 
     str = matches[i].slice(index + 1).trim(); 
 
    } 
 
    } 
 
    len.push(str.length); 
 
    document.body.innerHTML += str + "<br>" 
 
} 
 

 
document.body.innerHTML += "<br>string .length of each line " + len;

body { 
 
    white-space:pre; 
 
}

Answer 3

您的段落大约有1000个单词，您不能保证有100个字符的倍数，因此最后一行可能会稍微少一些。

您可能希望先将每个单词的段落分开，我们假设没有花哨的格式，并且在这种情况下仅由每个空格分隔。

var listWords = paragraph.split(" "); 

现在你要每行最多为100个字符，只是遍历字，并将其添加到订单，直到单词的长度过长

var line = ""; 
var lineLength = 0; 
var fullBody = ""; 
for (var i = 0; i < listWords.length; i++){ 
    if (lineLength + listWords[i].length > 100){ 
    fullBody += line + "<br>"; 
    line = ""; 
    lineLength = 0; 
    } 
    line += listWords[i] + " "; 
    lineLength += listWords[i].length + 1; 
} 
document.body.innerHTML += fullBody; 

这是一个快速解决方案，并确保它可以变得更好（不留下尾随空格），但它应该说明解决问题的方法。

根据Jonas w的建议，让我们将innerHTML移动到底部以加快速度。