170

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.

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
djairo
  • 2,555
  • 3
  • 19
  • 13

9 Answers9

294

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';
}
Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
TStamper
  • 29,538
  • 10
  • 64
  • 73
  • 7
    This works for me too. In jQuery you can do something like this: $('#caption').html($('#caption').text().replace(/\n\r?/g, '
    '));     – DavGarcia Nov 25 '09 at 05:59
  • 2
    The line break Regexp should be `/(\r\n|\n|\r)/gm` http://www.textfixer.com/tutorials/javascript-line-breaks.php – tothemario Sep 12 '12 at 02:21
  • If you are using jQuery I suggest using `.val` - http://stackoverflow.com/questions/5583040/show-newlines-in-html-textarea/5583094#5583094 – Justin Ethier Apr 25 '13 at 14:44
  • 3
    The right regex is `/\r\n?|\n/g` without capture, no multiline. – aMarCruz Dec 12 '15 at 23:14
  • 5
    Suspect `
    ` is wrong. For a **universal line break in a textarea** you want `\r\n`. For example, the UC Browser ignores
    and \n in textareas. See [Add a linebreak in an HTML text area](http://stackoverflow.com/q/66773/673991).     – Bob Stein Jul 18 '16 at 22:14
  • 2
    Using
    inside of a textarea is not working. At least not in Chrome, where I tested. Using \n seem to work though. Use
    if you intend to insert the text as pure html, i.e. outside of any input element.     – Tornseglare Oct 31 '17 at 12:14
  • .value=your new text with \r\n wont work inside TEXTAREA tag, need to use .innerHTML=your new text with \r\n – Boris Gafurov Feb 14 '20 at 16:41
24

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.

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
jit
  • 1,566
  • 3
  • 18
  • 48
19

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.

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
0lukasz0
  • 2,771
  • 1
  • 22
  • 38
19

You need to use \n for linebreaks inside textarea

Brane
  • 3,041
  • 2
  • 35
  • 52
strubester
  • 265
  • 2
  • 3
7

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>
Cristian Traìna
  • 8,304
  • 2
  • 35
  • 56
4

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 />');
Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
NgaNguyenDuy
  • 1,246
  • 15
  • 13
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.

Aaron Digulla
  • 310,263
  • 103
  • 579
  • 794
0

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

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
Igor L.
  • 2,919
  • 6
  • 37
  • 58
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>
Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
raja777m
  • 411
  • 8
  • 17