Wie entkommen ich einen String in JavaScript-Code innerhalb eines onClick-Handler?

Question

Vielleicht bin ich nur darüber nachgedacht zu hart, aber ich habe ein Problem, herauszufinden, was zu entkommen onClick-Handler innerhalb eines Links in einigen JavaScript-Code auf einer Schnur zu verwenden. Beispiel:

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

Die <%itemid%> und <%itemname%> sind, wo Vorlage Substitution auftritt. Mein Problem ist, dass der Elementname alle Zeichen enthalten, einschließlich einfache und doppelte Anführungszeichen. Derzeit wenn es einfache Anführungszeichen enthält es bricht den JavaScript-Code.

Mein erster Gedanke war die Template-Sprache der Funktion zu JavaScript-entkommen dem Elementnamen zu verwenden, die nur die Zitate entkommen. Das wird den Fall des String mit doppelten Anführungszeichen nicht beheben, die den HTML-Code der Verbindung bricht. Wie wird dieses Problem normalerweise angesprochen? Muß ich die gesamten onClick-Handler in HTML-entkommen?

Wenn ja, die wirklich seltsam aussehen würden, da die Escape-Funktion der Template-Sprache für das wäre htmlify auch die Klammern, Zitate und Semikolons ...

Dieser Link für jedes Ergebnis wird in einer Suchergebnisseite generiert, so dass in einem JavaScript-Tag ein separates Verfahren zu schaffen ist nicht möglich, weil ich eine proes Ergebnis zu erzeugen brauchen würde.

Auch ich bin mit einem Template-Engine, die bei der Firma, die ich für home-grown war arbeiten, so Toolkit spezifische Lösungen werden mir nicht von Nutzen sein.

Answer 1

In JavaScript können Sie einfache Anführungszeichen als „\ x27“ und doppelte Anführungszeichen als „\ x22“ kodieren. Daher kann mit dieser Methode können Sie, wenn Sie innerhalb der (Doppel- oder Einzel) Quotes eines JavaScript Stringliteral sind, verwenden Sie die \ x27 \ x22 ungestraft ohne Angst vor irgendwelchen eingebetteten Anführungszeichen „Ausbrechen“ des String.

\ xXX ist für Zeichen <127 und \ uXXXX Unicode , so mit diesem bewaffnet Wissen Sie können eine robuste JSEncode Funktion für alle Charaktere erstellen, die aus der üblichen weißen Liste sind.

Beispiel:

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

Answer 2

Je nach serverseitige Sprache, Sie eine davon verwenden:

.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) %>

Answer 3

versteckte Spannweiten verwenden, jeweils eine für jede der Parameter <%itemid%> und <%itemname%> und schreiben in ihnen ihre Werte.

Zum Beispiel kann die Spanne für <%itemid%> wie <span id='itemid' style='display:none'><%itemid%></span> aussehen würde und in der JavaScript-Funktion SelectSurveyItem die Argumente aus diesen Spannweiten innerHTML wählen.

Answer 4

Versuchen Sie es mit String-Literale in Ihrem HTML vermeiden und verwenden JavaScript JavaScript-Ereignisse zu binden.

Auch vermeiden 'href = #', wenn Sie wirklich wissen, was Sie tun. Es bricht so viel Benutzerfreundlichkeit für den Zwangs middleclickers (Tab Öffner).

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

Meine JavaScript-Bibliothek der Wahl passiert einfach jQuery sein:

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

Wenn Sie eine Liste von Links wie das geschehen zu machen, können Sie dies tun wollen:

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

Answer 5

Wenn es in ein HTML-Attribut gehen, müssen Sie sowohl HTML-Codierung (als Minimum: > &gt; < &lt und " ") es, und entkommen Apostrophe (mit einem umgekehrten Schrägstrich), so dass sie nicht stören Ihr Javascript zitieren.

Der beste Weg ist es mit Ihrem Template-System zu tun (ausfahrende es, falls erforderlich), aber man konnte einfach ein paar Flucht / Codierung Funktionen machen und wickeln sie beide um alle Daten, die da drin los ist.

Und ja, es ist vollkommen gültig (richtig, auch) auf den gesamten Inhalt der HTML-Attribute HTML-entkommen, auch wenn sie Javascript erlaubt.

Answer 6

Eine weitere interessante Lösung könnte sein, dies zu tun:

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

Dann können Sie eine Standard-HTML-Codierung auf beiden Variablen verwenden, ohne sich um die zusätzliche Komplikation der Javascript kümmern zitieren.

Ja, das hat erstellen HTML, die streng ungültig ist. Allerdings ist es ist eine gültige Technik und alle modernen Browser unterstützen es.

Wenn es meine war, würde ich wahrscheinlich mit meinem ersten Vorschlag gehen, und sicherzustellen, dass die Werte HTML-kodierte und haben Apostrophe entkommen.

Answer 7

Deklarieren separate Funktionen im und die in Ihrem onClick Methode aufrufen. Wenn Sie viele haben könnten Sie ein Namensschema, das Zahlen ihnen verwenden, oder eine ganze Zahl passieren in Ihrer onClicks und haben eine große, fette switch-Anweisung in der Funktion.

Answer 8

Ich habe dieses Problem auch konfrontiert. Ich habe ein Skript einfache Anführungszeichen in entkam doppelte Anführungszeichen zu konvertieren, die nicht den HTML brechen.

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

Answer 9

Mit dem Microsoft Anti-XSS-Bibliothek , die einen JavaScript codieren enthält.

Answer 10

Als erstes wäre es einfacher, wenn die Onclick-Handler auf diese Weise eingestellt wurden:

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

</script>

Dann itemid und itemname müssen JavaScript zu entkommen (das heißt, wird " \" usw.).

Wenn Sie Java auf der Serverseite verwenden, können Sie vielleicht einen Blick auf die Klasse nehmen StringEscapeUtils von Jakartas Common-lang. Ansonsten sollte es nicht allzu lange dauern, Ihre eigene ‚escapeJavascript‘ Methode zu schreiben.

Answer 11

Sie die Antworten hier, dass Sie keine Anführungszeichen verwenden JavaScript entweichen kann und dass Sie mit entkam Strings beginnen müssen.

Daher. Es gibt keine Möglichkeit von JavaScript der Lage, um die Zeichenfolge zu behandeln ‚Marge sagte:‚Ich würde so aussehen war‘Peter‘ und Sie müssen Ihre Daten, bevor sie an das Skript bietet gereinigt werden?

Answer 12

Jeder gute Template-Engine wert sein Salz wird eine „Flucht Anführungszeichen“ Funktion. Ours (auch-Heim aufgewachsen, wo ich arbeite) hat auch eine Funktion Angebote für Javascript zu entkommen. In beiden Fällen wird die Template-Variable dann nur mit _esc oder _js_esc angehängt, je nachdem, welche Sie wollen. Sie sollten niemals Ausgangsnutzergenerierte Inhalte an einen Browser, der nicht entgangen ist, meiner Meinung nach.

Answer 13

ich vor dem gleichen Problem, und ich löste es in einer schwierigen Weg. machen erste globale Variablen, v1, v2 und v3. Und in der Onclick, eine Anzeige zu senden, 1, 2 oder 3 und in der Funktionskontrolle für 1, 2, 3 setzt die v1, v2 und v3 wie:

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