180

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.

1

9 Answers 9

306

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';
}
7
  • 7
    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
  • 2
    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
  • 4
    The right regex is /\r\n?|\n/g without capture, no multiline.
    – aMarCruz
    Dec 12, 2015 at 23:14
  • 5
    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
  • 2
    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. Oct 31, 2017 at 12:14
25

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.

0
22

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.

1
  • using "\\n" works for me in Windows and I assume it will work fine in Linux systems.
    – Samih A
    Dec 7, 2014 at 20:13
21

You need to use \n for linebreaks inside textarea

1
9

If you want to display text inside your own page, you can use the <pre> tag.

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});
<textarea placeholder="type text here"></textarea>
<pre style="font-family: inherits">
The
new lines will
be respected
      and spaces too
</pre>

1
  • 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
5

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 />');
2

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.

0

If you just need to send the value of the textarea to the server with line breaks, use nl2br.

0

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>

Not the answer you're looking for? Browse other questions tagged or ask your own question.