それぞれのX文字に区切り線を追加します

Question

私は、自動的にそれぞれの区切りの内容を改行しようとしています。そのために私はこのスクリプトを持っていますが、うまくいかないようです。

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

あなたは、あなたが全体のテキストが50個の文字を持っているとき、そこが唯一のケースでブレークラインを追加してやっている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文字
超える場合 - としてそれらを結合「\ n」の
以下のコードは、50のラインにあなたの文字列を分割します文字：

lines.join('<br>'); 

：今

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

、あなたはそれらを結合することができます

それともあなたは1つのライナーを使用することができます

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の値は、が0に等しい場合、textareaの改行がありましたので、textareaの値を取得しています。私はまた、彼らはコードで壊れる行を分割します

white-spacepre-lineを追加しましたが、余分な空白がまだ取り除かれています。

Learn more about whitespace here。

あなたのHTMLからすべてのjavascriptを取り除き、すべてを1つの関数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>