javascript - Line breaks in JadeMongo output - Stack Overflow

admin管理员组

文章数量:1335584

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

Share Improve this question Follow edited Jun 24, 2015 at 18:08 Paul Schneider asked Jun 24, 2015 at 17:54 Paul SchneiderPaul Schneider 32522 gold badges66 silver badges1818 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

本文标签： javascriptLine breaks in JadeMongo outputStack Overflow