I've read all the questions here on stackoverflow regarding this matter, but none has satisfied my needs.

I have a simple message board, where the user can post ments via textarea. those are stored in Mongo and displayed via jade

But all the line breaks are lost.

they ARE stored as \r\n in the DB, but are not displayed when rendered.

replacing them with <br />s doesn't help either, as they are just rendered as strings.

wrapping the ments with <pre> does help... but it stops the text from floating around embedded pictures.

is there no easy way to output a text JUST as it was stored?

this is with <span> and <div> instead of <pre>: This is how i want it to float, but line breaks are not rendered

jade template:

  if (user)
    p You are logged in as #{user.username}  
      a(href='/logout') [Log Out]
  else
    a(href='/login') Log In

 .threadWrapper
   each post, i in posts
    .thread.col-md-12
      a(href="/thread/#{post._id}")
        span#postTitle #{post.postTitle}
      |  
      span#mentCount (#{postments.length})
      |  created at 
      span#createdAt #{post.createdAt}
      |  by 
      span#op #{post.op}
      if (user)
        button.close.deleteThreadButton(type='submit', aria-label='Close')
          span(aria-hidden='true') ×
      //button.deleteThreadButton(type="submit") X
      .ThreadContent
        if post.postFileLink
          case post.postFileType
            when "image/png"
            when "image/gif"
            when "image/jpeg"
              img(src="/files/#{post.postFileLink}")
            when "video/mp4"
            when "video/webm"
              video(width="200", height="150", controls)
                source(src="/files/#{post.postFileLink}", type="#{post.postFileType}")
                | Sorry, your browser does not support the video tag. No Videos for you!
      span#threadContent #{post.postContent}
      .clearfix

I've read all the questions here on stackoverflow regarding this matter, but none has satisfied my needs.

I have a simple message board, where the user can post ments via textarea. those are stored in Mongo and displayed via jade

But all the line breaks are lost.

they ARE stored as \r\n in the DB, but are not displayed when rendered.

replacing them with <br />s doesn't help either, as they are just rendered as strings.

wrapping the ments with <pre> does help... but it stops the text from floating around embedded pictures.

is there no easy way to output a text JUST as it was stored?

this is with <span> and <div> instead of <pre>: This is how i want it to float, but line breaks are not rendered

jade template:

  if (user)
    p You are logged in as #{user.username}  
      a(href='/logout') [Log Out]
  else
    a(href='/login') Log In

 .threadWrapper
   each post, i in posts
    .thread.col-md-12
      a(href="/thread/#{post._id}")
        span#postTitle #{post.postTitle}
      |  
      span#mentCount (#{post.ments.length})
      |  created at 
      span#createdAt #{post.createdAt}
      |  by 
      span#op #{post.op}
      if (user)
        button.close.deleteThreadButton(type='submit', aria-label='Close')
          span(aria-hidden='true') ×
      //button.deleteThreadButton(type="submit") X
      .ThreadContent
        if post.postFileLink
          case post.postFileType
            when "image/png"
            when "image/gif"
            when "image/jpeg"
              img(src="/files/#{post.postFileLink}")
            when "video/mp4"
            when "video/webm"
              video(width="200", height="150", controls)
                source(src="/files/#{post.postFileLink}", type="#{post.postFileType}")
                | Sorry, your browser does not support the video tag. No Videos for you!
      span#threadContent #{post.postContent}
      .clearfix

• javascript
• node.js
• mongodb
• pug

• Please include your current Jade template. – vzsg Commented Jun 24, 2015 at 18:04
• updated the question with template. (before switching span#threadContent -> pre#threadContent) – Paul Schneider Commented Jun 24, 2015 at 18:08

1 Answer 1

Your database does contain the text as it was stored, but textarea's handle linebreaks differently from "regular" HTML elements (like <div>, <p>, etc), where consecutive sequences of whitespace are collapsed into a single whitespace.

You can probably solve it using CSS.

For example:

- var text = 'foo\r\nbar\r\nxxx';

p(style = 'white-space: pre-wrap')= text

Or, you can replace the linebreaks to <br> and have Jade not escape the output:

- var text = 'foo\r\nbar\r\nxxx'.replace(/\r\n/g, '<br>');

p !{text}

However, this may leave you with potential security issues if your users enter malicious <script> blocks in the ments (which will end up unescaped on your page, unless you filter them out somehow).