How can I escape a single quote?

HtmlEscaping

Html Problem Overview


How can I escape a ' (single quote) in HTML?

This is where I'm trying to use it:

<input type='text' id='abc' value='hel'lo'>

The result for the above code is "hel" populated in the text box. I tried to replace ' with \', but this what I'm getting.

<input type='text' id='abc' value='hel\'lo'>

The result for the above code is "hel" populated in the text box.

How can I successfully escape the single quotes?

Html Solutions


Solution 1 - Html

You could use HTML entities:

  • &#39; for '
  • &#34; for "
  • ...

For more, you can take a look at Character entity references in HTML.

Solution 2 - Html

You can use &apos; (which is iffy in IE) or &#39; (which should work everywhere). For a comprehensive list, see the W3C HTML5 Named Character References or the HTML entities table on WebPlatform.org.

Solution 3 - Html

As you’re in the context of HTML, you need to use HTML to represent that character. And for HTML you need to use a numeric character reference &#39; (&#x27; hexadecimal):

<input type='text' id='abc' value='hel&#39;lo'>

Solution 4 - Html

Represent it as a text entity (ASCII 39):

<input type='text' id='abc' value='hel&#39;lo'>

Solution 5 - Html

Probably the easiest way:

<input type='text' id='abc' value="hel'lo">

Solution 6 - Html

If for some reason you cannot escape the apostrophe character and you can't change it into a HTML entity (as it was in my case for a specific Vue.js property) you can use replace to change it into different apostrophe character from the UTF-8 characters set, for instance:

ʼ - U+02BC
’ - U+2019

Solution 7 - Html

I personally find the named HTML entities easier to remember:

  • &apos; for ' (known as single quote or apostrophe, Unicode character U+0027)
  • &quot; for " (known as double quote or quotation mark, Unicode character U+0022)

Demo:

&apos;
<br>
&quot;

Solution 8 - Html

You could try using: &#145;

Solution 9 - Html

use javascript inbuild functions escape and unescape

for example

var escapedData = escape("hel'lo");   
output = "%27hel%27lo%27" which can be used in the attribute.

again to read the value from the attr

var unescapedData = unescape("%27hel%27lo%27")
output = "'hel'lo'"

This will be helpful if you have huge json stringify data to be used in the attribute

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
QuestionRaviView Question on Stackoverflow
Solution 1 - HtmlPascal MARTINView Answer on Stackoverflow
Solution 2 - HtmlBenjamin MannsView Answer on Stackoverflow
Solution 3 - HtmlGumboView Answer on Stackoverflow
Solution 4 - HtmlAndiDogView Answer on Stackoverflow
Solution 5 - Htmlroad242View Answer on Stackoverflow
Solution 6 - HtmlPicardView Answer on Stackoverflow
Solution 7 - HtmlFlimmView Answer on Stackoverflow
Solution 8 - HtmlthelostView Answer on Stackoverflow
Solution 9 - HtmlRam BharliaView Answer on Stackoverflow