How to convert \n to HTML line break

Question

I am using this plugin to parse bbcode bbcodeparser

but it has no functionality to convert \n to <br/>.

I tried adding this:

replace(/\r?\n|\r/g, '<br>')

...but it didn't work.

How can I implement line break functionality?

possible duplicate of [Javascript replacing new line character](http://stackoverflow.com/questions/2136648/javascript-replacing-new-line-character) — Fraser, Feb 19 '13 at 01:22
possible duplicate of [How do I replace all line breaks in a string with
tags?](http://stackoverflow.com/questions/784539/how-do-i-replace-all-line-breaks-in-a-string-with-br-tags) — sierrasdetandil, Mar 14 '15 at 00:35

score 138 · Answer 1 · answered May 19 '14 at 11:27

138

If you are doing this to show new line and return carriage in html, then you don't need to do it explicitly. You can do it in css by setting the white-space attribute pre-line value.

<span style="white-space: pre-line">@Model.CommentText</span>

answered May 19 '14 at 11:27

Foreever

7,099
8
53
55

edit: Although it says it is unsupported in IE, it seems to work okay in IE8 + 11: http://caniuse.com/#search=white-space – Matt Rowles Jan 16 '15 at 00:01
2

pre-line will also collapse sequences of whitespaces. If you want to preserve whitespaces, try pre-wrap. There are other options as well: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space?v=example – KayakinKoder May 17 '17 at 02:20
I hate when the absolute best answers are at the bottom – Reid Aug 14 '21 at 15:39

score 15 · Answer 2 · answered Jul 24 '19 at 20:44

The above answer helped me to fix my problem but I dig down a little more and found some additional info about white-space properties. I hope it may help someone like me:

What is white-space property:

white-space is a CSS property that helps control how whitespace and line breaks within an element's text are treated. It can take these values: normal, nowrap, pre, pre-line, pre-wrap.

score 3 · Answer 3 · edited May 19 '14 at 11:31

3

actually, Browsers doesn't treat \r\n as real new-lines, in PHP nl2br used, where as in Javascript you can use below function for nl2br() equivalent.

function nl2br (str, is_xhtml) {
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');}

edited May 19 '14 at 11:31

Maxime Lorant

34,607
19
87
97

answered Jan 10 '14 at 08:56

Vijay Lathiya

1,087
11
14

What does $1 and $2 does here? – Foreever May 19 '14 at 09:15
Browser does treat it as new-lines if you specify the correct css style. – Foreever May 19 '14 at 11:28
@Foreever: `$1` and `$2` refers to the first and second group in the regexp (a group is something in `()`). So the code will retain the original parts of the string and just insert `
` tags before a new line. – Aaron Digulla May 19 '14 at 11:43
what to specify as argument for `is_xhtml`? – nikk Jul 07 '16 at 19:00

TheLazyHatGuy · Answer 4 · 2020-07-14T11:46:49.007

2

This worked for me

const regex = /\\n|\\r\\n|\\n\\r|\\r/g;
string.replace(regex, '<br>');

edited Jul 14 '20 at 11:46

answered Jul 14 '20 at 11:28

TheLazyHatGuy

81
6

How to convert \n to HTML line break

4 Answers4

Linked