在 onclick 事件中传递参数时转义撇号答案

【问题标题】：Escape apostrophe when passing parameter in onclick event在 onclick 事件中传递参数时转义撇号
【发布时间】：2010-05-17 00:14:09
【问题描述】：

我将公司名称传递给 onclick 事件。一些公司名称中有撇号。我在 company_name 字段中添加了 '.Replace("'", "'")'。这允许 onclick 事件触发，但确认消息显示为“Jane's Welding Company”。

<a href="#" onclick="return Actionclick('<%= Url.Action("Activate", new {id = item.company_id}) %>', '<%= Html.Encode(item.company1.company_name.Replace("'", "&#39;")) %>');" class="fg-button fg-button-icon-solo ui-state-default ui-corner-all"><span class="ui-icon ui-icon-refresh"></span></a>

<script type="text/javascript">
function Actionclick(url, companyName) 
{
    if (confirm('This action will activate this company\'s primary company ('+companyName+') and all of its other subsidiaries.  Continue?')) 
    {
        location.href = url;
    };
};

编辑确认消息显示 39;在消息中而不是 '.当我在这里输入它时，它取代了 39;带一个'。添加了空格，这样就不会发生。我想知道将它传递给我的 onclick 事件的最佳方法，并在消息中正确显示它而不进行多次替换（如果有更好的方法）。

【问题讨论】：

也许我很傻，但这里的具体问题是什么？您不想要确认消息中的 ' 还是想要 ''？

标签： jquery html asp.net-mvc parameters apostrophe

【解决方案1】：

在我看来有两种选择。

如果您将参数用引号 (") 而不是撇号/单引号 (') 括起来，那么您根本不需要转义它。HTML 编码将负责对任何引号进行编码（如果它们在字符串中） ) 并且撇号不会有问题。不过，由于 javascript 已经包含在引号中，因此您需要使用反斜杠转义引号。例如：

onclick="return Actionclick(\"<%= Url.Action("Activate", new {id = item.company_id}) %>\", \"<%= Html.Encode(item.company1.company_name) %>\");"
反斜杠转义公司名称，因为它只是需要转义撇号的最终 javascript 字符串，而不是 HTML。例如：

onclick="return Actionclick('<%= Url.Action("Activate", new {id = item.company_id}) %>', '<%= Html.Encode(item.company1.company_name.Replace("'", "\\'")) %>');"

【讨论】：

我错过了 #2 中反斜杠本身的转义。已编辑。

【解决方案2】：

HTML 属性值中有一个 JavaScript 字符串文字。

因此，您需要首先对值进行 JS 编码（将 ' 替换为 \' 和 \ 替换为 \\），然后 HTML 编码。目前，您正在对 ' 进行 HTML 编码（这将是无效的，因为浏览器会在 JS 引擎看到它之前将其解码回撇号）......然后再次对其进行 HTML 编码，使其字面意思是 @987654327 @。

使用 JSON 编码器将字符串（或任何其他值类型）转换为 JavaScript 文字。

但是。在字符串中编写 JavaScript 非常糟糕。跟踪多层逃逸并不是大脑擅长的事情。所以不要这样做。始终避免使用内联事件处理程序属性。相反，使用静态脚本并从 JavaScript 本身分配处理程序，使用不显眼的脚本。

<a class="dangerous fg-button fg-button-icon-solo ui-state-default ui-corner-all"
    href="<%= Server.HTMLEncode(Url.Action("Activate", new {id = item.company_id})) %>"
    title="This action will activate this company's primary company (<%= Server.HTMLEncode(companyName) %>) and all of its other subsidiaries."
>
    <span class="ui-icon ui-icon-refresh"></span>
</a>

（我将使用 jQuery，因为您的标签中有它：）

<script type="text/javascript">
    $('.dangerous').click(function() {
        return confirm(this.title+' Continue?');
    });
</script>

但请注意，这是对<a> 的滥用。对某事进行主动更改的操作绝不应作为 GET 请求发送或被允许接收。您应该改为使用提交 POST 请求的按钮（直接作为表单或通过 AJAX）。（您还应该考虑使用 ASP.NET 的内置控件而不是模板化的值，以避免不得不调用 HTMLEncode 这么多。）

请参阅this classic WTF，了解这会咬你的一种方式。

【讨论】：

【解决方案3】：

5 年后我才遇到这种情况，所以我将分享对我有用的方法。

在 MSDN 上查看 HttpUtility.JavaScriptStringEncode

在设置属性值时，您可以使用它在服务器端对字符串进行编码。这将生成撇号的 unicode 表示形式 - “\u0027”，可以将其传递给 JavaScript onclick。

对于原始示例：

item.company1.company_name = HttpUtility.JavaScriptStringEncode("Jane's Welding Company");

会变成

"Jane'\u0027s Welding Company"

关于 HttpUtility.JavaScriptStringEncode 的注释 - 您可以选择指定一个布尔值来使用双引号对字符串进行编码 (bool addDoubleQuotes)。但是，由于此字符串将用作 JavaScript 函数的参数，因此您不需要额外的引号。

【讨论】：