JavaScript replace \n with

Question

var messagetoSend = $.trim(document.getElementById("msgText").value);
messagetoSend = messagetoSend.replace("\n", "<br />");
alert(messagetoSend);

Given input:

Line 1


Line 2




Line 3

This alerts:

Line 1<br />


Line 2




Line 3

When I expect it to alert:

Line 1<br /><br /><br />Line 2<br /><br /><br /><br /><br />Line 3

given that the string is html and not plaintext just style it so that \n causes a line break, `white-space: pre;` otherwise you'll end up corruting entities that contain \n, if it's actually text, congrats you now own an XSS vuln. — Jasen, Apr 14 '21 at 05:05

mplungjan · Accepted Answer · 2019-06-13T05:47:42.690

222

You need the /g for global matching

replace(/\n/g, "<br />");

This works for me for \n - see this answer if you might have \r\n

NOTE: The dupe is the most complete answer for any combination of \r\n, \r or \n

var messagetoSend = document.getElementById('x').value.replace(/\n/g, "<br />");
console.log(messagetoSend);

<textarea id="x" rows="9">
    Line 1
    
    
    Line 2
    
    
    
    
    Line 3
</textarea>

UPDATE

It seems some visitors of this question have text with the breaklines escaped as

some text\r\nover more than one line"

In that case you need to escape the slashes:

replace(/\\r\\n/g, "<br />");

NOTE: All browsers will ignore \r in a string when rendering.

edited Jun 13 '19 at 05:47

answered Feb 22 '11 at 09:45

mplungjan

I changed it to this, it doesn't seem to work. It doesn't replace anything. – Tom Gullen Feb 22 '11 at 09:47
The "g" one still only adds in one
The regexp one doesn't do anything – Tom Gullen Feb 22 '11 at 09:49
1

Don't know why, but for me `replace(/\\n/g,"
")` works. I'm a bit confused. :/ – balazs Mar 01 '13 at 17:53
That is the textual representation of a newline. Is this pure JS or a string in php or similar – mplungjan May 30 '13 at 19:05
Same problem in .NET ASPX with jQuery - .replace(/\\r\\n/g, "
") did the trick. – Dave Jun 07 '13 at 20:57
So something on the server already escaped the breaklines – mplungjan Jun 08 '13 at 05:01
I added two more semicolon like `str.replace('/\n/g','')` makes it does not work.Others note this. – inOut Apr 18 '16 at 02:31
@inOut This`;` is a semicolon. Your single quotes breaks the regular expression – mplungjan Jan 27 '17 at 10:30
Github copilot suggested me this – AliN11 Nov 05 '21 at 11:40
@AliN11 this answer was suggested by GitHub copilot? Cool :) – mplungjan Nov 05 '21 at 11:49
1

@mplungjan I created a function named `ln2br`. Then Copilot suggested the regex at beginning of this answer :)) – AliN11 Nov 05 '21 at 17:37

score 102 · Answer 2 · answered Nov 21 '13 at 19:14

102

Handles either type of line break

str.replace(new RegExp('\r?\n','g'), '<br />');

answered Nov 21 '13 at 19:14

WSkinner

2

the up-voted and selected answer didn't work for me; I used this answer! Thanks. – warath-coder Apr 09 '16 at 22:15
This is the best answer, Thanks a lot @WSKinner – SurendraKumar Jaiswal Mar 01 '19 at 04:40
This solves the whole issue because previous ones were somehow replacing my last character on every line. – Chandrachur Sep 25 '19 at 02:32
Doesn't handle `\r` without `\n`. – Afanasii Kurakin Mar 24 '21 at 15:31

jAndy · Answer 3 · 2011-02-22T09:54:26.543

10

Use a regular expression for .replace().:

messagetoSend = messagetoSend.replace(/\n/g, "<br />");

If those linebreaks were made by windows-encoding, you will also have to replace the carriage return.

messagetoSend = messagetoSend.replace(/\r\n/g, "<br />");

edited Feb 22 '11 at 09:54

answered Feb 22 '11 at 09:45

jAndy

1

I changed it to this, it doesn't seem to work. It doesn't replace anything. – Tom Gullen Feb 22 '11 at 09:46
@Tom: probably windows linebreaks ? I updated the code, try with carriage return aswell. – jAndy Feb 22 '11 at 09:55
1

It is \n and not \\n - I think my answer has handled this. \r can be ignored - the browser will – mplungjan Feb 22 '11 at 09:56

3 Answers3