How to escape double quotes in a title attribute

HtmlEscapingQuotes

Html Problem Overview


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

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

and

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

Please note that using single quotes is not an option.

Html Solutions


Solution 1 - Html

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.

Solution 2 - Html

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

Solution 3 - Html

The escape code &#34; can also be used instead of &quot;.

Solution 4 - Html

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

Solution 5 - Html

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.

Solution 6 - Html

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.

Solution 7 - Html

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?

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionharpaxView Question on Stackoverflow
Solution 1 - HtmlMāris KiseļovsView Answer on Stackoverflow
Solution 2 - HtmlDaveView Answer on Stackoverflow
Solution 3 - HtmlfredleyView Answer on Stackoverflow
Solution 4 - HtmlCoderSivuView Answer on Stackoverflow
Solution 5 - HtmlRodrigo HortaView Answer on Stackoverflow
Solution 6 - HtmlcvadilloView Answer on Stackoverflow
Solution 7 - HtmlWebManWalkingView Answer on Stackoverflow