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."
This question is related to
javascript
if you send the variable from PHP, you can obtain it with this before sending:
$string=nl2br($string);
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>';
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.
Without regex:
str = str.split("\n").join("<br />");
This worked for me when value came from a TextBox:
string.replace(/\n|\r\n|\r/g, '<br/>');
Try
let s=`This is man._x000D_
_x000D_
Man like dog._x000D_
Man like to drink._x000D_
_x000D_
Man is the king.`;_x000D_
_x000D_
msg.innerHTML = s.replace(/\n/g,"<br />");
_x000D_
<div id="msg"></div>
_x000D_
Regardless of the system:
my_multiline_text.replace(/$/mg,'<br>');
This works for input coming from a textarea
str.replace(new RegExp('\r?\n','g'), '<br />');
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'));
}
}
}
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.
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>
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).
Source: Stackoverflow.com