¿Se permiten comillas simples/dobles dentro de los valores de atributo HTML?

estoy tratando de establecer el valor de atributo que contiene una comilla simple:¿Se permiten comillas simples/dobles dentro de los valores de atributo HTML?

var attr_value = "It's not working"; 
var html = "<label my_attr='" + attr_value + "'>Text</label>"; 
$('body').html(html);

Sin embargo, obtener el resultado siguiente:

<label working="" not="" s="" my_attr="It">Text</label>

¿Cómo podría solucionar este problema?

¿Se permiten las comillas dobles dentro de los valores de los atributos?

Fuente

2010-10-22 Misha Moroshko

Sí, ambas citas se permiten en valores de atributos, pero hay que HTML-escapar de la cotización está utilizando como un delimitador de valor de atributo, así como otros caracteres HTML-especial como < y &:

function encodeHTML(s) { 
    return s.split('&').join('&amp;').split('<').join('&lt;').split('"').join('&quot;').split("'").join('&#39;'); 
} 

var html= '<label my_attr="'+encodeHTML(attr_value)+'">Text</label>';

sin embargo, son por lo general mucho mejor no intenta cortar un documento conjunto de las cadenas HTML. Se arriesga a errores e inyección de HTML (lo que lleva a agujeros de seguridad de secuencias de comandos entre sitios) cada vez que se olvida de escapar. En su lugar, utilice los métodos de estilo DOM como attr(), text() y el acceso directo de la construcción:

$('body').append(
    $('<label>', {my_attr: attr_value, text: 'Text'}) 
);

Fuente

2010-10-22 12:20:12 bobince

¡Muchas gracias por una respuesta detallada! Solo por curiosidad con respecto a la implementación de 'encodeHTML': se puede implementar usando la función' replace', ¿verdad? ¿Es menos efectivo? –

Puede, seguro, 'reemplazar (/ &/g, '&') ...'. En este caso, no importa ya que las cadenas de búsqueda no pueden contener ningún carácter especial de expresiones regulares, pero en general para reemplazar cadenas simples, 'split' /' join' puede ser más simple, ya que puede usar cadenas de búsqueda sin tener que Preocúpate de escapar de la expresión regular. El rendimiento comparativo varía según los navegadores. – bobince

¡Gracias! ¿Podría darme un puntero al tutorial de "acceso directo a la construcción"? –

var attr_value = "It&#39;s not working"

Fuente

2010-10-22 12:15:49

Use comillas dobles como delimitador de atributos:

var html = "<label my_attr=\"" + attr_value + "\">Text</label>";

Fuente

2010-10-22 12:16:59

Usted puede utilizar comillas simples dentro de comillas dobles o comillas dobles dentro de comillas simples. Si desea utilizar comillas simples dentro de comillas simples o comillas dobles dentro de comillas dobles, debe codificarlas en HTML.

marcado válido:

<label attr="This 'works'!" /> 
<label attr='This "works" too' /> 
<label attr="This does NOT \"work\"" /> 
<label attr="And this is &quot;OK&quot;, too" />

Fuente

2010-10-22 12:18:52 CodeTwice

El de las barras invertidas no funciona. Es un escape de JavaScript, no HTML. – bobince

Tienes razón, edité mi respuesta y eliminé el escape. – CodeTwice

Acaba de olvidar el cierre '" 'en' yckart

¿Se permiten comillas simples/dobles dentro de los valores de atributo HTML?

Respuesta

Cuestiones relacionadas