How to decode HTML entity with Handlebars

javascript templates mustache handlebars.js
Maverick picture Maverick · May 18, 2012 · Viewed 25.7k times · Source

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: &lt;p&gt;Example&lt;/p&gt;

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

Answer

J&#233;r&#244;me Mahuet picture Jérôme Mahuet · May 18, 2012

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 "&lt;p&gt;Example&lt;/p&gt" in your example
var decoded = $('<textarea />').html(encoded).val();
// decoded should now return <p>Example</p>

Related questions

Iterate over an object for Handlebars?

So this is the general gist of my data (copied the look from chrome webkit inspector). > Object > Fruit: Array[2] > 0: Object name: "banana" color: "yellow" animalthateats: "monkey" id: 39480 > 1: Object length: 2 > Vegetables: Array[179] > Dairy: Array[2] > …

Read More
Handlebars.js using ../ to reference parent Context

Lets say I have the following JSON and handlebars.js template : JSON { rootPath: '/some/path/', items:[ { title: 'Hello World', href: 'hello-world' }, { title: 'About', href: 'about' }, { title: 'Latest News', href: 'latest-news' } } Template <script id="test-template" type="text/x-handlebars-template"&…

Read More
How do I accomplish an if/else in mustache.js?

It seems rather odd that I can't figure how to do this in mustache. Is it supported? This is my sad attempt at trying: {{#author}} {{#avatar}} <img src="{{avatar}}"/> {{/avatar}} {{#!avatar}} <img src="/images/default_avatar.png" …

Read More