Does handlebars.js replace newline characters with <br>?

By inserting three braces instead of the conventional two, you can instruct handlebars to halt its normal techniques of escaping html expressions such as <br> and <p>;

For example, from the handlebars website:

"Handlebars HTML-escapes values returned by a {{expression}}. If you don't want Handlebars to escape a value, use the "triple-stash", {{{."

    <div class="entry">
      <h1>{{title}}</h1>
      <div class="body">
        {{{body}}}
      </div>
    </div>

with this context:

    {
      title: "All about <p> Tags",
      body: "<p>This is a post about &lt;p&gt; tags</p>"
    }

results in:

    <div class="entry">
      <h1>All About &lt;p&gt; Tags</h1>
      <div class="body">
        <p>This is a post about &lt;p&gt; tags</p>
      </div>
    </div>

Any solution that uses triple staches will open your application to XSS attacks unless you implement something to sanitize the HTML.

I would suggest using the <pre> tag rather than creating a custom helper.

Here are two approaches I prefer over the currently-accepted answer:

1. Use white-space: pre-wrap; or white-space: pre; on the element where you want to preserve line-breaks (allowing or suppressing natural line wrapping respectively). If you want sequences of whitespace to be collapsed, which is how text in HTML is normally presented, use white-space: pre-line; but note that IE8 and below do not support this. https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

2. Or here's a version of the template helper that doesn't require any copying and pasting of external code:

   Template.registerHelper('breaklines', function (text) {
     text = Blaze._escape(text);
     text = text.replace(/(\r\n|\n|\r)/gm, '<br>');
     return new Spacebars.SafeString(text);
   });
   

   See https://github.com/meteor/meteor/blob/devel/packages/blaze/preamble.js for Blaze._escape

It doesn't do so automatically, but using the helpers feature this can be achieved:

JS:

Handlebars.registerHelper('breaklines', function(text) {
    text = Handlebars.Utils.escapeExpression(text);
    text = text.replace(/(\r\n|\n|\r)/gm, '<br>');
    return new Handlebars.SafeString(text);
});

HTML template:

<div>
    {{breaklines description}}
</div>