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 after the templating action?

Answer 1

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 2

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 3

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 4

Simply use the CSS property white-space and set the value as pre-line

For a example in your markup file:

<p style="white-space: pre-line">
  {{text}}
</p>

Then you can pass the text containing break lines as below

{text: "First line

        Second line"
}

The result will look like

First line

Second line

Answer 5

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.

Answer 6

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 7

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", {{{