How to add multiple line breaks in Javascript

Question

I want when a person adds any list in the first textarea and click button then in next textarea list should have multiple line breaks. My following code only adds one line break. I want it should add 2, 3.. line breaks.

Please refer this image:

Code:

function myFunction() {

document.getElementById('TextInput2').value = document.getElementById('TextInput1').value.replace(/[\r\n]{2,}/g, "\n");

}

<html>
<body>
 

 <textarea autocomplete="off" cols="30" id="TextInput1" name="message" rows="10" style="width: 100%;"></textarea>
 <br><br>
 
 <center><button onclick="myFunction()">Click me</button></center>
 
 <br>
 <textarea autocomplete="off" cols="30" id="TextInput2" name="message" rows="10" style="width: 100%;"></textarea>
  
</body>
</html>

collapsar · Accepted Answer · 2020-09-10T11:57:30.103

1

Just specify 2 (or any other number of) line feeds in the replacement string and apply the substitution on occurrences of 1 and more line feeds. The examples assume that a 'line feed' is either \n or the sequence \r\n:

Replace with 2 line breaks

function myFunction() {
    document.getElementById('TextInput2').value =
         document.getElementById('TextInput1').value.replace(/(\r?\n)+/g, "\n\n");
}

<html>
<body>
 

 <textarea autocomplete="off" cols="30" id="TextInput1" name="message" rows="10" style="width: 100%;"></textarea>
 <br><br>
 
 <center><button onclick="myFunction()">Click me</button></center>
 
 <br>
 <textarea autocomplete="off" cols="30" id="TextInput2" name="message" rows="10" style="width: 100%;"></textarea>
  
</body>
</html>

Add 2 line breaks

function myFunction() {
    document.getElementById('TextInput2').value =
         document.getElementById('TextInput1').value.replace(/((\r?\n)+)/g, "$1\n\n");
}

<html>
<body>
 

 <textarea autocomplete="off" cols="30" id="TextInput1" name="message" rows="10" style="width: 100%;"></textarea>
 <br><br>
 
 <center><button onclick="myFunction()">Click me</button></center>
 
 <br>
 <textarea autocomplete="off" cols="30" id="TextInput2" name="message" rows="10" style="width: 100%;"></textarea>
  
</body>
</html>

edited Sep 10 '20 at 11:57

answered Sep 10 '20 at 11:34

collapsar

17,010
4
35
61

it's not adding 2 line breaks – santosh Sep 10 '20 at 11:37
Do you want to _add_ 2 line breaks to the existing number of line breaks or do you want to _end up_ with 2 line breaks altogether ? – collapsar Sep 10 '20 at 11:39
I want it should have 2 line breaks as shown in image. Like my list already have one line break I want one more to it. – santosh Sep 10 '20 at 11:41
See the second alternative. Frankly, your image does not convey what your intent is (at least to me) and demonstrating what a html section should be rendered like using an image in an environment where you can use html snippets seems suboptimal ... – collapsar Sep 10 '20 at 11:44
Ok, I just want add line breaks based on my requirements like Apple Banana should have 2 line breaks then 3 line breaks so on... Do you know how I can do that? – santosh Sep 10 '20 at 11:48

How to add multiple line breaks in Javascript

1 Answers1