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

Question

我为我的模板写了一个简单的助手程序。这是代码:

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

我传递了一个字符串，并按 '|' 字符拆分该字符串。我还想将第二部分放入 span 标记中。

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

有人知道问题出在哪里吗？

Tnx

- Adrian

Answer 1

您无需使用SafeString。相反，请使用Handlebars中的“三重大括号”：

来自Handlebars网站，HTML转义部分：

Handlebars通过{{expression}}返回的值进行HTML转义。如果您不希望Handlebars转义某个值，请使用“triple-stash”，{{{。

因此，在您的HTML中使用简单的三重引号即可避免转义：

{{{splitQuote}}} 

- Mendes

---

这应该是被接受的答案/首选方法来完成这件事。 - Kupe

Answer 2

如果您不想让Handlebars转义字符串，您需要在helper函数中将其标记为HTML。使用Handlebars.safeString来实现。以下代码应该能满足您的需求。

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

如在评论中提到的那样，您应该使用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
});

- megawac

---

如果您要使用SafeString，那么在添加<span>之前，应该手动对“string”进行HTML编码。 - mu is too short