validacion - Cotizaciones de escape en el atributo de datos HTML5 usando Javascript
validar formulario javascript html5 (10)
Estoy usando .data() jQuery para trabajar con atributos de datos HTML5 personalizados donde el valor del atributo debe poder contener tanto comillas simples como comillas dobles:
<p class="example" data-example="She said "WTF" on last night''s show.">
Sé que estoy usando códigos de caracteres como " en el atributo de datos, el valor podría hacer que lo anterior funcione, pero no siempre puedo controlar cómo se ingresan los valores. Además, necesito poder usar etiquetas HTML en el marcado, como esto:
<p class="example" data-example="
She said "<abbr title="What The F***">WTF</abbr>" on last night''s show.
">
Si alguna forma de .replace() es la respuesta, entonces hay que hacerlo antes de que el valor sea leído por .data() quizás aplicándolo en todo el <body> ?
La barra invertida normal que se escapa como <abbr title="te/'st">WTF</abbr> tampoco funciona.
Idealmente, esto tendría la flexibilidad para trabajar con ambos:
data-example="..." y data-example=''...''
Pero si solo es posible de una manera, al menos podría rodar con eso. Ideas?
Actualización - un poco más de contexto:
Estoy trabajando en esto para responsejs.com . Una aplicación real de esto podría ser cargar solo una barra lateral para los navegadores por encima de un cierto ancho (y tener esto manejado en el navegador en lugar de PHP). En el caso de WordPress, por ejemplo, la barra lateral podría contener widgets, imágenes, etc. Las citas dentro de las etiquetas PHP no son un problema porque se analizan en HTML antes de que lleguen al navegador. Ejemplo:
<aside id="primary" class="sidebar"
data-oweb=''
<?php dynamic_sidebar( ''primary'' ); ?>
''
>
optional default markup for mobile and no-js browsers here
</aside>
Aquí hay una herramienta simple que creé que puede usar para codificar html:
El truco es escapar dos veces.
Agregué un / n reemplazo adicional para preservar el texto multilínea ya que se descarta por texto ().
Además, debe evitar las comillas para que sea seguro para un atributo de datos.
<div id="esc"></div>
<textarea id="escinput" placeholder="Enter text"></textarea>
<script>
$("#escinput").bind("change paste keyup", function(){
$("#esc").text($(this).val().replace(//n/g,''//n''));
$("#esc").text($("#esc").html().replace(/"/g, ''"''));
});
</script>
Esto debería crear una cadena segura de atributo de datos.
Puede probarlo aquí: http://jsfiddle.net/SplicePHP/n6HFq/
Para decodificarlo de nuevo a html simplemente usa:
<script>
var attr = $("#idOfElement").data(''attribute'');
var decoded = $(''<textarea/>'').html(attr).val();
</script>
Cuando uso el atributo de datos para transportar algunos datos junto con el elemento html de PHP al JavaScript, solo uso base64_encode en el backend, luego en el lado del cliente, uso base64Decode(input) para recuperar los datos. De esta manera evito toda orgía que se escape. El código JavasScript que utilizo se encuentra aquí http://www.webtoolkit.info/
Es un poco complicado, pero puede seleccionar objetos dom con sus atributos de data que contienen comillas simples. El truco es //'
<div id="text" data-message="Stanley Kubrick''s Oranges">Hello</div>
<script>
var message = "Stanley Kubrick//'s Oranges";
$("#text[data-message=''"+message+"'']").fadeOut("slow");
</script>
Me gusta almacenar datos en javascript directamente. En lugar de esto:
<p class="example" data-oweb="<?=str_replace(''/''', ''///''', $var)?>">Content</p>
<script>
var example = $(''.example'').data("example");
DoSomething(example);
</script>
Hacer esto:
<p class="example">Content</p>
<script>
var example = ''<?=str_replace(''/''', ''///''', $var)?>'';
DoSomething(example);
</script>
O si el uso está en una secuencia de comandos remota que controla, almacene los valores en un global:
<p class="example">Content</p>
<script>
window.MyDataValues={};
window.MyDataValues.Example = ''<?=str_replace(''/''', ''///''', $var)?>'';
</script>
O si no puede controlar la secuencia de comandos remota, y la información debe almacenarse como un atributo de datos, puede configurarla con javascript después de encontrar la forma de apuntar al párrafo:
<p id="example" data-oweb>Content</p>
<script>
document.getElementById("example");
element.dataset.oweb = ''<?=str_replace(''/''', ''///''', $var)?>'';
</script>
No hay forma de evitarlo, tiene que escapar de los valores correctamente o el HTML no se puede analizar correctamente. No puede usar Javascript para corregir el código después de que se analiza, porque entonces ya ha fallado.
Su ejemplo con la codificación HTML adecuada sería:
<p class="example" data-example="She said "<abbr title="What The F***">WTF</abbr>" on last night''s show.">
No puedes usar la barra invertida para escapar de los caracteres, porque no es un código Javascript. Usas entidades HTML para escapar de los caracteres en el código HTML.
Si no puedes controlar cómo se ingresan los datos, entonces estás atornillado. Simplemente tienes que encontrar una manera de controlarlo.
Nuevo en , así que no tengo suficientes puntos de representación para votar, pero quería aclarar la solución, ya que malinterpreté la respuesta aceptada de @Guffa de que estaba equivocado.
Tuve una pregunta similar con respecto a los caracteres especiales / de escape en los atributos de datos HTML5. La pregunta / solución: Escape / Caracteres especiales de la entrada del usuario a los atributos de datos HTML5 utilizando la codificación / decodificación de URL
Dan Smith proporcionó la solución que utilicé con encodeURI () / decodeURI (). Sin embargo, lo descarté inicialmente porque estaba tan abajo con solo 1 puntos de repetición.
Cualquier respuesta con el escape manual de los personajes se vuelve desordenada y lleva mucho tiempo.
Cualquier respuesta con el método de escape () ahora está en desuso. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape
Para que sea el html correcto, debes escapar de los caracteres problemáticos. Me escaparía con las entidades HTML. Esto significa que cualquier herramienta que se esté utilizando para ingresar esta información tendría que almacenarlos correctamente y / o la herramienta que los recupera en el extremo posterior tendría que escapar de ellos.
Luego, si desea usarlos en su JS, tendrá que ejecutar algunas funciones de búsqueda y reemplazo para convertir los caracteres nuevamente en HTML y comillas.
La mayoría de los lenguajes dev de back-end tienen algún tipo de funcionalidad ''htmlescape / unescape'', por lo que no debería ser difícil.
Para desbloquearlo a través de jQuery, aquí se encuentra algo a través de Google: http://www.naveen.com.au/javascript/jquery/encode-or-decode-html-entities-with-jquery/289
Si tienen que ser cadenas HTML con " y '' y otras cosas, ¿por qué no hacer elementos HTML separados para ellos ?: http://jsfiddle.net/N7XXu/ .
Por ejemplo, el HTML:
<p class="example" data-which="1">a</p>
<p class="example-data" data-which="1">She said "<abbr title="What The F***">WTF</abbr>" on last night''s show.</p>
en combinación con el siguiente JavaScript:
$(''.example'').each(function() {
var correspondingElem = $(''.example-data[data-which="''
+ $(this).data(''which'')
+ ''"]'');
$(this).data(''example'', correspondingElem.html());
});
alert($(''.example'').data(''example''));
Por supuesto, ocultar los elementos .example-data .
Use el método btoa para configurar los datos y el método atob para obtenerlos:
$(document).data("test2",btoa(''She said "<abbr title="What The F***">WTF<//abbr>" on last nights show.">''))
O simplemente desreferencia la cadena como una variable:
var stringer = ''She said "<abbr title="What The F***">WTF<//abbr>" on last nights show.">''
$(document).data("test2",stringer);
Referencias
Use encodeURI para escapar de las comillas en su objeto JSON. Analizar la cadena con decodeURI.
var popup = document.getElementById(''popup''),
msgObj = JSON.parse(decodeURI(popup.dataset.message));
console.log(msgObj);
<a id="popup" href="#" data-message="%7B%22title%22:%22Print%22,%22message%22:%22Printing%20not%20yet%20implemented%22%7D" />