JavaScript replace \n with <br />

JavascriptRegexReplace

Javascript Problem Overview


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

Javascript Solutions


Solution 1 - Javascript

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.

Solution 2 - Javascript

Handles either type of line break

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

Solution 3 - Javascript

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 />");

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTom GullenView Question on Stackoverflow
Solution 1 - JavascriptmplungjanView Answer on Stackoverflow
Solution 2 - JavascriptWSkinnerView Answer on Stackoverflow
Solution 3 - JavascriptjAndyView Answer on Stackoverflow