如何在 onClick 处理程序中转义 JavaScript 代码中的字符串？

IT技术 javascript html string escaping
2021-03-09 10:57:37

也许我只是想得太难了，但是我在弄清楚链接的 onClick 处理程序中的某些 JavaScript 代码中的字符串使用什么转义时遇到了问题。例子：

<a href="#" onclick="SelectSurveyItem('<%itemid%>', '<%itemname%>'); return false;">Select</a>

该<%itemid%>和<%itemname%>在哪里模板替换发生。我的问题是项目名称可以包含任何字符，包括单引号和双引号。目前，如果它包含单引号，它会破坏 JavaScript 代码。

我的第一个想法是使用模板语言的函数来 JavaScript 转义项目名称，它只是转义引号。这不会解决包含双引号的字符串的情况，这会破坏链接的 HTML。这个问题一般是怎么解决的？我是否需要 HTML 转义整个 onClick 处理程序？

如果是这样，那看起来真的很奇怪，因为模板语言的转义函数也会对括号、引号和分号进行 HTML 化......

此链接是为搜索结果页面中的每个结果生成的，因此无法在 JavaScript 标记内创建单独的方法，因为我需要为每个结果生成一个。

此外，我使用的是我工作的公司自己开发的模板引擎，因此特定于工具包的解决方案对我没有用。

6个回答

在 JavaScript 中，您可以将单引号编码为“\x27”，将双引号编码为“\x22”。因此，使用此方法，一旦您位于 JavaScript 字符串文字的（双引号或单引号）内，就可以不受惩罚地使用 \x27 \x22 ，而不必担心任何嵌入的引号“脱离”您的字符串。

\xXX 用于字符 < 127，而 \uXXXX 用于Unicode，因此掌握了这些知识，您可以为通常白名单之外的所有字符创建一个强大的JSEncode函数。

例如，

<a href="#" onclick="SelectSurveyItem('<% JSEncode(itemid) %>', '<% JSEncode(itemname) %>'); return false;">Select</a>
你拯救了我的现实和未来的一些日子
2021-04-30 10:57:37

根据服务器端语言，您可以使用以下语言之一：

.NET 4.0

string result = System.Web.HttpUtility.JavaScriptStringEncode("jsString")

Java

import org.apache.commons.lang.StringEscapeUtils;
...

String result = StringEscapeUtils.escapeJavaScript(jsString);

Python

import json
result = json.dumps(jsString)

PHP

$result = strtr($jsString, array('\\' => '\\\\', "'" => "\\'", '"' => '\\"', 
                                 "\r" => '\\r', "\n" => '\\n' ));

Ruby on Rails

<%= escape_javascript(jsString) %>
对于 .NET，您的答案似乎是唯一的方法。 btn.OnClientClick = "return confirm('Are you sure?')";是有效的，但唯一的方法是在那里放一个单引号（例如"return confirm('You're sure, right?');"，对其进行编码......既不是反斜杠也不是&apos;工作。
2021-04-18 10:57:37

使用隐藏跨度，每个参数一个<%itemid%>，<%itemname%>并在其中写入它们的值。

例如，跨度 for<%itemid%>看起来像<span id='itemid' style='display:none'><%itemid%></span>和 在 javascript 函数SelectSurveyItem中从这些跨度'中选择参数innerHTML。

这真的是最好的答案。如果您将值放在 <input type=hidden id="itemid" value="<%:itemid%>"> 中，然后使用 jQuery $('#itemid').val() 获取它们，则不需要特殊治疗。
2021-05-09 10:57:37

如果它进入一个HTML属性，你就需要在两个HTML编码（至少包括：>到&gt; <到&lt和"到&quot;）它，并逃脱单引号（用反斜杠），所以它们不会与你的JavaScript引用干扰。

最好的方法是使用您的模板系统（如有必要，扩展它），但您可以简单地制作几个转义/编码函数并将它们都包装在那里的任何数据周围。

是的，对 HTML 属性的全部内容进行 HTML 转义是完全有效的（甚至是正确的），即使它们包含 javascript。

尽量避免在 HTML 中使用字符串文字，并使用 JavaScript 绑定 JavaScript 事件。

另外，除非您真的知道自己在做什么，否则请避免使用 'href=#' 。它破坏了强制中间点击器（标签打开器）的可用性。

<a id="tehbutton" href="somewhereToGoWithoutWorkingJavascript.com">Select</a>

我选择的 JavaScript 库恰好是 jQuery：

<script type="text/javascript">//<!-- <![CDATA[
jQuery(function($){
   $("#tehbutton").click(function(){
        SelectSurveyItem('<%itemid%>', '<%itemname%>');
        return false;
   });
});
//]]>--></script>

如果您碰巧呈现这样的链接列表，您可能想要这样做：

<a id="link_1" href="foo">Bar</a>
<a id="link_2" href="foo2">Baz</a>

<script type="text/javascript">
   jQuery(function($){
        var l = [[1,'Bar'],[2,'Baz']];
        $(l).each(function(k,v){
           $("#link_" + v[0] ).click(function(){
                SelectSurveyItem(v[0],v[1]);
                return false;
           });
        });
   });
 </script>
其它你可能感兴趣的问题
上一篇在 HTML5 画布上绘制旋转文本 下一篇从经纬度获取国家