title: Escape Quotes In HTML5 Data Attribute Using Javascript
body: <p>I'm using jQuery's <code>.data()</code> to work with custom HTML5 data attributes where the value of the attribute needs to be able to contain both single quotes and double quotes: </p>
  
  <pre><code>&lt;p class="example" data-example="She said "WTF" on last night's show."&gt;
  </code></pre>
  
  <p>I know using character codes like <code>&amp;quot;</code> in the data attribute value could make the above work, but I can't always control how the values are inputted. Plus, I need to be able to use HTML tags in the markup, like this: </p>
  
  <pre><code>&lt;p class="example" data-example="
  She said "&lt;abbr title="What The F***"&gt;WTF&lt;/abbr&gt;" on last night's show.
  "&gt;
  </code></pre>
  
  <p>If some form of <code>.replace()</code> is the answer, then it needs to be done before the value is read by <code>.data()</code>—maybe by applying it across the entire <code>&lt;body&gt;</code>?</p>
  
  <p>Normal backslash escaping like <code>&lt;abbr title="te\'st"&gt;WTF&lt;/abbr&gt;</code> doesn't work either.</p>
  
  <p>Ideally this would have the flexibility to work w/ both:</p>
  
  <p><code>data-example="..."</code>
  and
  <code>data-example='...'</code></p>
  
  <p>But if it's only possible one way then I could at least roll with that. Ideas?</p>
  
  <p><strong>Update</strong> - some more context:</p>
  
  <p>I'm working on this for <a href="http://responsejs.com" rel="noreferrer">responsejs.com</a>. An actual application of this might be to only load a sidebar for browsers above a certain width (and have this handled in the browser rather than PHP). In the case of WordPress for example, the sidebar could contain widgets, images, etc. The quotes within PHP tags are a non-issue b/c they are parsed into HTML before they get to the browser. Example:</p>
  
  <pre><code>&lt;aside id="primary" class="sidebar" 
  
          data-oweb=' 
  
              &lt;?php dynamic_sidebar( 'primary' ); ?&gt;
  
          '
      &gt;
  
      optional default markup for mobile and no-js browsers here
  
  &lt;/aside&gt;
  </code></pre>