escape Cotizaciones en HTML5 datos de atributos utilizando JavaScript

estoy usando jQuery de .data() para trabajar con HTML5 atributos personalizados de datos, donde el valor del atributo tiene que ser capaz de contener dos comillas simples y comillas dobles:escape Cotizaciones en HTML5 datos de atributos utilizando JavaScript

<p class="example" data-example="She said "WTF" on last night's show.">

Sé que usar códigos de caracteres como " en el valor del atributo de datos podría hacer que lo anterior funcione, pero no siempre puedo controlar cómo se ingresan los valores. Además, tengo que ser capaz de utilizar las etiquetas HTML en el marcado, así:

<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 tiene que hacer antes de que el valor es leído por .data() -quizás por aplicándolo en todo el <body>?

El escape de barra diagonal normal como <abbr title="te\'st">WTF</abbr> tampoco funciona.

Lo ideal sería tener la flexibilidad para trabajar w/tanto:

data-example="..." y data-example='...'

Pero si sólo es posible un lado y luego pude al menos rollo 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 navegadores que superan cierto ancho (y que esto se maneje en el navegador en lugar de hacerlo en PHP). En el caso de WordPress, por ejemplo, la barra lateral puede contener widgets, imágenes, etc. Las comillas dentro de las etiquetas de PHP son un b/c no problemático, 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>

Fuente

2011-08-31 ryanve

JavaScript no lo ayudará después de que la página haya procesado las citas de la etiqueta. Tiene que hacerse en el servidor. – epascarello

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 haberlo analizado, porque ya ha fallado.

Su ejemplo, con la codificación HTML adecuada sería:

<p class="example" data-example="She said &quot;&lt;abbr title=&quot;What The F***&quot;&gt;WTF&lt;/abbr&gt;&quot; on last night's show.">

No se puede utilizar la barra invertida para escapar caracteres, porque no es código Javascript. Utiliza entidades HTML para escapar caracteres en código HTML.

Si no puede controlar cómo se ingresan los datos, entonces está atornillado. Simplemente tiene que encontrar la manera de tomar el control sobre eso.

Fuente

2011-08-31 17:34:26 Guffa

Use 'htmlspecialchars()' con 'ENT_QUOTES' para imprimirlo, p. '' Para más información: http://php.net/manual/en/function.htmlspecialchars.php –

Para que sea correcto html, debe escapar de los caracteres molestos. Los escaparía con entidades HTML. Esto significa que cualquiera que sea la herramienta que se use para ingresar esta información tendría que almacenarla adecuadamente y/o la herramienta que la recupera tendría que escapar de ella.

Luego, si desea utilizarlos en su JS, deberá ejecutar algunas funciones de búsqueda y reemplazo para convertir los caracteres de nuevo en HTML y comillas.

La mayoría de los lenguajes de desarrollo back-end tienen algún tipo de funcionalidad 'htmlescape/unescape', por lo que no debería ser difícil.

Para unescape que a través de jQuery, aquí hay algo que se encuentra a través de una rápida Google: http://www.naveen.com.au/javascript/jquery/encode-or-decode-html-entities-with-jquery/289

Fuente

2011-08-31 16:25:48

Hay que reemplazar los caracteres codificados de nuevo: el valor del atributo, cuando los accesos a través de js, ya se normalizaron de nuevo en texto sin formato – shesek

Si tienen que ser cadenas HTML con " y ' y todo eso, ¿por qué no hacer que los elementos HTML independientes para ellos: http://jsfiddle.net/N7XXu/.

E.g.el código 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.

Fuente

2011-08-31 16:53:48 pimvdb

Gracias, eso es genial, pero para lo que necesito, no volará. Acabo de actualizar la pregunta con un poco más de contexto. – ryanve

-1

utilizar el método de btoa para establecer los datos y el método atob conseguirlo:

$(document).data("test2",btoa('She said "<abbr title="What The F***">WTF<\/abbr>" on last nights show.">'))

O simplemente eliminar la referencia de 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

HTML5 Living Standard, Web application APIs: Base64 utility methods

Fuente

2012-08-28 14:33:35

Aquí es una herramienta sencilla que he creado se puede utilizar para codificar html:

El truco consiste en escapar de ella dos veces.

He añadido \ n replace para preservar el texto de varias líneas 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, '&quot;')); 
    });    
</script>

Esto debería crear una cadena segura de atributo de datos.

Puedes probarlo aquí: http://jsfiddle.net/SplicePHP/n6HFq/

para decodificar de nuevo a HTML utilizan simplemente:

<script> 
    var attr = $("#idOfElement").data('attribute'); 
    var decoded = $('<textarea/>').html(attr).val(); 
</script>

Fuente

2014-04-25 10:41:03

Uso encodeURI para escapar comillas en su objeto JSON. Analiza 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" />

Fuente

2015-03-06 22:35:01

Nuevo en desbordamiento de pila, así que no tengo suficientes puntos rep para votar, pero quería aclarar la solución como Malinterpreté la respuesta aceptada por @Guffa que yo estaba jodido.

Tuve una pregunta similar con respecto a los caracteres de escape/especiales en atributos de datos HTML5. La pregunta/solución: Escape/Special Characters from user input to HTML5 data-attributes using URL Encode/Decode

Dan Smith proporcionó la solución que utilicé con encodeURI()/decodeURI(). Sin embargo, lo descarté inicialmente porque estaba muy abajo con solo 1 punto de repetición.

Cualquier respuesta al escaparse manualmente de los caracteres se vuelve desordenada y lleva mucho tiempo.

Cualquier respuesta con el método escape() ahora está en desuso. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape

Fuente

2015-05-06 18:00:16 CreatordotJS

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 es en una secuencia de comandos a distancia permite controlar, almacenar el valor (s) en un mundial:

<p class="example">Content</p> 
<script> 
    window.MyDataValues={}; 
    window.MyDataValues.Example = '<?=str_replace('\'', '\\\'', $var)?>'; 
</script>

O bien, 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 descubrir una forma de segmentar el párrafo:

<p id="example" data-oweb>Content</p> 
<script> 
    document.getElementById("example"); 
    element.dataset.oweb = '<?=str_replace('\'', '\\\'', $var)?>'; 
</script>

Fuente

2015-12-22 08:36:42 Nenotlep

Es un poco complicado pero puede seleccionar objetos dom con sus atributos 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>

Fiddle

Fuente

2017-03-07 14:42:10 kastelli

Como utilizo el atributo de datos para transportar algunos datos junto con el elemento html desde PHP a JavaScript, sólo tiene que utilizar base64_encode en el backend, entonces en el cliente uso lateral base64Decode(input) para recuperar los datos. De esta manera evito cualquier orgía de escape. El código de JavasScript que uso se encuentra aquí http://www.webtoolkit.info/

Fuente

2018-01-16 12:25:22 Heinz

Ya hay una respuesta aceptada, que resolvió el problema de OP . Además, el único propósito de una respuesta es resolver el problema de OP. –

escape Cotizaciones en HTML5 datos de atributos utilizando JavaScript

Respuesta

Cuestiones relacionadas