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

Posted 2023-02-22

【中文标题】Handlebars 助手 - 返回 HTML 而不是文本

【英文标题】：Handlebars helper - returning HTML not text

【发布时间】：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

【参考方案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 编码。