Handlebars Escape String

Question

Currently, I'm running into a problem with the triple-stash helper in handlebars. I have a string coming from a service which I do not have control of and it is returning escaped html which has already escaped html inside of it. To clarify below is an example:

<p><span class=\"font-bold\">content content Support</span>, content content   content content content.</p>

Obvisouly, when using the triple-stash, I would get

<p>&lt;span class=\"font-bold\"&gt;content content Support&lt;/span&gt;, content content &nbsp; content content content.</p>

Since it is nested, the span inside isn't unescaped (if that makes sense).

I was wondering if I could overload a method or something to help me recursively unescape. Or is there a better solution out there?

Answer 1

I know the question is from 2014, Handlebars documentation now proposes this simple solution:

use "triple-stash" like this {{{expression}}} if you don't want to escape a value.

If you want more control register an helper like explained in the example given from the same documentation.

Answer 2

Try using this helper. It should work

Handlebars.registerHelper('html_decoder', function(text) {
  var str = unescape(text).replace(/&/g, '&');

  var div = document.createElement('div');
  div.innerHTML = str;
  return div.firstChild.nodeValue; 
});

If you using Ember, it might be like this

Ember.Handlebars.helper('html_decoder', function(text) {
  var str = unescape(text).replace(/&/g, '&');

  var div = document.createElement('div');
  div.innerHTML = str;
  return div.firstChild.nodeValue; 
});

And use it like

{{html_decoder myString}}