Escapar dilema en Javascript

StackOverflow https://stackoverflow.com/questions/261985

  •  06-07-2019
  •  | 
  •  

Pregunta

Tengo el siguiente 

var id='123';

newDiv.innerHTML = "<a href=\"#\" onclick=\" TestFunction('"+id+"', false);\"></a>";

Lo que hace <a href="#" onclick="return Testfunction('123',false);"></a> en mi HTML.

El problema que tengo es que me gustaría aprovechar la llamada al método Over, y el uso como un parámetro de cadena en mi función de StepTwo(string, boolean), que lo ideal sería un final en vivo en HTML como se muestra...

<a href="#" onclick="StepTwo("TestFunction('123',false)",true)"></a>

observe cómo el Over es una cadena de aquí (que se ejecuta dentro de StepTwo usando eval).

He probado a formatear mi JS como :

newDiv.innerHTML = "<a href=\"#\" onclick=\"StepTwo(\"TestFunction('"+id+"', false);\",true)\"></a>";

pero mientras este me parece correcto en mi IDE, en el renderizado de HTML, como garbelled más allá de la creencia.

Agradecería si alguien pudiera me apunte en la dirección correcta.Gracias!

¿Fue útil?

Solución

Intente usar & amp; quot; en lugar de \ "

newDiv.innerHTML = " < a href = & amp; quot; # & amp; quot; ...

Otros consejos

Una de las mayores fallas de capital en Internet es crear html en javascript al unir cadenas. 

var mya = document.createElement("a");
mya.href="#"; 
mya.onclick = function(){ 
    StepTwo(function(){ 
        TestFunction('123', false ); 
    }, true );   
};
newDiv.innerHTML = ""; 
newDiv.appendChild(mya);

Esto elimina la necesidad de cualquier escape de fantasía.

(Probablemente debería hacer 'onclick' de manera diferente, pero esto debería funcionar, estoy intentando no solo usar el código jQuery para hacer todo)

Aquí está cómo lo haría en jQuery: 

jQuery(function($){ 

  var container = $("#container"); 
  var link = document.createElement("a"); /* faster than  $("<a></a>"); */
  $(link).attr("href", "Something ( or # )" ); 
  $(link).click( function(){ 
       var doStepTwo = function()
       { 
            TestFunction('123', true ); 
       };
       StepTwo( doStepTwo, false );  /* StepTwo -> doStepTwo -> TestFunction() */
  });
  container.append(link); 
});

No hay una buena excusa para pegar cadenas en Javascript

Todo lo que hace es AGREGAR sobrecarga de análisis html en estructuras dom, y potencial AGREGAR para HTML roto basado en XSS. Incluso amado google se equivoca en algunos de sus scripts publicitarios y ha causado fallas épicas en muchos casos que he visto (y no quieren saberlo)

No entiendo Javascript es la única excusa, y NO es una buena.

Debería usar &quot; no " o \" dentro de una cadena HTML entre comillas dobles.

NewDiv.innerHTML = "<a href=\"#\" onclick=\"StepTwo(&quot;TestFunction('"+id+"', false);&quot;,true)\"></a>";

Probablemente haya una mejor manera de hacer esto: cada vez que se encuentre usando eval() debe retroceder y buscar una solución diferente.

Afirmas que evaluar es lo correcto aquí. No estoy tan seguro.

¿Ha considerado este enfoque? 

<a href="#" onclick="StepTwo(TestFunction,['123',false],true)"></a>

y en su función StepTwo 

function StepTwo(func,args,flag){
    //do what ever you do with the flag
    //instead of eval use the function.apply to call the function.
    func.apply(args);
}

Puede crear un elemento y adjuntarlo al evento de clic usando Métodos DOM.

Un Framework Javascript (como el ubicuo jQuery) haría esto mucho más fácil.

Su mayor problema es utilizar eval, genera tantos problemas potenciales que casi siempre es mejor encontrar una solución alternativa.

Su problema inmediato es que lo que realmente tiene es 

<a href="#" onclick="StepTwo("></a>

como el siguiente " después del inicio del atributo onclick, lo cierra. Utilice & Amp; quot; como otros han sugerido. Y no use eval.

  1. Necesita alternar su " y '.

  2. Tal vez no necesite comillas alrededor del 123, debido a la escritura flexible de Javascripts. Pásalo sin comillas pero trátalo como una cadena dentro de TestFunction.

Hola chicos, gracias por todas las respuestas. Me parece que el quot; parece funcionar mejor.

¡Les daré algunos votos una vez que obtenga más reputación!

Con respecto a eval (), lo que ves en la pregunta es una instantánea muy pequeña de la aplicación que se está desarrollando. Entiendo los problemas de eval, sin embargo, esta es una de esas en un millón de situaciones en las que es la elección correcta para la situación en cuestión.

Se entendería mejor si pudieras ver lo que hacen estas funciones (les has dado nombres muy genéricos para stackoverflow).

¡Gracias de nuevo!

La mejor manera es crear el elemento con document.createElement, pero si no está dispuesto a hacerlo, supongo que podría hacer <a href="#" onclick="StepTwo('TestFunction(\'123\',false)',true)"></a> o usar &quot;.

En su código: 

newDiv.innerHTML = "<a href=\"#\" onclick=\"StepTwo('TestFunction(\'"+id+"\', false);\',true)\"></a>";

Si no funciona, intente cambiar " \' " a " \\' " ;.

Recuerde que el " El carácter se utiliza para abrir y cerrar el atributo en las etiquetas HTML. Si lo usa en el valor del atributo, el navegador lo entenderá como el carácter cercano.

Ejemplo: <input type="text" value="foo"bar"> terminará siendo <input type="text" value="foo">. 

<a href="#" onclick="StepTwo('TestFunction(\'123\', false)', true)">...</a>

Sé que esto es hella' viejo ahora, pero si alguien tiene problemas con escapado de las cadenas cuando el uso de eval (y que es absolutamente necesario el uso de eval), tengo una manera de evitar problemas.

var html = '<a href="#\" onclick=" TestFunction(\''+id+'\', false);"></a>';
eval('(function(div, html){div.innerHTML = html;})')(newDiv, html);

Así que, ¿qué está pasando aquí?

  1. eval crea una función que contiene dos parámetros, div y html y se la devuelve.
  2. La función es ejecutar de inmediato con los parámetros a la derecha de la función eval.Esto es básicamente como un IIFE.

En este caso

var myNewMethod = eval('(function(div, html){div.innerHTML = html;})');

es básicamente la misma:

var myNewMethod = function(div, html){div.innerHTML = html;}

y, a continuación, sólo estamos haciendo esto:

myNewMethod(newDiv, html); //where html had the string containing markup

Sugiero no usar eval.Si no se puede evitar, o si el control de todas las entradas y no hay riesgo de inyección, a continuación, esto ayudará en los casos donde la cadena se escapa es un problema.

Yo también tienden a utilizar Function, pero no es nada más segura.He aquí el fragmento de código que utilizo:

    var feval = function(code) {
    return (new Function(code))();
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top