Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I’m editing a <textarea> with JavaScript. The problem is that when I make line breaks in it, they won’t display. How can I do this?

I’m getting the value to write a function, but it won’t give line breaks.

The problem comes from the fact that line breaks ( \n\r ?) are not the same as HTML <br/> tags:

var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');
Since many of the comments and my own experience have shown me that this <br> solution is not working as expected, here is an example of how to append a new line to a textarea using '\r\n':
function log(text) {
    var txtArea;
    txtArea = document.getElementById("txtDebug");
    txtArea.value += text + '\r\n';
                This works for me too. In jQuery you can do something like this: $('#caption').html($('#caption').text().replace(/\n\r?/g, '<br />'));
– DavGarcia
                Nov 25, 2009 at 5:59
                The line break Regexp should be /(\r\n|\n|\r)/gm textfixer.com/tutorials/javascript-line-breaks.php
– tothemario
                Sep 12, 2012 at 2:21
                Suspect <br> is wrong. For a universal line break in a textarea you want \r\n.  For example, the UC Browser ignores <br> and \n in textareas.  See Add a linebreak in an HTML text area.
– Bob Stein
                Jul 18, 2016 at 22:14
                Using <br> inside of a textarea is not working. At least not in Chrome, where I tested. Using \n seem to work though. Use <br> if you intend to insert the text as pure html, i.e. outside of any input element.
– Tornseglare
                Oct 31, 2017 at 12:14
If you use general JavaScript and you need to assign a string to a text area value, then
document.getElementById("textareaid").value='texthere\\ntexttext'.
You need to replace \n or < br > with \\\n.
Otherwise, it gives Uncaught SyntaxError: Unexpected token ILLEGAL in all browsers.
I had a problem with line breaks which were passed from a server variable to a JavaScript variable, and then JavaScript was writing them to a textarea (using KnockoutJS value bindings).
The solution was double escaping new lines:
original.Replace("\r\n", "\\r\\n")
on the server side, because with just single escape characters, JavaScript was not parsing.
document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
<textarea placeholder="type text here"></textarea>
<pre style="font-family: inherits">
new lines will
be respected
      and spaces too
                Great tip, instead of doing crlf replacement I used this in my C# by pre/appending to text area string in code
– Tab
                Sep 21, 2022 at 15:08
I have a textarea whose id is #infoartist, as follows:
<textarea id="infoartist" ng-show="dForm" style="width: 100%;" placeholder="Tell your contacts and collectors about yourself."></textarea>
In JavaScript code, I’ll get the value of the textarea and replace escaping a new line (\n\r) by the <br /> tag, such as:
var text = document.getElementById("infoartist").value;
text = text.replace(/\r?\n/g, '<br />');
So if you are using jQuery (like me):
var text = $("#infoartist").val();
text = text.replace(/\r?\n/g, '<br />');
A new line is just whitespace to the browser and won't be treated any different to a normal space (" "). To get a new line, you must insert <BR /> elements.
Another attempt to solve the problem: Type the text into the textarea and then add some JavaScript behind a button to convert the invisible characters to something readable and dump the result to a DIV. That will tell you what your browser wants.
Here is the thing I did for the same trouble I had.
When I'm passing the text to the next page in JSP, I’m reading it as a textarea instead of reading something like
<s:property value="%{text}"/>
so the output came as you wanted.
And for other properties, you can use it as below.
<textarea style="background-color: white; border: none; width:660px;font-family: Arial, Helvetica, sans-serif; font-size:1.0em; resize:none;" name="text" cols="75" rows="15" readonly="readonly" ><s:property value="%{text}"/></textarea>