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

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

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

和

是模板替换发生的地方。我的问题是项目名称可以包含任何字符，包括单引号和双引号。目前，如果它包含单引号，则会破坏JavaScript代码

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

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

这个链接是为搜索结果页面中的每个结果生成的，所以在JavaScript标记中创建一个单独的方法是不可能的，因为我需要为每个结果生成一个方法

---

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

在小节中声明单独的函数，并在onClick方法中调用这些函数。如果有很多，可以使用命名方案对它们进行编号，或者在onclick中传入一个整数，并在函数中使用一个大的胖switch语句

使用包含JavaScript编码的。

如果它要进入HTML属性，则需要同时进行HTML编码（至少：

到

首先，如果将onclick处理程序设置为以下方式会更简单：

<a id="someLinkId"href="#">Select</a>
<script type="text/javascript">
  document.getElementById("someLinkId").onClick = 
   function() {
      SelectSurveyItem('<%itemid%>', '<%itemname%>'); return false;
    };

</script>


document.getElementById（“someLinkId”）。onClick=
函数（）{
选择SurveyItem（“”），返回false；
};

然后需要为JavaScript转义itemid和itemname（即，
“
变成
\”
，等等）

如果您在服务器端使用Java，可以查看jakarta的common-lang中的类。否则，编写自己的“escapeJavascript”方法不会花费太长时间。
尝试避免在HTML中使用字符串文字，并使用JavaScript绑定JavaScript事件

此外，除非你真的知道自己在做什么，否则要避免使用“href=#”。这会破坏强制中间点击器（tab opener）的可用性



我选择的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>

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


jQuery（函数（$）{
变量l=[[1，'Bar']，[2，'Baz']]；
$（l）.每个函数（k，v）{
$（“#链接"+v[0]）。单击（函数（）{
选择SurveyItem（v[0]，v[1]）；
返回false；
});
});
});
另一个有趣的解决方案可能是：

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

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



然后可以对这两个变量使用标准HTML编码，而不必担心javascript引用的额外复杂性

是的，这确实会创建严格无效的HTML。但是，这是一种有效的技术，所有现代浏览器都支持它

如果是我的，我可能会同意我的第一个建议，并确保值是HTML编码的，并且有单引号转义。
在JavaScript中，您可以将单引号编码为“\x27”，将双引号编码为“\x22”。因此，使用此方法，您可以在（双引号或单引号）内JavaScript字符串文字的引号，使用\x27\x22不受惩罚，无需担心任何嵌入的引号会从字符串中“爆发”

\xXX代表字符数<127，\uxxx代表字符数，因此有了这些知识，您可以为通常白名单之外的所有字符创建一个健壮的JSEncode函数

比如说,

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

这里的答案是，不能使用JavaScript转义引号，需要从转义字符串开始

因此，JavaScript无法处理字符串，Marge说“我会看”Peter“你需要在将数据提供给脚本之前清理你的数据吗？
任何好的模板引擎都会有一个“转义引号”功能。我们的（也是我工作的地方，国产的）还有一个函数可以对javascript的引号进行转义。在这两种情况下，模板变量只是附加了_esc或_js_esc，这取决于您想要的。您永远不应该将用户生成的内容输出到未转义的浏览器，IMHO。
使用隐藏跨距，每个参数一个
和
a然后把它们的值写在里面

例如，
的span看起来像
，在javascript函数
中选择SurveyItem
从这些span的
innerHTML
中选取参数，我遇到了同样的问题，我用一种巧妙的方法解决了它。首先生成全局变量v1、v2和v3。在onclick中，发送一个指示符1，2或3，并在功能检查中检查1、2、3，将v1、v2和v3类似：

onclick="myfun(1)"
onclick="myfun(2)"
onclick="myfun(3)"

function myfun(var)
{
    if (var ==1)
        alert(v1);

    if (var ==2)
        alert(v2);

    if (var ==3)
        alert(v3);
}

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

.NET4.0

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

爪哇

蟒蛇

import json
result = json.dumps(jsString)

PHP

RubyonRails

<%= escape_javascript(jsString) %>

我也遇到了这个问题。我编写了一个脚本，将单引号转换为转义双引号，不会破坏HTML

function noQuote(text)
{
    var newtext = "";
    for (var i = 0; i < text.length; i++) {
        if (text[i] == "'") {
            newtext += "\"";
        }
        else {
            newtext += text[i];
        }
    }
    return newtext;
}

函数noQuote（文本）
{
var newtext=“”；
对于（变量i=0；i
就我个人而言，我认为这种技术是将数据与节点关联起来的一种不好的方法。这是一种稍微高级的技术，但它会给您留下一个有效的页面，并产生相同的数据。
function noQuote(text)
{
    var newtext = "";
    for (var i = 0; i < text.length; i++) {
        if (text[i] == "'") {
            newtext += "\"";
        }
        else {
            newtext += text[i];
        }
    }
    return newtext;
}