Preserve Line Breaks from Textarea

Preserve line breaks in textarea

Generally you just need to add

  • white-space: pre-line; whitespace trimmed to single whitespace or

  • white-space: pre-wrap; all whitespace preserved

to the element's style (CSS), where you want your text rendered with line-breaks.

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

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

document.getElementById('post-button').addEventListener('click', function () {  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);});
#card-stack p {  background: #ddd;  white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */}textarea {  width: 100%;}
<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:
Tuesday practice @ 5th floor (8pm - 11 pm)
Thursday practice @ 5th floor (8pm - 11 pm)
Sunday practice @ (9pm - 12 am)</textarea><br><input type="button" id="post-button" value="Post!"><div id="card-stack"></div>

HTML textarea to javascript and keep line break

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>

How to keep linebreaks in html textarea POST data

Here is what finally solved the issue: I was using PHP's filter FILTER_FLAG_STRIP_LOW (http://php.net/manual/en/filter.filters.flags.php) on the string before you output or store to the database you will remove the newline characters \r\n .

To fix this issue you can use the FILTER_FLAG_ENCODE_LOW instead of FILTER_FLAG_STRIP_LOW as such:

$input = filter_var($input, FILTER_SANITIZE_STRING, FILTER_FLAG_ENCODE_LOW);

Preserving line breaks from text-area when sending mail

Since you are sending HTML E-Mails (msgObj.IsBodyHtml = true;) you need to replace newlines with the <br /> tag.

Replace the line
string YourMessageBody = MailBody.Value;

with

string YourMessageBody = MailBody.Value.Replace(Environment.NewLine, "<br />");

Angular 8 filter : preserve line breaks on text area input

Working Demo

Try this one in pipe:

 export class LinebreaksPipe implements PipeTransform {

transform(value: string): string {
return value.replace(/\\n/g, '<br />');
}
}

In template file:

<p [innerHTML]="profileForm.get('personalizedMessage').value | linebreaks">

Copy from textarea to div, preserving linebreaks

You can simply do this:

$('.box textarea').keyup(function() {
var value = $(this).val().replace(/\n/g, '<br/>');
$(".box p").html(value);
});

This will replace all the line breaks \n in your textarea element and replace them all with html <br/> tag, so that you can preserve the line breaks in your textarea inside <p> tag element also.

Simple Demo Here:

$('.box textarea').keyup(function() {  $(".box p").html(this.value.replace(/\n/g, '<br/>'));});
textarea,p {  width: 90%;  height: 80px;}p {  border: 1px solid #eee;  padding: 5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="box">  <textarea></textarea>  <br/>  <p></p></div>

Preserve Line Breaks From TextArea

Two solutions for this:

  1. PHP function nl2br():

    e.g.,

    echo nl2br("This\r\nis\n\ra\nstring\r");

    // will output
    This<br />
    is<br />
    a<br />
    string<br />
  2. Wrap the input in <pre></pre> tags.

    See: W3C Wiki - HTML/Elements/pre



Related Topics



Leave a reply



Submit