每行放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移動到底部以加快速度。