How to decode HTML entity with Handlebars

Question

I'm using the Handlebars templating engine on the app I'm building to render the data I get from the server.

I know that it escapes HTML values by default and that you have to use the triple brackets {{{text}}} in order for text: <p>Example</p> to be rendered as an HTML element.

The problem is, what do I do if the data I receive, including the HTML tags, is already escaped?

So, if I receive data like:

text: <p>Example</p>

How do I force handlebars to translate it and render it as normal HTML?

Answer 1

Handlebars provides helpers and write a custom helper like follows under Handlebars_helpers.js

Handlebars.registerHelper('encodeMyString',function(inputData){
    return new Handlebars.SafeString(inputData);
});

and use this helper in your .handlebar files or .hbs files as follows

{{encodeMyString myHTMLData}}

Without help of Jquery you can use it any where inside your handlebars. Even you can use the helper to pass the data alone and which will return the data with prepended and appended tags.

Answer 2

You have to decode it first, then pass it to handlebars with triple brackets. I know a small tip to decode html entities with jQuery:

// encoded is "<p>Example</p&gt" in your example
var decoded = $('<textarea />').html(encoded).val();
// decoded should now return <p>Example</p>