Handlebars 助手 - 返回 HTML 而不是文本答案

【问题标题】：Handlebars helper - returning HTML not textHandlebars 助手 - 返回 HTML 而不是文本
【发布时间】：2013-12-04 23:20:50
【问题描述】：

我为我的模板写了一个简单的助手。代码如下：

Handlebars.registerHelper('splitQuote', function (string) {
    if (string.indexOf('|') !== -1) {
        return string.replace('|', '<span>') + '</span>';
    }
    return string;
});

所以我传递一个字符串，并用'|'分割字符串特点。我也想把第二部分放到 span 标签中。

问题是，返回的结果是纯文本，所以我得到像文本一样的 span 标签，而不是 HTML。

有人知道有什么问题吗？

Tnx

【问题讨论】：

标签： javascript handlebars.js helpers

【解决方案1】：

您不需要使用SafeString。相反，请使用车把上的“三胡”：

来自Handlebars web site，HTML 转义部分：

Handlebars HTML 转义 {{expression}} 返回的值。如果您不希望 Handlebars 转义值，请使用“triple-stash”，{{{.

因此，在您的 html 中使用简单的三引号将避免转义：

{{{splitQuote}}}

【讨论】：

这应该是公认的答案/首选方式

【解决方案2】：

如果你想让 Handlebars 不转义它，你必须在你的助手中将字符串标记为 html。使用Handlebars.safeString 来执行此操作。以下应该适合您的需求

Handlebars.registerHelper('splitQuote', function(string) {
    if (string.indexOf('|') !== -1) {
        return new Handlebars.SafeString(string.replace('|', '<span>') + '</span>');
    }
    return string;
});

如 cmets 中所述，您可能应该在进行自定义格式化之前使用 Handlebars.Utils.escapeExpression(string) 对传递的字符串进行转义以对字符串进行编码。我建议这样写：

Handlebars.registerHelper('splitQuote', function(string) {
    string = Handlebars.Utils.escapeExpression(string);
    if (string.indexOf('|') !== -1) {
        string = string.replace('|', '<span>') + '</span>';
    }
    return new Handlebars.SafeString(string); // mark as already escaped
});

【讨论】：

如果您要使用 SafeString，您应该在添加 <span>s 之前手动对 string 进行 HTML 编码。