Comment échapper à une chaîne dans javascript dans un gestionnaire onClick?

Question

Peut-être que je suis juste à penser à ce trop dur, mais je vais avoir un problème de déterminer quelles échapper à utiliser sur une chaîne de caractères en javascript à l'intérieur d'un lien onClick du gestionnaire. Exemple:

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

L' <%itemid%> et <%itemname%> sont où le modèle de substitution se produit. Mon problème est que le nom de l'élément peut contenir n'importe quel caractère, y compris les guillemets simples et doubles. Actuellement, si elle contient des guillemets simples, il rompt le javascript. Ma première pensée a été d'utiliser le modèle de langue de la fonction javascript échapper le nom de l'élément, qui échappe juste les guillemets. Qui ne résoudra pas le cas de la chaîne de caractères contenant des guillemets qui casse le code HTML du lien. Comment ce problème est normalement résolu? Ai-je besoin de HTML échapper à l'ensemble de la onClick gestionnaire? Si oui, ce serait vraiment étrange, car le modèle de langue de la fonction d'échappement qui aurait également HTMLify les parenthèses, les guillemets, et des points-virgules... Votre contribution est très appréciée.

Edit: Ce lien est généré pour chaque résultat dans une page de résultats de recherche, donc de la création d'une méthode distincte à l'intérieur d'une balise javascript n'est pas possible parce que j'avais besoin de générer un par résultat.

Aussi, je suis en utilisant un moteur de template qui était à la maison-grandi dans l'entreprise pour laquelle je travaille, donc, trousse à outils de solutions spécifiques seront d'aucune utilité pour moi.

Answer 1

En javascript, vous pouvez encoder des guillemets simples comme "\x27" et les guillemets "\x22", donc avec cette méthode, vous pouvez, une fois que vous êtes à l'intérieur de la (simple ou double) citations de javascript littéral de chaîne, utilisez la \x27 \x22 en toute impunité, sans crainte de toute incorporé citations "sortir" de votre chaîne.

\xXX est pour les caractères < 127, et \uXXXX pour l'unicode, donc, armé avec la connaissance, vous pouvez créer un solide JSEncode fonction pour tous les caractères qui sont hors de l'habitude de la liste blanche.

E. g.

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

Answer 2

En fonction de la langue côté serveur, vous pouvez utiliser l’un des types suivants:

.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' ));
 

Rubis sur rails

 <%= escape_javascript(jsString) %>
 

Answer 3

Utilisez des plages masquées, une pour chacun des paramètres <%itemid%> et <%itemname%> et écrivez leurs valeurs à l'intérieur.

Par exemple, l'intervalle pour <%itemid%> ressemblerait à <span id='itemid' style='display:none'><%itemid%></span> et dans la fonction javascript SelectSurveyItem pour choisir les arguments de ces étendues ' innerHTML .

Answer 4

évitez d'utiliser des littéraux de chaîne dans votre code HTML et utilisez javascript pour lier des événements javascript.

De plus, évitez 'href = #' à moins que vous ne sachiez vraiment ce que vous faites, cela simplifie énormément la tâche des intermédiaires médiocres.

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

Ma librairie JS de choix se trouve être jQuery:

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

Si vous rendez une liste de liens comme celle-ci, vous pouvez le faire:

 <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

Si il va dans un attribut HTML, vous aurez besoin à la fois de HTML-encoder (au minimum: > de &gt; < de &lt et " de "), et d' échapper à des guillemets simples (avec une barre oblique inverse) de sorte qu'ils n'interfèrent pas avec votre javascript citant.

La meilleure façon de le faire est avec votre système de template (ou de l'étendre, si nécessaire), mais vous pouvez tout simplement faire un couple de s'échapper/encodage des fonctions, puis enroulez-les autour de toutes les données qui se passe là-bas.

Et oui, c'est parfaitement valide (correct, même) HTML-échapper à la totalité du contenu de vos attributs HTML, même si elles contiennent de javascript.