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

回答1:

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

回答2:

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.

回答3:

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

来源：https://stackoverflow.com/questions/13457460/how-to-get-rid-of-sizset-and-sizcache-attributes-from-jquery

标签

jquery

wysiwyg

html

sizzle