CODEWITHSUNDEEP
handlebars.jsclient-side-templating
Uri
Uri

Reputation: 26986

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

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?

Upvotes: 53

Views: 41397

Answers (7)

Tharinda Prabhath
Tharinda Prabhath

Reputation: 91

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

Upvotes: 7

Nagy Wesley
Nagy Wesley

Reputation: 121

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

Upvotes: 0

Douglas Adam Smith II
Douglas Adam Smith II

Reputation: 910

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>

Upvotes: 30

Matt Jenkins
Matt Jenkins

Reputation: 3081

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

Upvotes: 13

ryanw51
ryanw51

Reputation: 210

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.

Upvotes: 3

Uri
Uri

Reputation: 26986

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>

Upvotes: 108

eze.scaruli
eze.scaruli

Reputation: 1227

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.

Upvotes: 1

Related Questions