如何使用Handlebars解码HTML实体

Mav*_*ick 20 javascript templates mustache handlebars.js

我在我正在构建的应用程序上使用Handlebars模板引擎来呈现从服务器获取的数据.

我知道它默认转义HTML值,你必须使用三个括号{{{text}}}才能text: <p>Example</p>呈现为HTML元素.

问题是,如果我收到的数据(包括HTML标签)已经被转义,我该怎么办?

所以,如果我收到如下数据:

text: &lt;p&gt;Example&lt;/p&gt;
Run Code Online (Sandbox Code Playgroud)

如何强制把手翻译并将其渲染为普通HTML?

小智 39

您必须先解码它,然后将其传递给带三个支架的车把.我知道用jQuery解码html实体的小技巧:

// 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>
Run Code Online (Sandbox Code Playgroud)

  • 虽然答案是正确的,但最好不要使用jQuery hack来解码html实体.有关详细信息,请参阅http://stackoverflow.com/a/11715395/1259882. (4认同)
  • +1使用这个漂亮的黑客解码而不需要`.replace(/>/g,'&gt;').replace(/&/ g,'&amp;').replace(/"/ g,'&quot ;').replace(/'/ g,'&#39;').replace(/ </ g,'&lt;')`! (2认同)

Vis*_*h G 7

Handlebars提供帮助程序并在Handlebars_helpers.js下编写如下的自定义帮助程序

Handlebars.registerHelper('encodeMyString',function(inputData){
    return new Handlebars.SafeString(inputData);
});
Run Code Online (Sandbox Code Playgroud)

并在您的.handlebar文件或.hbs文件中使用此帮助程序,如下所示

{{encodeMyString myHTMLData}}
Run Code Online (Sandbox Code Playgroud)

没有Jquery的帮助,您可以在车把内的任何地方使用它.即使您可以使用帮助程序单独传递数据,也可以使用前置和附加标记返回数据.