每行输入 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>';

小提琴链接：这里

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

JavaScript不是我最强的观点，但我试了一下，所以任何解决这个问题的帮助都会很棒。

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

您的段落大约有 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移到底部以加快速度。

Answer 3

您可以使用

.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;
}