javascript – How do I replace all line breaks in a string with By moting1a Programming Language  0 Comments

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."


• 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>');



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'));
}
}
}



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



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>

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



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>')

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>';



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>