How to Properly Escape Quotes Inside HTML Attributes

How do I properly escape quotes inside HTML attributes?

" is the correct way, the third of your tests:

<option value=""asd">test</option>

You can see this working below, or on jsFiddle.

alert($("option")[0].value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select>  <option value=""asd">Test</option></select>

How to escape double quotes in a title attribute

This variant -

<a title="Some "text"">Hover me</a>

How do I escape quotes in HTML attribute values?

You just need to swap any ' characters with the equivalent HTML entity character code:

data.name.replace(/'/g, "'");

Alternatively, you could create the whole thing using jQuery's DOM manipulation methods:

var row = $("<tr>").append("<td>Name</td><td></td>");
$("<input>", { value: data.name }).appendTo(row.children("td:eq(1)"));

How to escape double quotes in HTML attribute value in Ruby?

To properly encode a double quote in an HTML attribute value, there are several ways:

  • You can use an unescaped " if the attribute value itself is delimited by '...' or vice-versa: (just like strings in Ruby)

    <meta property="og:name" content='some "thing"' />
  • If the attribute value is delimited by "...", you can use the double quote's numeric character reference ":

    <meta property="og:name" content='some "thing"' />
  • or its character entity reference ":

    <meta property="og:name" content="some "thing"" />

From within Ruby, you could call CGI.escapeHTML: (I'm using Ruby's %(...) percent string literal here for the meta tag string, so I don't have to escape all the ")

require 'cgi'

name = 'some "thing"'
meta = %(<meta property="og:name" content="#{CGI.escapeHTML(name)}" />)
#=> "<meta property=\"og:name\" content=\"some "thing"\" />"

puts meta

Or the tag helper if you're using Rails:

<%= tag(:meta, property: 'og:name', content: name) %>

Both of the above output:

<meta property="og:name" content="some "thing"" />

How can I escape a single quote?

You could use HTML entities:

  • ' for '
  • " for "
  • ...

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

How to have quotation marks in HTML input values

Yes, using " works:

<input type="text" name="last_name" value=""My quote!"" />

Escape double quotes of HTML attributes output by PHP

You should just use single-quotes instead:

echo '<a href="../" title="link title">' . $link_text . '</a>';

Escaping double double quotes in html attributes in Javascript

If it is HTML, you can use HTML entities to escape characters that might be interpreted otherwise. For example, " will be displayed as " in HTML attributes:

var content = '<input type="text" ng-model="test1" />';

Proof of concept: http://jsfiddle.net/teddyrised/5X5Ye/

Refer to W3C's HTML entities chart for more information: http://dev.w3.org/html5/html-author/charref

Is it correct to use single quotes for HTML attributes?

It's certainly valid to use single quotes (HTML 4.01, section 3.2.2). I haven't noticed such a trend, but perhaps there's some framework that powers web sites you've visited that happens to quote using single quotes.

How to escape quotes in inline styles?

use single quotes and I think it should be round brackets:

<div style="background: url('http://my-url.com/img.jpg')"></div>

The " works too (tested in jsFiddle):

<div style="background: url("http://my-url.com/img.jpg")">test</div>


Related Topics



Leave a reply



Submit