179

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,738
  • 21
  • 105
  • 131
djairo
  • 2,655
  • 4
  • 20
  • 13

9 Answers9

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';
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
TStamper
  • 30,098
  • 10
  • 66
  • 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
  • 4
    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
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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
jit
  • 1,616
  • 3
  • 21
  • 49
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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
0lukasz0
  • 3,155
  • 1
  • 24
  • 40
21

You need to use \n for linebreaks inside textarea

Brane
  • 3,257
  • 2
  • 42
  • 53
strubester
  • 285
  • 2
  • 3
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>
Christian Vincenzo Traina
  • 9,546
  • 2
  • 40
  • 63
  • 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 '22 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 />');
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
NgaNguyenDuy
  • 1,306
  • 17
  • 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
  • 321,842
  • 108
  • 597
  • 820
0

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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Igor L.
  • 3,159
  • 7
  • 40
  • 61
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,738
  • 21
  • 105
  • 131
raja777m
  • 401
  • 1
  • 8
  • 18