Handlebars helper - возврат HTML без текста

Я написал простой помощник для моего шаблона. Здесь код:

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

Итак, я передаю строку и разбиваю строку на '|' персонаж. Я также хочу поместить вторую часть в теги span.

Проблема в том, что возвращаемый результат является чистым текстом, поэтому я получаю теги span, такие как текст, а не HTML.

Кто-нибудь знает, что такое улов?

Тпх

Ответ 1

Вы должны пометить строку как html в своем помощнике, если хотите, чтобы Handlebars не удалялись. Используйте 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
});

Ответ 2

Вам не нужно использовать SafeString. Вместо этого используйте "тройные усы" из руля:

От веб-сайт Handlebars, раздел Escaping HTML:

Handlebars HTML-escapes значения, возвращаемые {{expression}}. Если вы не хотите, чтобы Handlebars избегали значения, используйте "triple-stash", {{{.

Итак, простая тройная цитата в вашем html избежит экранирования:

{{{splitQuote}}}