Remove all attributes of a element based on a whitelist

Question

I need to remove all attributes set on certain elements with jquery, except for a few i want to select manually. Lets say i have an image:

<img hspace="4" border="1" vspace="4" src="someimage.jpg" alt="somealt">

and i want this as result:

<img src="someimage.jpg" alt="somealt">

the only way i could think of is the .removeAttr() every single attribute. But the problem is that some times there is a style="balbla" set, i want to remove or other attr's that maybe i forgot. So i want to white list the attrs that are ok and remove all the others.

how would you do this?

Answer 1

Depending on the situation, you could create a new element, copy the attributes of the old one based on a whitelist, and replace; or you could transform it to a HTML string and parse it. But chances are, if you need to sanitize elements from jQuery, you are doing something wrong. What would you like to achieve?

Answer 2

Here's a solution that iterates over the attributes list.

I'm actually only setting its value to "" (empty string), because for some reason, removeAttribute() fails when it gets to the border attribute. Investigating...

Give it a try:

var whitelist = ["src","alt"];

$('img').each(function() {
    var attributes = this.attributes;
    var i = attributes.length;
    while( i-- ) {
        var attr = attributes[i];
        if( $.inArray(attr.name,whitelist) == -1 )
            this.removeAttributeNode(attr);
    }
});​

Answer 3

<div id="container"><img id="img" hspace="4" border="1" vspace="4" src="someimage.jpg" alt="somealt">
</div>
<textarea rows="15" cols="80" id="dbg"></textarea>

And the javascript:

$('#dbg')[0].value += $('#container').html();
atts = $("#img")[0].attributes;
var img = $("#img"); //since it may remove id as well
for (var i = atts.length - 1; i >= 0; i--) {
    var name = atts[i].name;
    if (name != 'src' && name != 'alt') { //you can implement an array or other thing
        img.removeAttr(name);
    }
}

$('#dbg')[0].value += $('#container').html();

Try here: http://jsfiddle.net/drZhu/

Answer 4

I generally prefer to not drop down to raw js DOM unless absolutely necessary when working with jQ so ill offer pure jQ solution:

$('img').each(function() {
    var e = $(this);
    var whitelist = ['src','title'];
    $.each(this.attributes, function(attr, value){
       if($.inArray(attr, whitelist) == -1) {
           e.removeAttr(attr);
       }
    });
});