Escape Mustache变量包含JavaScript的撇号 [英] Escape Mustache variable containing apostrophe for JavaScript

问题描述

我有一个包含撇号的变量（ {{title}} ）。 Mustache转义为&＃39; 。

I have a variable ({{title}}) which contains an apostrophe. Mustache escapes this as '.

但是，以下模板会导致JavaScript错误（预期令牌'）'）：

However, the following template results in a JavaScript error (Expected token ')'):

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

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

After Mustache rendering, the syntax error is clear ('Joe's Lame?'):

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

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

I am still learning Mustache and while this example is contrived, what is the proper way to escape variables in these situations.

小提琴供参考。

推荐答案

所以如果它不一定是Mustache，你可以使用一个名为把手。

So if it doesn't have to be Mustache, you can use a superset of Mustache called Handlebars.

首先注册一个Handlebars助手：

First register a Handlebars helper:

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);

在此小提琴。

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

Mustache is really cool and it's available in almost any programming language. Handlebars is awesome and is used e.g. in Backbone Thorax and assemble, a powerful static web-site generator.

编辑：替代解决方案

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

When using ECMAScript 5 (and with shim/shiv/polyfills that should be working with IE8 as well), one could prepare the view-object for Mustache in the following way. I admit, that this is not a very handy solution, but when producing JavaScript output is rare, it might be acceptable 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 ）可以解决问题。可以写一个通用对象装饰器它为ea定义了一个getter ch不动产返回转义字符串值。

Defining a new property (via Object.defineProperty) does the trick. One could write a generic object decorator which defines a getter for each real property returning the escaped string value.

这是小提琴

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

一旦拉动请求合并而且新版本的Mustache发布后，这个问题应该以Mustache native way解决。

Once this pull-request is merged and a new version of Mustache is published, this problem should be solved in a "Mustache native way".

这篇关于Escape Mustache变量包含JavaScript的撇号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！