Comment échapper les guillemets doubles dans un attribut de titre

195

J'essaye d'utiliser une chaîne qui contient des guillemets doubles dans l'attribut title d'une ancre. Jusqu'à présent, j'ai essayé ceux-ci:

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

et

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

Veuillez noter que l'utilisation de guillemets simples n'est pas une option.

html escaping quotes harpax
la source
18
@Haim a lu la question… il dit que "les guillemets simples ne sont pas une option".
Nils Riedemann
2
@harpax - J'étais juste curieux de savoir pourquoi les guillemets simples ne sont pas une option?
Bert F
3
Les guillemets simples ne sont pas du HTML valide.
skyfoot
1
Votre deuxième exemple devrait fonctionner parfaitement. Dans quel navigateur voyez-vous le problème?
Olly Hodgson
1
@harpax: peut-être devriez-vous clarifier la condition "les guillemets simples ne sont pas une option". J'aurais deviné que vous mentiez des guillemets simples "à l'intérieur de" la "chaîne" ne sont pas une option (comme affiché à l'utilisateur), mais simplement retourner les guillemets simples et doubles comme Haim l'a montré ci-dessus serait OK.
Christian.K

Réponses:

284

Cette variante - 

<a title="Some &quot;text&quot;">Hover me</a>
Développer l'extrait

Est correct et fonctionne comme prévu - vous voyez des citations normales dans la page rendue.

Māris Kiseļovs
la source
Oui. <a href="#" title="Foo &quot;Bar&quot;">Testing</a>et <a href="#" title="Smart quotes &#8221;Bar&#8220;">Testing too</a>travaille pour moi.
Olly Hodgson
5
@Maris: Eh bien ... je ne vois pas de guillemets normaux dans la page rendue lorsque je crée & quot; (Firefox, Chrome). Pourquoi?
Krzysztof Trzos
@Maris, même problème ici. Voir le texte "& quot;" apparaissent dans IE et Chrome lorsque l'utilisateur passe la souris sur l'élément.
rstackhouse le
Étonnamment travaillé avec du contenu html intégré dans l'attribut (pour que javascript produise du texte modifiable):data-editable-note="<?php echo str_replace('"', '&quot;', $note); ?>"><?php echo mark::up($note); ?></div>
WEBjuju
23

Voici un extrait des caractères d'échappement HTML extraits d' une page mise en cache sur 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
la source
9

Le code d'échappement &#34;peut également être utilisé à la place de &quot;.

Fredley
la source
3

Utiliser &quot;est le moyen de le faire. J'ai essayé votre deuxième extrait de code, et il fonctionne à la fois dans Firefox et Internet Explorer.

TheCee
la source
2

Cela peut fonctionner avec n'importe quel caractère de la liste de caractères HTML Escape , mais j'ai eu le même problème avec un projet Java. J'ai utilisé StringEscapeUtils.escapeHTML("Testing \" <br> <p>")et le titre était <a href=".." title="Test&quot; &lt;br&gt; &lt;p&gt;">Testing</a>.

Cela n'a fonctionné pour moi que lorsque j'ai changé le StringEscapeUtils en StringEscapeUtils.escapeJavascript("Testing \" <br> <p>")et cela a fonctionné dans tous les navigateurs.

Rodrigo Horta
la source
meilleure solution à mon avis
Mohammed Rafeeq
Bien si vous utilisez Java, mais comme le demandeur initial demande du HTML, ce n'est peut-être pas une option.
Paul
1

Il existe au moins une situation où l'utilisation de guillemets simples ne fonctionnera pas et c'est si vous créez le balisage "à la volée" à partir de JavaScript. Vous utilisez des guillemets simples pour contenir la chaîne, puis toute propriété du balisage peut avoir des guillemets doubles pour sa valeur.

Cvadillo
la source
1

Vous pouvez peut-être utiliser JavaScript pour résoudre votre problème entre navigateurs. Il utilise un mécanisme d'échappement différent, avec lequel vous êtes évidemment déjà familier:

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

Cela ne sépare pas strictement les fonctions HTML, JavaScript et CSS comme les gens le souhaitent de nos jours, mais de qui avez-vous besoin pour être heureux? Vos utilisateurs ou techniciens que vous ne connaissez pas?

WebManWalking
la source
Overkill lorsque le résultat souhaité peut être atteint d'une manière beaucoup plus simple.
Paul
-3

Vous pouvez utiliser ce code PHP pour lister les caractères spéciaux ...

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