How to replace \n with in JavaScript?

Question

I have a textarea where I insert \n when user presses enter. Code from this textarea is sent to a WCF service via jQuery.ajax(). I cannot save \n in DB as it won't show in other applications consuming the service.

How can i replace \n with   tag?

solution

Well many of you tried and some got right with Javascript Regex with /g (global modifier). At the end i had \n inserted twice, i don't know why, my only guess is that jQuery on keypress event created double \n which i debug.

$('#input').keypress(function (event) {
    if (event.which == '13') {
        inputText = $('#input').val() + '\n';
        $('#input').val(inputText);
    }
});

usually it's not a good idea to replace it on the client side — Teneff
– Teneff, Commented Jun 13, 2011 at 14:40
@Teneff, \n is not sent then to the server, it seems omitted. I can change it on server but i receive nothing except of text. — eugeneK
– eugeneK, Commented Jun 13, 2011 at 14:42
You should also store it in the raw format entered, if you ever added a new app to retrieve data that could support the /n then surely you should show it? have you tried encoding it? — jimplode
– jimplode, Commented Jun 13, 2011 at 14:43
is #input an <input type="text"/>? Because if it is you will not get any \n. If it is a textarea I suggest you convert the data when the user clicks the button to submit and not when typing. But better than that I would just convert on the server-side. — BrunoLM
– BrunoLM, Commented Jun 13, 2011 at 15:18
@BrunoLM, #input is textarea and i do replace \n to :br: at submit and turn :br: to br html tag when i get data back from server. Why i'm not doing it on server because besides br tags i have images and image tag is quite long one to send via service to jQuery wrapper so i mark tags i need with colons, alike forums do that with [tagname] — eugeneK
– eugeneK, Commented Jun 13, 2011 at 17:51

BrunoLM · Accepted Answer · 2011-06-13 14:43:45Z

40

Replace with global scope

$('#input').val().replace(/\n/g, "<br />")

or

$('#input').val().replace("\n", "<br />", "g")

answered Jun 13, 2011 at 14:43

BrunoLM

101k86 gold badges311 silver badges464 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

eugeneK Over a year ago

it replaces fine globally but it replaces twice br tag on keypress

Teneff · Accepted Answer · 2011-06-13 14:50:01Z

12

it could be done like this:

$('textarea').val().replace(/\n/g, "<br />");

edit: sorry ... the regular expressions in javascript should not be quoted

working example

edited Jun 13, 2011 at 14:50

answered Jun 13, 2011 at 14:42

Teneff

32.3k13 gold badges76 silver badges107 bronze badges

3 Comments

BrunoLM Over a year ago

Doesn't work since he wants to replace \n and not /\n/. And if it was intended to be a regex it would only replace the first occurrence.

eugeneK Over a year ago

@Qtax, it replaces just first appearance of \n and omits others

Qtax Over a year ago

Just use a string replacement, like "\n", if you really want to use regex you can do /\n/g.

rzetterberg · Accepted Answer · 2011-06-13 14:48:48Z

7

Like said in comments and other answer, it's better to do it on server side.

However if you want to know how to do it on clientside this is one easy fix:

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

Where textareaContent is the variable with the data in the textarea.

Edit: Changed so that it replaces globally and not only first match.

edited Jun 13, 2011 at 14:48

answered Jun 13, 2011 at 14:43

rzetterberg

10.3k5 gold badges47 silver badges55 bronze badges

1 Comment

eugeneK Over a year ago

It replaces just first appearance of \n

Allman · Accepted Answer · 2011-06-13 14:41:43Z

2

If you support PHP you should check this out: http://php.net/manual/en/function.nl2br.php

answered Jun 13, 2011 at 14:41

Allman

414 bronze badges

Comments

Wicked Coder · Accepted Answer · 2011-06-13 14:42:36Z

2

You can use a simple javascript string function.

 string.replace("\n", "<br>")

answered Jun 13, 2011 at 14:42

Wicked Coder

1,1186 silver badges8 bronze badges

Comments

Senad Meškin · Accepted Answer · 2011-06-13 14:46:15Z

2

you can use javascript built in replace function with a little help of regex, for example

$('#input').val().replace(/\n\r?/g, '<br />')

this code will return all enters replaced with  

answered Jun 13, 2011 at 14:46

Senad Meškin

13.8k4 gold badges39 silver badges55 bronze badges

2 Comments

David Lawrence Over a year ago

This is the only one out of this entire page that worked for me for wordpress editor. If you are using a wordpress editor in a plugin, and need to for some reason show a preview of the editors contents, this is the only one here that works.

Senad Meškin Over a year ago

Did you really tried every solution from this question, if you did then you are really persistent. :)

Richard Friend · Accepted Answer · 2011-06-13 14:43:24Z

1

From within your WCF service can you not just use String.Replace ?

text = text.Replace("\n","<br />");

answered Jun 13, 2011 at 14:43

Richard Friend

16k1 gold badge45 silver badges60 bronze badges

1 Comment

Karue Benson Karue Over a year ago

Don't do this! You've to use a regular expression to replace all matches globally. E.g, in your case, it will only replace the first occurrence

Qtax · Accepted Answer · 2011-06-13 14:44:22Z

1

var replaced = $('#input').val().replace("\n", "<br/>");

answered Jun 13, 2011 at 14:44

Qtax

34k9 gold badges92 silver badges127 bronze badges

Comments

Tomas Reimers · Accepted Answer · 2011-06-13 14:47:24Z

1

Building on the other answers, this is probably done best by php. Now assuming you don't want to ajax this (which would be pointless and cause unnecessary server load), you should probably use phpjs.org's javascript port of this function:

function nl2br (str, is_xhtml) {
    // Converts newlines to HTML line breaks  
    // 
    // version: 1103.1210
    // discuss at: http://phpjs.org/functions/nl2br    // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Philip Peterson
    // +   improved by: Onno Marsman
    // +   improved by: Atli Þór
    // +   bugfixed by: Onno Marsman    // +      input by: Brett Zamir (http://brett-zamir.me)
    // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +   improved by: Maximusya
    // *     example 1: nl2br('Kevin\nvan\nZonneveld');    // *     returns 1: 'Kevin\nvan\nZonneveld'
    // *     example 2: nl2br("\nOne\nTwo\n\nThree\n", false);
    // *     returns 2: '<br>\nOne<br>\nTwo<br>\n<br>\nThree<br>\n'
    // *     example 3: nl2br("\nOne\nTwo\n\nThree\n", true);
    // *     returns 3: '\nOne\nTwo\n\nThree\n'    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '' : '<br>';

    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}

http://phpjs.org/functions/nl2br:480

answered Jun 13, 2011 at 14:47

Tomas Reimers

3,2924 gold badges26 silver badges38 bronze badges

2 Comments

eugeneK Over a year ago

What $1 and $2 mean? ([^>\r\n]?) and (\r\n|\n\r|\r|\n)

Tomas Reimers Over a year ago

To tell you the Truth, I am not so good with regex as I should be. But the little I do know about this is summed up in these two links: Dollar Signs - mootools-users.660466.n2.nabble.com/…; all the r's and n's - lawrence.ecorp.net/inet/samples/regexp-format.php (scroll down to the section about replacing carriage returns with html br. And the code works as shown here - jsfiddle.net/Dar96/9

parliament · Accepted Answer · 2013-01-28 22:45:37Z

1

The following will replace all instances of \n with a   :

while (message.indexOf("\\n") !== -1) {
   message = message.replace("\\n", "<br />");
}

answered Jan 28, 2013 at 22:45

parliament

23.2k39 gold badges155 silver badges248 bronze badges

1 Comment

Simon Fakir Over a year ago

One iteration is enough, since it replaces all occurences.

fred · Accepted Answer · 2021-02-17 18:58:38Z

0

I know this is an ancient question/answer but it's one of the first to come up on a google search and no longer works here in the distant future with current browsers.

The correct answer to convert the \n to   (at least for me) is:

text = text.Replace(/\\n/g,"<br />");

answered Feb 17, 2021 at 18:58

fred

1,35316 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to replace \n with <br /> in JavaScript?

11 Answers 11

1 Comment

3 Comments

1 Comment

Comments

Comments

2 Comments

1 Comment

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

1 Comment

3 Comments

1 Comment

Comments

Comments

2 Comments

1 Comment

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related