How do I replace all line breaks in a string with elements?-CodePudding

How can I read the line break from a value with JavaScript and replace all the line breaks with   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."

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

Without regex:

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

CodePudding user response：

This works for input coming from a textarea

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

CodePudding user response：

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.

CodePudding user response：

Regardless of the system:

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

CodePudding user response：

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

CodePudding user response：

Shortest code supporting the most common EOL styles \r, \n, \r\n and using HTML5  :

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

CodePudding user response：

This worked for me when value came from a TextBox:

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

CodePudding user response：

For those of you who just want to allow max. 2   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  

CodePudding user response：

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

$string=nl2br($string);

CodePudding user response：

It will replace all new line with break

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

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

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

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

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

I had a config in PHP that was being passed in from the Controller. (Laravel)

Example: PHP Config

'TEXT_MESSAGE' => 'From:Us\nUser: Call (1800) 999-9999\nuserID: %s'

Then in javascript using es6 reduce. notice I had to have two \\ or the output was not being replace correctly. Here are the parameters that are assoicated with the reduce function

previousValue (the value resulting from the previous call to callbackfn)
currentValue (the value of the current element)
currentIndex Optional
array (the array to traverse) Optional

//p is previousVal
//c is currentVal
String.prototype.newLineReplace = function(){
    return [...arguments].reduce((p,c) => p.replace(/\\n/g,c), this);
}

Here is how i used it in my script.

<script type="text/javascript">var config = @json($config);</script>

config.TEXT_MESSAGE.newLineReplace("<br />")

of course you could just called it on a javascript sring like...

let a = 'From:Us\nUser: Call (1800) 999-9999\nuserID: %s'
var newA = a.newLineReplace("<br />")

//output
'From:Us<br />User: Call (1800) 999-9999<br />userID: %s'

CodePudding user response：

string2 = string2.replace(/(?:\\n)/g, '')