¿Cómo puedo escapar una cadena dentro del código JavaScript dentro de un controlador onClick?

Dependiendo del lenguaje del lado del servidor, puede usar uno de estos:

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

Utilice tramos ocultos, uno para cada uno de los parámetros <%itemid%> y <%itemname%> y escriba sus valores dentro de ellos.

Por ejemplo, el intervalo para <%itemid%> se vería como <span id='itemid' style='display:none'><%itemid%></span> y en la función javascript SelectSurveyItem para recoger los argumentos de estos intervalos' innerHTML.

Intente evitar el uso de literales de cadena en su HTML y use JavaScript para enlazar eventos JavaScript.

También, evita 'href=#' a menos que realmente sepas lo que estás haciendo. Rompe tanta usabilidad para middleclickers compulsivos (abridor de pestañas).

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

Mi biblioteca JavaScript de elección simplemente resulta ser jQuery:

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

Si resulta que está renderizando una lista de enlaces como esa, es posible que desee hacer esto:

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

Si va a un atributo HTML, necesitará codificar HTML (como mínimo: > para &gt; < para &lt y " para "), y escape comillas simples (con una barra invertida) para que no interfieran con las citas de javascript.

La mejor manera de hacerlo es con su sistema de plantillas (extendiéndolo, si es necesario), pero simplemente podría hacer un par de funciones de escape/codificación y envolverlas ambas alrededor de cualquier dato que vaya allí.

Y sí, es perfectamente válido (correcto, incluso) para HTML-escape de todo el contenido de sus atributos HTML, incluso si contienen javascript.

Otra solución interesante podría ser hacer esto:

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

Entonces puede usar una codificación HTML estándar en ambas variables, sin tener que preocuparse por la complicación adicional de las citas de javascript.

Sí, esto crea HTML que es estrictamente inválido. Sin embargo, es una técnica válida, y todos los navegadores modernos la soportan.

Si fuera mío, probablemente iría con mi primera sugerencia, y me aseguraría de que los valores estén codificados en HTML y tengan las comillas simples escaparon.

Declare funciones separadas en la sección

También me he enfrentado a este problema. Hice un script para convertir comillas simples en comillas dobles escapadas que no romperán el HTML.

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

Utilice la biblioteca Microsoft Anti-XSS que incluye una codificación JavaScript.

Primero, sería más simple si el controlador onclick se configurara de esta manera:

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

</script>

Entonces itemid y itemname necesitan ser escapados para JavaScript (es decir, " se convierte en \", etc.).

Si está utilizando Java en el lado del servidor, puede echar un vistazo a la clase StringEscapeUtils de jakarta common-lang. De lo contrario, no debería tomar demasiado tiempo escribir su propio método 'escapeJavascript'.

Es la respuesta aquí que no puede escapar comillas usando JavaScript y que necesita comenzar con cadenas escapadas.

Por lo tanto. No hay forma de que JavaScript sea capaz de manejar la cadena 'Marge dijo" Yo miraría que era "a Peter' y necesita que sus datos sean limpiados antes de ofrecerlos al script?

Cualquier buen motor de plantillas que valga la pena tendrá una función de "comillas de escape". El nuestro (también local, donde trabajo) también tiene una función para escapar de las comillas para javascript. En ambos casos, la variable de plantilla se añade simplemente con _esc o _js_esc, dependiendo de la que desee. Nunca debe enviar contenido generado por el usuario a un navegador que no se haya escapado, en mi humilde opinión.

Me enfrenté al mismo problema, y lo resolví de una manera complicada. Primero haga variables globales, v1, v2 y v3. Y en el onclick, envíe un indicador, 1, 2 o 3 y en la función verifique 1, 2, 3 para poner el v1, v2 y v3 como:

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