Cómo escapar de las comillas dobles en un atributo de título

195

Estoy tratando de usar una cadena que contiene comillas dobles en el atributo de título de un ancla. Hasta ahora probé estos:

<a href=".." title="Some \"text\"">Some text</a>
<!-- The title looks like `Some \` --!>

y

<a href=".." title="Some &quot;text&quot;">Some text</a>
<!-- The title looks like `Some ` --!>

Tenga en cuenta que el uso de comillas simples no es una opción.

html escaping quotes

— harpax
fuente

18

@Haim leyó la pregunta ... dice "las comillas simples no son una opción".

— Nils Riedemann

2

@harpax: tenía curiosidad por qué las comillas simples no son una opción.

— Bert F

3

Las comillas simples no son html válidas.

— skyfoot

1

Su segundo ejemplo debería funcionar absolutamente perfectamente. ¿En qué navegador estás viendo el problema?

— Olly Hodgson

1

@harpax: tal vez deberías aclarar el requisito "las comillas simples no son una opción". Supuse que mencionar comillas simples "dentro de 'la' cadena" no es una opción (como se muestra al usuario), pero simplemente cambiar las comillas simples y dobles como Haim mostró arriba estaría bien.

— Christian.K

284

Esta variante

<a title="Some &quot;text&quot;">Hover me</a>

Expandir fragmento

Es correcto y funciona como se esperaba: ve comillas normales en la página representada.

— Māris Kiseļovs
fuente

Sí. <a href="#" title="Foo "Bar"">Testing</a>y <a href="#" title="Smart quotes ”Bar“">Testing too</a>trabaja para mi

— Olly Hodgson

55

@Maris: Bueno ... no veo citas normales en la página renderizada cuando hago & quot; (Firefox, Chrome). ¿Por qué?

— Krzysztof Trzos

@Maris, el mismo problema aquí. Ver el texto "& quot;" aparecen tanto en IE como en Chrome cuando el usuario pasa el mouse sobre el elemento.

— rstackhouse

Increíblemente trabajado con contenido html incrustado dentro del atributo (para que javascript produzca un área de texto editable):data-editable-note="<?php echo str_replace('"', '"', $note); ?>"><?php echo mark::up($note); ?></div>

— WEBjuju el

23

Aquí hay un fragmento de los caracteres de escape HTML tomados de una página en caché en archive.org :

&#060   |   less than sign  <       
&#064   |   at sign @       
&#093   |   right bracket   ]       
&#123   |   left curly brace    {       
&#125   |   right curly brace   }       
&#133   |   ellipsis    …       
&#135   |   double dagger   ‡       
&#146   |   right single quote  ’       
&#148   |   right double quote  ”       
&#150   |   short dash  –       
&#153   |   trademark   ™       
&#162   |   cent sign   ¢       
&#165   |   yen sign    ¥       
&#169   |   copyright sign  ©       
&#172   |   logical not sign    ¬       
&#176   |   degree sign °       
&#178   |   superscript 2   ²       
&#185   |   superscript 1   ¹       
&#188   |   fraction 1/4    ¼       
&#190   |   fraction 3/4    ¾       
&#247   |   division sign   ÷       
&#8221  |   right double quote  ”       
&#062   |   greater than sign   >   
&#091   |   left bracket    [   
&#096   |   back apostrophe `   
&#124   |   vertical bar    |   
&#126   |   tilde   ~   
&#134   |   dagger  †   
&#145   |   left single quote   ‘       
&#147   |   left double quote   “   
&#149   |   bullet  •   
&#151   |   longer dash —   
&#161   |   inverted exclamation point  ¡   
&#163   |   pound sign  £   
&#166   |   broken vertical bar ¦   
&#171   |   double left than sign   «   
&#174   |   registered trademark sign   ®   
&#177   |   plus or minus sign  ±   
&#179   |   superscript 3   ³   
&#187   |   double greater-than sign    »   
&#189   |   fraction 1/2    ½   
&#191   |   inverted question mark  ¿   
&#8220  |   left double quote   “   
&#8212  |   dash    —

— Dave
fuente

9

El código de escape "también se puede usar en lugar de ".

— Fredley
fuente

3

Usar "es la forma de hacerlo. Probé su segundo fragmento de código, y funciona tanto en Firefox como en Internet Explorer.

— TheCee
fuente

2

Puede funcionar con cualquier carácter de la lista de caracteres de HTML Escape , pero tuve el mismo problema con un proyecto Java. Solía StringEscapeUtils.escapeHTML("Testing \" ")y el título era <a href=".." title="Test" ">Testing</a>.

Solo funcionó para mí cuando cambié StringEscapeUtils StringEscapeUtils.escapeJavascript("Testing \" ")y funcionó en todos los navegadores.

— Rodrigo Horta
fuente

mejor solución en mi opinión

— Mohammed Rafeeq

Está bien si está utilizando Java, pero como el investigador original está pidiendo HTML, quizás esta no sea una opción.

— Paul

1

Hay al menos una situación en la que el uso de comillas simples no funcionará y es si está creando el marcado "sobre la marcha" desde JavaScript. Utiliza comillas simples para contener la cadena y luego cualquier propiedad en el marcado puede tener comillas dobles para su valor.

— cvadillo
fuente

1

Quizás pueda usar JavaScript para resolver su problema de navegador cruzado. Utiliza un mecanismo de escape diferente, uno con el que obviamente ya está familiarizado:

(reference-to-the-tag).title = "Some \"text\"";

No separa estrictamente las funciones de HTML, JavaScript y CSS de la forma en que la gente quiere que lo hagas hoy en día, pero ¿a quién necesitas hacer feliz? ¿Tus usuarios o técnicos que no conoces?

— WebManWalking
fuente

Exagerar cuando el resultado deseado puede lograrse de una manera mucho más directa.

— Paul

-3

Puede usar este código PHP para enumerar caracteres especiales ...

<table border="1"><?php for($i=33;$i<9000;$i++)echo "<tr><td>&#38;#$i;<td>&#".$i.";"; ?></table>

— usuario6000975
fuente