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

Question

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

Blazemonger · Accepted Answer · 2012-11-19T16:27:47.113

3

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');

edited Nov 19 '12 at 16:27

answered Nov 19 '12 at 16:03

Blazemonger

90,923
26
142
180

I am actually trying to avoid using regex with html as recommended in here http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags – MaxiWheat Nov 19 '12 at 16:12
That doesn't apply here -- you're not trying to parse the entire HTML string, you're just trying to remove attributes. I've added another suggestion, but considering how you seem to be using this HTML (it's hard to tell without any code from you), a global regex string replacement is probably the best solution. – Blazemonger Nov 19 '12 at 16:15
Well, `removeAttr` will not work here because the attribute name for sizcache is generated randomly (or with datetime ?) by jQuery and changes every time. I've added a code sample to illustrate my issue. – MaxiWheat Nov 19 '12 at 16:27
I've updated my regex solution. Try it and tinker with it a bit if it doesn't grab everything. – Blazemonger Nov 19 '12 at 16:28
1

Well, regex solution is not what I expected to end up with, but I guess it does the job. Thank you – MaxiWheat Nov 22 '12 at 01:40

score 1 · Answer 2 · answered Jun 11 '13 at 11:02

I recently moved a website to a new server running IIS 6. All of sudden, Header block of the web pages are inserted a meta tag <META content="IE=7.0000" http-equiv="X-UA-Compatible">, and sizset and sizcache attributes are everywhere under IE browser. Then I looked at IIS 6 settings, found that there's a custom http header settings for emulating IE7 there that forces its way to client(IE). After deleted that settings, everything goes back to normal with my IE10 browser.

score 0 · Answer 3 · answered Mar 22 '13 at 18:13

I wrote a couple of little functions to cope with this. One is a simple function that takes an HTML string and removes the crud (shizzle). The second is a jQuery method that removes said elements from the selection — which will break certain jQuery selectors for that selection in IE6 & 7 — with an optional boolean argument to remove from all sub-nodes too.

Note the extra attribute nodeIndex not covered in the accepted answer.

var fizzleSizzle = function(x){
    return x.replace(/(nodeIndex|sizcache|sizset)[\w\d]*(="[^"]*")*/gi,'');
};

(function($){
    if(!$) return;

    // Strip the shizzle from the DOM; pass a truthy argument to do the same for all children
    $.fn.fizzleShizzle = function(deep){
        var $el = deep ? this.add(this.find('*')) || this;

        // Iterate through the selection
        $el.each(function(){
            var 
                el  = this, 
                ats = el.attributes;

            // Iterate through attributes
            $.each(ats,function(i,x){
                // Is it one of these?
                if(/^nodeIndex|^sizcache|^sizset/.test(x))
                    // Fizzle it
                    el.removeAttribute(x);
            });
        });

        return this;
    };
}(jQuery));

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

3 Answers3

Linked