Does handlebars.js replace newline characters with ?

Question

Trying to use handlebars.js for templating but the library seems to ignore newlines.

What is the correct way to deal with newlines? Should they be replaced manually

Answer 1

For others like me that were following the Getting start code and didn't know why there was no HTML showing up.

in handlebars expressions documentation it states

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

Answer 2

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

Answer 3

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>

Answer 4

I've used the code posted by @Uri and it was very useful.

But I realised that when I register the helper, the function parameter that it receives is not the text, but the function that is called inside the Handlebars template. So first I had to call it to get the text.

In order to clarify, I had to do:

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

This is the only way I could make it work.

Answer 5

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>

Answer 6

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.