Como escapar de aspas duplas em um atributo de título


195

Estou tentando usar uma seqüência de caracteres que contém aspas duplas no atributo title de uma âncora. Até agora eu tentei estes:

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

e

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

Observe que o uso de aspas simples não é uma opção.


18
@Haim leu a pergunta ... diz "aspas simples não é uma opção".
Nils Riedemann

2
@harpax - Fiquei curioso por que aspas simples não são uma opção?
Bert F

3
Aspas simples não são html válidas.
skyfoot

1
Seu segundo exemplo deve funcionar absolutamente perfeitamente. Em qual navegador você está vendo o problema?
Olly Hodgson

1
@harpax: talvez você deva esclarecer a exigência de "aspas simples não são uma opção". Eu teria imaginado que você mencionou aspas simples "dentro 'da' string" não é uma opção (como sendo exibida ao usuário), mas apenas inverter aspas simples e duplas, como Haim mostrou acima, seria bom.
Christian.K

Respostas:


284

Esta variante -

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

Está correto e funciona como esperado - você vê aspas normais na página renderizada.


Sim. <a href="#" title="Foo &quot;Bar&quot;">Testing</a>e <a href="#" title="Smart quotes &#8221;Bar&#8220;">Testing too</a>trabalhe para mim.
Olly Hodgson

5
@Maris: Bem ... eu não vejo aspas normais na página renderizada quando faço & quot; (Firefox, Chrome). Por quê?
Krzysztof Trzos

@ Maris, mesmo problema aqui. Veja o texto "& quot;" aparecem no IE e no Chrome quando o usuário passa o mouse sobre o elemento.
Rtackhouse

Surpreendentemente trabalhou com conteúdo HTML incorporado dentro de atributo (para javascript para produzir textarea editável):data-editable-note="<?php echo str_replace('"', '&quot;', $note); ?>"><?php echo mark::up($note); ?></div>
WEBjuju

23

Aqui está um trecho dos caracteres de escape HTML retirados de uma página em cache no 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    —   

9

O código de escape &#34;também pode ser usado em vez de &quot;.


3

Usar &quot;é a maneira de fazê-lo. Eu tentei o seu segundo trecho de código e funciona no Firefox e no Internet Explorer.


2

Pode funcionar com qualquer caractere da lista de caracteres de escape HTML , mas eu tive o mesmo problema com um projeto Java. Eu usei StringEscapeUtils.escapeHTML("Testing \" <br> <p>")e o título era<a href=".." title="Test&quot; &lt;br&gt; &lt;p&gt;">Testing</a> .

Só funcionou para mim quando alterei o StringEscapeUtils para StringEscapeUtils.escapeJavascript("Testing \" <br> <p>")e funcionou em todos os navegadores.


melhor solução na minha opinião
Mohammed Rafeeq 14/11

Tudo bem se você estiver usando Java, mas como o solicitante original está solicitando HTML, talvez isso não seja uma opção.
Paulo

1

Há pelo menos uma situação em que o uso de aspas simples não funcionará, ou seja, se você estiver criando a marcação "on the fly" a partir do JavaScript. Você usa aspas simples para conter a sequência e, em seguida, qualquer propriedade na marcação pode ter aspas duplas para seu valor.


1

Talvez você possa usar o JavaScript para resolver seu problema no navegador. Ele usa um mecanismo de escape diferente, com o qual você obviamente já está familiarizado:

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

Não separa estritamente as funções de HTML, JavaScript e CSS da maneira que as pessoas querem hoje em dia, mas quem você precisa para fazer feliz? Seus usuários ou técnicos que você não conhece?


Exagere quando o resultado desejado pode ser alcançado de uma maneira muito mais direta.
Paul

-3

Você pode usar esse código PHP para listar caracteres especiais ...

<table border="1"><?php for($i=33;$i<9000;$i++)echo "<tr><td>&#38;#$i;<td>&#".$i.";"; ?></table>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.