How do I preserve line breaks when getting text from a textarea

Question

I am getting the value in a textarea when the user hits submit. I then take this value and place it elsewhere on the page. However, when I do this, it loses newline characters making the output pretty ugly.

Here is the textarea I am accessing:

<textarea id="post-text" class="form-control" rows="3" placeholder="What's up?" required></textarea>

Here is the JavaScript code accessing the post and transcribing it.

var post = document.createElement('p');
var postText = document.getElementById('post-text').value;
post.append(postText);
var card = document.createElement('div');
card.append(post);
var cardStack = document.getElementById('#card-stack');
cardStack.prepend(card);

When the input is something like:

Group Schedule:

Tuesday practice @ 5th floor (8 pm - 11 pm)

Thursday practice @ 5th floor (8 pm - 11 pm)

Sunday practice @ (9 pm - 12 am)

The output is:

Group Schedule: Tuesday practice @ 5th floor (8 pm - 11 pm) Thursday practice @ 5th floor (8 pm - 11 pm) Sunday practice @ (9 pm - 12 am)

So is there a way to preserve line breaks?

User · Answer

I suppose you don t want your textarea-content to be parsed as HTML  In this case  you can just set it as plaintext so the browser doesn t treat it as HTML and doesn t remove newlines No CSS or preprocessing required    x000D   x000D   lt script gt  x000D  function copycontent    x000D   var content   document getElementById  ta   value  x000D   document getElementById  target   innerText   content  x000D    x000D   lt  script gt  x000D   lt textarea id  ta  rows  3  gt  x000D    line 1 x000D    line 2 x000D    line 3 x000D   lt  textarea gt  x000D   lt button id  btn  onclick  copycontent     gt  x000D  Copy x000D   lt  button gt  x000D   lt p id  target  gt  lt  p gt  x000D   x000D   x000D

User · Answer

x000D   x000D  function get     x000D    var arrayOfRows   document getElementById  ta   value split   n    x000D    var docfrag   document createDocumentFragment    x000D     x000D    var p   document getElementById  result    x000D    while  p firstChild    x000D      p removeChild p firstChild   x000D      x000D     x000D    arrayOfRows forEach function row  index  array    x000D      var span   document createElement  span    x000D      span textContent   row  x000D      docfrag appendChild span   x000D      if index  lt  array length - 1    x000D        docfrag appendChild document createElement  br     x000D        x000D        x000D   x000D    p appendChild docfrag   x000D    x000D   lt textarea id  ta  rows 3 gt  lt  textarea gt  lt br gt  x000D   lt button onclick  get    gt get lt  button gt  x000D   lt p id  result  gt  lt  p gt  x000D   x000D   x000D    You can split textarea rows into array   var arrayOfRows   postText value split   n      Then use it to generate  maybe  more p tags

User · Answer

Here is an idea as you may have multiple newline in a textbox:

 var text=document.getElementById('post-text').value.split('\n');
 var html = text.join('<br />');

This HTML value will preserve newline. Hope this helps.

User · Answer

The easiest solution is to simply style the element you re inserting the text into with the following CSS property   white-space  pre-wrap    This property causes whitespace and newlines within the matching elements to be treated in the same way as inside a  lt textarea gt    That is  consecutive whitespace is not collapsed  and lines are broken at explicit newlines  but are also wrapped automatically if they exceed the width of the element    Given that several of the answers posted here so far have been vulnerable to HTML injection  e g  because they assign unescaped user input to innerHTML  or otherwise buggy  let me give an example of how to do this safely and correctly  based on your original code    x000D   x000D  document getElementById  post-button   addEventListener  click   function      x000D    var post   document createElement  p    x000D    var postText   document getElementById  post-text   value  x000D    post append postText   x000D    var card   document createElement  div    x000D    card append post   x000D    var cardStack   document getElementById  card-stack    x000D    cardStack prepend card   x000D      x000D   card-stack p   x000D    background   ddd  x000D    white-space  pre-wrap       lt -- THIS PRESERVES THE LINE BREAKS    x000D    x000D  textarea   x000D    width  100   x000D    x000D   lt textarea id  post-text  class  form-control  rows  8  placeholder  What s up   required gt Group Schedule  x000D   x000D  Tuesday practice   5th floor  8pm - 11 pm  x000D   x000D  Thursday practice   5th floor  8pm - 11 pm  x000D   x000D  Sunday practice    9pm - 12 am  lt  textarea gt  lt br gt  x000D   lt input type  button  id  post-button  value  Post   gt  x000D   lt div id  card-stack  gt  lt  div gt  x000D   x000D   x000D      Note that  like your original code  the snippet above uses append   and prepend     As of this writing  those functions are still considered experimental and not fully supported by all browsers   If you want to be safe and remain compatible with older browsers  you can substitute them pretty easily as follows    element append otherElement  can be replaced with element appendChild otherElement   element prepend otherElement  can be replaced with element insertBefore otherElement  element firstChild   element append stringOfText  can be replaced with element appendChild document createTextNode stringOfText    element prepend stringOfText  can be replaced with element insertBefore document createTextNode stringOfText   element firstChild   as a special case  if element is empty  both element append stringOfText  and element prepend stringOfText  can simply be replaced with element textContent   stringOfText    Here s the same snippet as above  but without using append   or prepend      x000D   x000D  document getElementById  post-button   addEventListener  click   function      x000D    var post   document createElement  p    x000D    var postText   document getElementById  post-text   value  x000D    post textContent   postText  x000D    var card   document createElement  div    x000D    card appendChild post   x000D    var cardStack   document getElementById  card-stack    x000D    cardStack insertBefore card  cardStack firstChild   x000D      x000D   card-stack p   x000D    background   ddd  x000D    white-space  pre-wrap       lt -- THIS PRESERVES THE LINE BREAKS    x000D    x000D  textarea   x000D    width  100   x000D    x000D   lt textarea id  post-text  class  form-control  rows  8  placeholder  What s up   required gt Group Schedule  x000D   x000D  Tuesday practice   5th floor  8pm - 11 pm  x000D   x000D  Thursday practice   5th floor  8pm - 11 pm  x000D   x000D  Sunday practice    9pm - 12 am  lt  textarea gt  lt br gt  x000D   lt input type  button  id  post-button  value  Post   gt  x000D   lt div id  card-stack  gt  lt  div gt  x000D   x000D   x000D      Ps  If you really want to do this without using the CSS white-space property  an alternative solution would be to explicitly replace any newline characters in the text with  lt br gt  HTML tags   The tricky part is that  to avoid introducing subtle bugs and potential security holes  you have to first escape any HTML metacharacters  at a minimum   amp  and  lt   in the text before you do this replacement   Probably the simplest and safest way to do that is to let the browser handle the HTML-escaping for you  like this   var post   document createElement  p    post textContent   postText  post innerHTML   post innerHTML replace   n g    lt br gt  n       x000D   x000D  document getElementById  post-button   addEventListener  click   function      x000D    var post   document createElement  p    x000D    var postText   document getElementById  post-text   value  x000D    post textContent   postText  x000D    post innerHTML   post innerHTML replace   n g    lt br gt  n         lt -- THIS FIXES THE LINE BREAKS x000D    var card   document createElement  div    x000D    card appendChild post   x000D    var cardStack   document getElementById  card-stack    x000D    cardStack insertBefore card  cardStack firstChild   x000D      x000D   card-stack p   x000D    background   ddd  x000D    x000D  textarea   x000D    width  100   x000D    x000D   lt textarea id  post-text  class  form-control  rows  8  placeholder  What s up   required gt Group Schedule  x000D   x000D  Tuesday practice   5th floor  8pm - 11 pm  x000D   x000D  Thursday practice   5th floor  8pm - 11 pm  x000D   x000D  Sunday practice    9pm - 12 am  lt  textarea gt  lt br gt  x000D   lt input type  button  id  post-button  value  Post   gt  x000D   lt div id  card-stack  gt  lt  div gt  x000D   x000D   x000D    Note that  while this will fix the line breaks  it won t prevent consecutive whitespace from being collapsed by the HTML renderer   It s possible to  sort of  emulate that by replacing some of the whitespace in the text with non-breaking spaces  but honestly  that s getting rather complicated for something that can be trivially solved with a single line of CSS

User · Answer

Similar questions are here  detect line breaks in a text area input  detect line break in textarea  You can try this    x000D   x000D  var submit   document getElementById  submit    x000D   x000D  submit addEventListener  click   function    x000D  var textContent   document querySelector  textarea   value  x000D     x000D  document getElementById  output   innerHTML   textContent replace   n g    lt br  gt     x000D     x000D   x000D      x000D   lt textarea cols 30 rows 10  gt This is some text x000D  this is another text x000D   x000D  Another text again and again lt  textarea gt  x000D   lt input type  submit  id  submit  gt  x000D   x000D   x000D   lt p id  output  gt  lt  p gt  x000D   x000D   x000D    document querySelector  textarea   value  will get the text content of the  textarea and textContent replace   n g    lt br  gt    will find all the newline character in the source code   n g in the content and replace it with the html line-break  lt br  gt      Another option is to use the html  lt pre gt  tag  See the demo below   x000D   x000D  var submit   document getElementById  submit    x000D   x000D  submit addEventListener  click   function    x000D   x000D    var content     lt pre gt    x000D     x000D    var textContent   document querySelector  textarea   value  x000D     x000D    content    textContent  x000D     x000D    content      lt  pre gt    x000D   x000D    document getElementById  output   innerHTML   content  x000D   x000D      x000D   lt textarea cols 30 rows 10 gt This is some text x000D  this is another text x000D   x000D  Another text again and again  lt  textarea gt  x000D   lt input type  submit  id  submit  gt  x000D   x000D   lt div id  output  gt   lt  div gt  x000D   x000D   x000D

User · Answer

You could set width of div using Javascript and add white-space pre-wrap to p tag  this break your textarea content at end of each line    x000D   x000D  document querySelector  button   onclick   function gt    x000D  var card   document createElement  div    x000D  card style width    160px   x000D  card style background     eee   x000D  var post   document createElement  p    x000D  var postText   document getElementById  post-text   value  x000D  post style whiteSpace    pre-wrap   x000D  card append post   x000D  post append postText   x000D  document body append card   x000D    x000D   lt textarea id  post-text  class  form-control  rows  3  placeholder  What s up   required gt  x000D  Group Schedule  x000D   x000D  Tuesday practice   5th floor  8pm - 11 pm  x000D   x000D  Thursday practice   5th floor  8pm - 11 pm  x000D   x000D  Sunday practice    9pm - 12 am  lt  textarea gt  x000D   lt br gt  lt br gt  x000D   lt button gt Copy   lt  button gt  x000D   x000D   x000D

User · Answer

The target container should have the white-space pre style  Try it below   x000D   x000D   lt script gt  x000D  function copycontent    x000D   var content   document getElementById  ta   value  x000D   document getElementById  target   innerText   content  x000D    x000D   lt  script gt  x000D   lt textarea id  ta  rows  3  gt  x000D    line 1 x000D    line 2 x000D    line 3 x000D   lt  textarea gt  x000D   lt button id  btn  onclick  copycontent     gt  x000D  Copy x000D   lt  button gt  x000D   lt p id  target  style  white-space pre  gt  x000D   x000D   lt  p gt  x000D   x000D   x000D

[javascript] How do I preserve line breaks when getting text from a textarea?

The answer is

Examples related to javascript

Examples related to html

Tags