Showing new lines <br> in the browser when having \n in the database

Question

In mongo I have a document with a field like reviewText: 'this is line 1\\nthis is line 2', . I got that from a textarea so the \\n is there because the user hit enter. I want to print the text on the screen in a div with a line break (preferably only one line break if he hits many enters) I don't know how to do that I dont get on the screen any \\n s

I do <div class = "displayReview"><%= e.reviewText %></div> in EJS that just prints it all on oneline. It gets me <div class="displayReview">this is line 1 this is line 2</div> in the browser.

I have someplace in my routes that updates the docs like:

    .then(function(returnedReviews){
        console.log(" returnedReview ",returnedReviews);
        returnedReviews.forEach(function(e){
            e.momented = moment(e.createdAt.getTime()).fromNow()
            // e.reviewText = e.reviewText.replace(/\r?\n/g, '<br />')
        })

I tried to do what I have in the comments. but that obviously just put <br /> (the text) in the string and not HTML. I was hoping there was an easy way to do this.

I want to see line breaks when it gets printed to the screen where the user hits enter in the textarea before he sent the form. If the user hits the enter button multiple times in a row there should be only one line break.

Answer 1

First, standardize the newline characters and reduce them to just one (in keeping with your requirements):

e.reviewText = e.reviewText.replace(/\r?\n/g, '\n');
e.reviewText = e.reviewText.replace(/\n+/g, '\n');

This puts your data in a standard form. Displaying that data in a particular way is the job of your template. I haven't used EJS, but looking at their sample code it looks like something along these lines should work:

<div class = "displayReview">
  <% e.reviewText.split('\n').forEach(function(ln) {%>
     <%= ln %><br>
  <% } %>
</div>

In this particular case, perhaps after the template renders the data the data itself is thrown away, so being particular about separating data-manipulation from presentation is a formality, but it's still a good habit and makes the code easier to modify later.

Answer 2

It's also worth mentioning that JavaScript isn't strictly required to achieve this (except if the user hits the enter button multiple times in a row there will be multiple line breaks), if you have the capability to modify the CSS for .displayReview.

This can be achieved by changing the white-space property to be pre, pre-line, or pre-wrap.

Example:

.displayReview {
  white-space: pre-wrap;
}

From MDN , the differences between pre, pre-line, and pre-wrap are

pre

Sequences of whitespace are preserved, lines are only broken at newline characters in the source and at <br> elements.

pre-wrap

Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

pre-line

Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.