如何使用 Handlebars 解码 HTML 实体答案

【问题标题】：How to decode HTML entity with Handlebars如何使用 Handlebars 解码 HTML 实体
【发布时间】：2012-05-26 02:56:41
【问题描述】：

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

我知道默认情况下它会转义 HTML 值，并且您必须使用三方括号 {{{text}}} 才能将 text: <p>Example</p> 呈现为 HTML 元素。

问题是，如果我收到的数据，包括HTML标签，已经被转义了怎么办？

所以，如果我收到如下数据：

text: &lt;p&gt;Example&lt;/p&gt;

如何强制把手翻译它并将其呈现为普通 HTML？

【问题讨论】：

大多数模板语言都假定数据是为目标输出编码的，或者是需要编码的纯文本。它们没有“从任意编码解码”功能。

标签： javascript templates mustache handlebars.js

【解决方案1】：

您必须先对其进行解码，然后将其传递给带有三重括号的车把。我知道一个用 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>

【讨论】：

+1 使用这个不错的 hack 来解码，而不需要 .replace(/>/g, '&gt;').replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;')！
如果可以的话，我不介意为这个答案投票两次。
虽然答案是正确的，但最好不要使用 jQuery hack 来解码 html 实体。有关详细信息，请参阅stackoverflow.com/a/11715395/1259882。

【解决方案2】：

Handlebars 提供帮助器并在 Handlebars_helpers.js 下编写自定义帮助器，如下所示

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

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

{{encodeMyString myHTMLData}}

没有 Jquery 的帮助，您可以在车把内的任何地方使用它。即使您可以使用帮助器单独传递数据，它将返回带有前置和附加标签的数据。

【讨论】：