HTML textarea to javascript and keep line break

Question

I am trying to pass a HTML <textarea> through JavaScript, and want to keep the line breaks. Ex when I write:

Line a
Line b

It comes out as:

Line a Line b

My code:

function textwrite(){
  thetext = document.getElementById("text_change").value;    
  document.getElementById("demo").innerHTML = thetext;
}

<textarea id='text_change' oninput='textwrite()'></textarea>
    
<p id="demo"></p>

And I don't want to use <pre> tag.

Possible duplicate of [JavaScript: How to add line breaks to an HTML textarea?](https://stackoverflow.com/questions/863779/javascript-how-to-add-line-breaks-to-an-html-textarea) — mrgrechkinn, Oct 25 '18 at 14:03
Possible duplicate of [Preserve line breaks in textarea](https://stackoverflow.com/questions/30593103/preserve-line-breaks-in-textarea) — BambiOurLord, Oct 25 '18 at 14:06

Mamun · Answer 1 · 2018-10-25T14:17:56.037

6

Use white-space:

The white-space CSS property sets how white space inside an element is handled.

with value pre-wrap where

Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

function textwrite(){
  thetext = document.getElementById("text_change").value;    
  document.getElementById("demo").innerHTML = thetext;
}

#demo { white-space: pre-wrap; }

<textarea id='text_change' oninput='textwrite()'></textarea>
    
<p id="demo"></p>

edited Oct 25 '18 at 14:17

answered Oct 25 '18 at 14:03

Mamun

66,969
9
47
59

1

Want to add some comments that explain why this solves the problem? – Ryan Wilson Oct 25 '18 at 14:04
@RyanWilson, updated the answer with some documentation....hope that makes more sense now......thanks – Mamun Oct 25 '18 at 14:21
1

Thank you, that is much better. +1 from me. – Ryan Wilson Oct 25 '18 at 15:13
This is the correct answer, the string saves those line breaks itself, but you have to specify the CSS to show it, thx! – Jose Villalobos Dec 16 '20 at 15:02

NullPointer · Accepted Answer · 2018-10-26T16:03:26.893

Replace \n,\r,\n\r with </br> in java script:

var myLineBreak = thetext.replace(/\r\n|\r|\n/g,"</br>");

function textwrite(){
     thetext = document.getElementById("text_change").value;  
      var myLineBreak = thetext.replace(/\r\n|\r|\n/g,"</br>");

     document.getElementById("demo").innerHTML = myLineBreak;
    }

<textarea id='text_change' oninput='textwrite()'></textarea>
    
    <p id="demo"></p>

score 0 · Answer 3 · answered Oct 25 '18 at 14:07

0

To do that, first set the multiline property of the textBox to true and then include at the end of each line this: "\r\n"

answered Oct 25 '18 at 14:07

Paplusc

1,080
1
12
24

HTML textarea to javascript and keep line break

3 Answers3