javascript – How do I replace all line breaks in a string with

The Question :

579 people think this question is useful

How can I read the line break from a value with JavaScript and replace all the line breaks with <br /> elements?

Example:

A variable passed from PHP as below:

  "This is man.

     Man like dog.
     Man like to drink.

     Man is the king."

I would like my result to look something like this after the JavaScript converts it:

  "This is man<br /><br />Man like dog.<br />Man like to drink.<br /><br />Man is the king."

The Question Comments :
  • Something wrong with your original question? stackoverflow.com/questions/784313/…
  • You could also do nl2br($string) in PHP before you send it to JavaScript.
  • I’m going to vote to close the earlier question, as this has a better example.
  • He should edit the initial question then
  • I came here from a misguided understanding to what was going on with .text(). See stackoverflow.com/q/35238362/1467396 if that’s what you’re doing, too

The Answer 1

1282 people think this answer is useful

This will turn all returns into HTML

str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');

In case you wonder what ?: means. It is called a non-capturing group. It means that group of regex within the parentheses won’t be saved in memory to be referenced later. You can check out these threads for more information:
https://stackoverflow.com/a/11530881/5042169 https://stackoverflow.com/a/36524555/5042169

The Answer 2

439 people think this answer is useful

If your concern is just displaying linebreaks, you could do this with CSS.

<div style="white-space: pre-line">Some test
with linebreaks</div>

Jsfiddle: https://jsfiddle.net/5bvtL6do/2/

Note: Pay attention to code formatting and indenting, since white-space: pre-line will display all newlines (except for the last newline after the text, see fiddle).

The Answer 3

74 people think this answer is useful

Without regex:

str = str.split("\n").join("<br />");

The Answer 4

40 people think this answer is useful

This works for input coming from a textarea

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

The Answer 5

8 people think this answer is useful

If the accepted answer isn’t working right for you then you might try.

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

It worked for me.

The Answer 6

7 people think this answer is useful

Regardless of the system:

my_multiline_text.replace(/$/mg,'<br>');

The Answer 7

4 people think this answer is useful

It is also important to encode the rest of the text in order to protect from possible script injection attacks

function insertTextWithLineBreaks(text, targetElement) {
    var textWithNormalizedLineBreaks = text.replace('\r\n', '\n');
    var textParts = textWithNormalizedLineBreaks.split('\n');

    for (var i = 0; i < textParts.length; i++) {
        targetElement.appendChild(document.createTextNode(textParts[i]));
        if (i < textParts.length - 1) {
            targetElement.appendChild(document.createElement('br'));
        }
    }
}

The Answer 8

4 people think this answer is useful

This worked for me when value came from a TextBox:

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

The Answer 9

2 people think this answer is useful

For those of you who just want to allow max. 2 <br> in a row, you can use this:

let text = text.replace(/(\r?\n){2,}/g, '<br><br>');
text = text.replace(/(\r?\n)/g, '<br>');

First line: Search for \n OR \r\n where at least 2 of them are in a row, e.g. \n\n\n\n. Then replace it with 2 br

Second line: Search for all single \r\n or \n and replace them with <br>

The Answer 10

1 people think this answer is useful

if you send the variable from PHP, you can obtain it with this before sending:

$string=nl2br($string);

The Answer 11

0 people think this answer is useful

It will replace all new line with break

str = str.replace(/\n/g, '<br>')

If you want to replace all new line with single break line

str = str.replace(/\n*\n/g, '<br>')

Read more about Regex : https://dl.icewarp.com/online_help/203030104.htm this will help you everytime.

The Answer 12

0 people think this answer is useful

Not answering the specific question, but I am sure this will help someone

If you have output from PHP that you want to render on a web page using JavaScript (perhaps the result of an Ajax request), and you just want to retain white space and line breaks, consider just enclosing the text inside a <pre></pre> block:

var text_with_line_breaks = retrieve_some_text_from_php();
var element = document.querySelectorAll('#output');
element.innerHTML = '<pre>' + text_with_line_breaks + '</pre>';

The Answer 13

0 people think this answer is useful

Try

let s=`This is man.

     Man like dog.
     Man like to drink.

     Man is the king.`;
     
msg.innerHTML = s.replace(/\n/g,"<br />");
<div id="msg"></div>

Add a Comment