Question

我有一个包含撇号的变量（{{title}}）。 Mustache将其作为'转义。

但是，以下模板会导致JavaScript错误（Expected token ')'）：

<a href="javascript:confirm('{{title}}?');">{{title}}</a>

在Mustache渲染之后，语法错误很明显（'Joe's Lame?'）：

<a href="javascript:confirm('Joe's Lame?');">Joe's Lame</a>

我还在学习胡子，虽然这个例子是设计的，但在这些情况下逃避变量的正确方法是什么。

fiddle供参考。

Answer 1

因此，如果它不必是Mustache，您可以使用名为Handlebars的Mustache超集。

首先注册一个Handlebars助手：

Handlebars.registerHelper('escapeJs', function(str) {
    return str.replace(/[\'\"\\\/]/gm, function (c) {
        return '\\' + c;
    });
});

你打电话给你的助手{{escapeJs title}}：

var view = {
    title: "Joe's Lame\"\\/€"
};

var template = Handlebars.compile(
    "<a href=\"javascript:confirm('{{escapeJs title}}');\">{{title}}</a>");
var output = template(view);

在此fiddle中查看。

Mustache非常酷，它几乎可以用于任何编程语言。把手很棒并可用于例如在Backbone Thorax和assemble，一个强大的静态网站生成器。

编辑：替代解决方案

当使用ECMAScript 5（以及应该与IE8一起使用的shim / shiv / polyfill）时，可以通过以下方式为Mustache准备视图对象。我承认，这不是一个非常方便的解决方案，但是当生成JavaScript输出很少时，它可能是可以接受的IMO。

function escapeJs (str) {
    return str.replace(/[\'\"\\\/]/gm, function (c) {
        return '\\' + c;
    });
}

var view = {
    title: "Joe's Lame"
};

Object.defineProperty(view, 'titleJsEnc', {
    enumerable: false,
    get: function () { return escapeJs(this.title); }
});

var output = Mustache.render(
    "<a href=\"javascript:confirm('{{titleJsEnc}}');\">{{title}}</a>", view);

定义新属性（通过Object.defineProperty）可以解决问题。可以编写一个通用对象装饰器，它为每个返回转义字符串值的不动产定义一个getter。

以下是fiddle

编辑：替代方案：等待新版本的Mustache

合并此pull-request并发布新版本的Mustache后，应以“Mustache本地方式”解决此问题。

Answer 2

P/S：我知道这是一个旧帖子，以防万一有人觉得它有用。和我一样，在我意识到三括号解决方案之前，我也发现了你的帖子。

在 Mustache 中，只需使用三方括号即可，无需如此头疼：

{{{title}}}

但是对于您的情况，我认为仅仅转义单引号是不够的。您还应该像这样反转单引号和双引号：

<a href='javascript:confirm("{{{title}}}?");'>{{{title}}}</a>

Escape Mustache变量包含JavaScript的撇号

2 个答案: