1

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 \ns

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.

1
  • I read that in the source code you could see the line breaks . and you could use white-space: pre; to see the spaces but that is not what I want. One problem is that you could see the spaces where users hits a lot of spaces.
    – jack blank
    Jul 31, 2016 at 2:29

2 Answers 2

5

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.

2
  • Oh, too late! I was coding the same example. +1 for you.
    – Gabriel
    Jul 31, 2016 at 2:44
  • Works great, seems it's only missing a closing ')'
    – oriel9p
    Mar 27, 2022 at 16:19
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.