在onclick事件中传递参数时如何转义撇号

Question

我将公司名称传递给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事件的最佳方法，并且在消息中正确显示它，而不进行多次替换（如果有更好的方法）。

- RememberME

---

也许我太傻了，但这里的具体问题是什么？你不想要确认消息中的 ' 吗？还是你想要 ''？ - griegs

Answer 1

我看到有两个选项：

1. 如果您用双引号(")来包装参数，而不是单引号(')，那么您就完全不需要转义了。HTML编码会处理任何引号（如果它们在字符串中），而撇号则不会成为问题。不过，由于javascript已经用引号括起来了，所以您需要反斜杠转义您的引号。例如：

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

2. 反斜杠转义公司名称，因为只有最终的javascript字符串需要转义撇号，而不是HTML。例如：

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

- Brenton Alker

---

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

Answer 2

你在HTML属性值中使用了一个JavaScript字符串字面量。

因此，你需要先对值进行JS编码（将'替换为\'，将\替换为\\），然后进行HTML编码。目前你正在HTML编码'（这是无效的，因为浏览器会在JS引擎看到它之前将其解码回撇号）...然后再次HTML编码，文字直接变成了'。

使用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。）

请参阅这个经典WTF，了解其中一个可能会对您产生负面影响的方法。

- bobince

Answer 3

我五年后遇到了这个问题，所以我想分享一下解决方法。

请查看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函数的参数，您不希望有额外的引号。

- Atalie