每個X字符都加上break line

Question

我試圖用automaticaly來分隔每行的div內容，比方說50個字符。爲此，我有這個腳本，但它似乎並沒有工作。

https://jsfiddle.net/3sj2644z/4/

function breakline(e) { 
    var $this = $(this); 
    var length = $this.html().length; 
    if(length % 50 == 0) { 
     $this.val($this.html() + "\n"); 
} 

有什麼建議？

Answer 1

您可以long_string.replace(/(.{50})/g, "$1<br>");

var long_string = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel vestibulum orci. Vestibulum pulvinar sapien nec massa molestie volutpat. Duis iaculis arcu placerat odio tempor, vel venenatis nisi congue. Sed fermentum felis sed nulla mollis, at rhoncus velit condimentum. Phasellus luctus lorem justo, cursus tempus tortor laoreet quis. Pellentesque odio nibh, interdum vel ultrices sit amet, vestibulum vitae libero. Aenean vel porta quam. Morbi tincidunt diam vulputate, varius mi vel, interdum justo. Maecenas justo neque, mollis in ante ac, suscipit rhoncus sem.Vivamus vestibulum sapien mauris, quis mollis nunc auctor a. Phasellus rutrum turpis et rutrum semper. Aliquam tincidunt, orci quis convallis rutrum, lectus sapien vulputate dolor, in fermentum sem nisi et nisl. In consectetur purus risus, vitae tempor ante fermentum a. Integer ut accumsan nibh. Donec sagittis justo quam, sollicitudin vehicula leo dapibus vel. Maecenas a augue non mauris blandit accumsan. Vivamus semper fermentum nulla, quis laoreet velit egestas sit amet. Mauris ut euismod risus. Donec sit amet cursus sapien. Cras molestie arcu aliquet ipsum posuere volutpat vel id erat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean justo libero, sagittis ut facilisis vel, hendrerit non dolor. Fusce egestas elit nec mauris aliquet elementum sodales in lacus. Aenean posuere, mauris quis pellentesque tristique, tellus eros vestibulum leo, in pretium arcu tellus vitae enim. Sed feugiat, ante eu molestie sodales, nunc tortor accumsan ligula, eget feugiat elit velit sed risus. Nulla feugiat libero imperdiet dictum commodo. Vivamus sit amet neque libero. Curabitur interdum nibh at purus pretium, id ornare magna aliquet. Vivamus accumsan varius laoreet. Suspendisse non ante in felis laoreet interdum sit amet eget velit. Proin cursus vulputate semper. Donec id nunc tortor. Vestibulum vulputate turpis eu dui mollis, in pretium lorem tempus."; 
 

 
document.getElementById('container').innerHTML = long_string.replace(/(.{50})/g, "$1<br>");

<div id="container"></div>

Answer 2

你在做什麼有隻的情況下，添加一個分界線，當整個文本有50個字符做到這一點。
你應該做的是：
- 分割字符串每次50個字符，如果超過50個字符
長 - 與「\ n」
下面的代碼加入他們的將您的字符串分割成50行人物：

lines.join('<br>'); 

：

lines = str.match(/.{50}/g); 

現在，您可以加入他們的行列

或者您可以使用一個襯墊：

str.replace(/(.{50})/g, "$1<br>"); 

Answer 3

我試圖通過手動創建一個數組這個解決我自己，但我一直在使用承認其他答案：

• match()和join();和
• regex和replace()

較爲簡潔，更優雅。

var chars = 50; 
 
var withBreaks = document.getElementsByClassName('with-breaks')[0]; 
 
var withBreaksText = withBreaks.textContent; 
 
var withBreaksTextLength = withBreaksText.length; 
 
var withBreaksArray = []; 
 
var j = 0; 
 

 
for (var i = chars; i < (withBreaksText.length + chars); i = i + chars) { 
 
withBreaksArray[j] = withBreaksText.substring(0,(chars + 1)); 
 
withBreaksText = withBreaksText.substring(chars + 1); 
 
j++; 
 
} 
 

 
withBreaks.textContent = ''; 
 

 
for (var i = 0; i < withBreaksArray.length; i++) { 
 
withBreaks.innerHTML += withBreaksArray[i] + '<br />'; 
 
}

<p class="with-breaks">Lorem ipsum dolor sit amet, ut alia vidit splendide qui, sit modo consetetur no. Duo eu affert vocibus argumentum. Ut mei delenit molestiae. Eum agam albucius appetere ad, eum ex debitis omnesque singulis, eu vidit concludaturque ius. Ea mei dicat partiendo, mazim aliquando sea eu, quot clita salutatus no vim. Cibo complectitur ea sed, ad prima veritus nec. Facer verear periculis eu quo, in per molestie honestatis. Quem quas persecuti cu nec. Ei tation corpora his. Amet iriure ex has, aliquam sanctus vim eu. Deserunt gubergren has cu. Dico nominavi dissentias ea his, vel te stet verear repudiare, duo quis scripta aliquam ut. Qui menandri platonem ne, eu eum abhorreant scribentur, usu etiam euismod lobortis et. His vivendo propriae ad. An nam congue suscipit consectetuer, mea te eleifend tractatos signiferumque. Nominavi sapientem salutatus no nec. Ad nisl sint ipsum his. Lorem aperiam repudiare no nec. Melius discere mea ei. Quas modus contentiones ex vim. Hinc lorem torquatos eu vim, brute intellegam ne nec, quo ne aeterno fuisset principes. Sea et eripuit gubergren, eu impetus aliquid definitiones nec, te alii wisi nam. Est indoctum qualisque eu, tantas splendide reprehendunt an pri. Sea perpetua dissentiunt definitionem at. Stet harum sit ad.</p>

Answer 4

我創建類似於你的方法一個答案。由於textg的值得到的textarea的值length % 50等於0我有一個換行符textarea。我還添加了white-spacepre-line這

將打破他們的代碼換行，但多餘的空白仍然剝離。

Learn more about whitespace here。

我已經從你的html中剝離了所有的javascript，並把它全部放在一個函數中breakline()。

function breakline(e) { 
 
    var $this = $(this); \t \t \t // store text area element 
 
    var $textg = $('#textg'); \t \t \t // store div element 
 
    var length = $this[0].value.length; \t \t // get length of text within textarea 
 
    $textg[0].textContent = $this[0].value; \t // set text content of div to text of textarea 
 
    if(length % 50 === 0) { \t     // test if text in textarea is divisble by 50 with a remainder of 0 
 
    \t \t $this[0].value += '\n'; \t   // add line break to textarea 
 
    } 
 
} 
 

 
$('#text-g').on('input', breakline); \t // changed from keyup to input since keyup will call breakline only when a key is released

#textg { 
 
    white-space: pre-line; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <textarea id="text-g" name="text-g" maxlength="300" placeholder="Message de copropriétée"></textarea> 
 
</form> 
 

 
<div id='textg' class='textg'></div>