How to escape double quotes in a title attribute

Question

I am trying to use a string that contains double quotes in the title attribute of an anchor. So far I tried these:

Answer 1

There is at least one situation where using single quotes will not work and that is if you are creating the markup "on the fly" from JavaScript. You use single quotes to contain the string and then any property in the markup can have double quotes for its value.

Answer 2

Perhaps you can use JavaScript to solve your cross-browser problem. It uses a different escape mechanism, one with which you're obviously already familiar:

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

It doesn't strictly separate the functions of HTML, JavaScript, and CSS the way folks want you to nowadays, but whom do you need to make happy? Your users or techies you don't know?

Answer 3

This variant -

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

Is correct and it works as expected - you see normal quotes in rendered page.

Answer 4

It may work with any character from the HTML Escape character list, but I had the same problem with a Java project. I used StringEscapeUtils.escapeHTML("Testing \" <br> <p>") and the title was <a href=".." title="Test&quot; &lt;br&gt; &lt;p&gt;">Testing</a>.

It only worked for me when I changed the StringEscapeUtils to StringEscapeUtils.escapeJavascript("Testing \" <br> <p>") and it worked in every browser.

Answer 5

Using " is the way to do it. I tried your second code snippet, and it works in both Firefox and Internet Explorer.

Answer 6

Here's a snippet of the HTML escape characters taken from a cached page on 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    —