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-10 11:57:30Z

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, 2020 at 11:57

answered Sep 10, 2020 at 11:34

collapsar

17.4k5 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

santosh Over a year ago

it's not adding 2 line breaks

collapsar Over a year ago

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 ?

santosh Over a year ago

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.

collapsar Over a year ago

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

santosh Over a year ago

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?

Collectives™ on Stack Overflow

How to add multiple line breaks in Javascript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related