Search code examples
jquerywysiwyghtmlsizzle

How to get rid of sizset and sizcache attributes from jQuery?

I am already aware of what sizcache and sizset attributes are, but my concern is about their multiplication in our web application. I explain : We developed a "home brewed" WYSIWYG html editor using jQuery and when our users save the result HTML, we retrieve it with .html() (or innerHTML) and then save it in the database. Then our users can edit it, and save back again in the database. When using non-IE browsers, everything is fine, BUT in IE, jQuery adds those (ahemm nasty) sizset and sizcache attributes and they end up in the resulting HTML. When reloading HTML from the database and saving again, more and more sizset and sizcache are added.

The ideal solution for me would be that these attributes never end up in the database. I'm not sure I want to parse HTML server side to remove them if there is a solution from jQuery in the first place. Anyone ever faced this issue ?

Here's an example of what we have :

HTML : 

<div id="source">
  <div sizset="37" sizcache09734513102453994="3" sizcache07081295255533577="350" sizcache0714455993494169="6324"></div>
  ... more html going on
</div>

Javascript :

var source = $('#source').html();

Variable "source" end up with sizset and sizcache attributes in it

Solution

  • Use a regular expression on the entire string after you retrieve it using .html():

    var re = /\s*(sizset|sizcache)\d*="[^"]*"/gi;
source = source.replace(re,'');

    http://jsfiddle.net/mblase75/fMdVc/

    Alternatively, jQuery has a .removeAttr() method, but you'll have to apply it to specific tags:

    jQobj.removeAttr('sizset').removeAttr('sizcache');