Escape Mustache变量包含JavaScript的撇号

Question

我有一个{{title}}包含撇号的变量().胡子逃脱了这一点'.

但是,以下模板会导致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>

我仍在学习胡子,虽然这个例子是人为的,但在这些情况下逃避变量的正确方法是什么.

该小提琴供参考.

Answer 1

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

在 Mustache 中，只需使用三重括号即可，无需那么头疼：

{{{title}}}

但对于你的情况，我认为简单地转义单引号是不够的。您还应该反转单引号和双引号，如下所示：

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

Answer 2

因此，如果不一定是 Mustache，您可以使用 Mustache 的超集，称为Handlebars。

\n\n

首先注册一个 Handlebars 助手：

\n\n

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

\n\n

你这样称呼你的助手{{escapeJs title}}：

\n\n

var view = {\n    title: "Joe\'s Lame\\"\\\\/\xe2\x82\xac"\n};\n\nvar template = Handlebars.compile(\n    "<a href=\\"javascript:confirm(\'{{escapeJs title}}\');\\">{{title}}</a>");\nvar output = template(view);\n

\n\n

在此小提琴中实时查看。

\n\n

Mustache 真的很酷，几乎可以用在任何编程语言中。车把非常棒，可用于Backbone Thorax和组装等功能强大的静态网站生成器。

\n\n

编辑：替代解决方案

\n\n

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

\n\n

function escapeJs (str) {\n    return str.replace(/[\\\'\\"\\\\\\/]/gm, function (c) {\n        return \'\\\\\' + c;\n    });\n}\n\nvar view = {\n    title: "Joe\'s Lame"\n};\n\nObject.defineProperty(view, \'titleJsEnc\', {\n    enumerable: false,\n    get: function () { return escapeJs(this.title); }\n});\n\nvar output = Mustache.render(\n    "<a href=\\"javascript:confirm(\'{{titleJsEnc}}\');\\">{{title}}</a>", view);\n

\n\n

定义一个新属性（通过Object.defineProperty）就可以了。人们可以编写一个通用对象装饰器，它为每个返回转义字符串值的实际属性定义一个 getter。

\n\n

这是小提琴

\n\n

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

\n\n

一旦这个拉取请求被合并并发布了 Mustache 的新版本，这个问题应该以“Mustache 原生方式”得到解决。

\n