Eliminar todos los atributos de un elemento basado en una lista blanca

Question

Necesito eliminar todos los atributos establecidos en ciertos elementos (utilizando vainilla JS o jQuery), excepto unos pocos seleccionados manualmente. Digamos que tengo una imagen:

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

y quiero esto como resultado:

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

La única manera en que podía pensar es .removeAttr() cada atributo individual. Pero el problema es que algunas veces los elementos tienen atributos que no existen en la especificación W3C. Quiero eliminar todos los demás atributos que no están incluidos en la lista blanca.

¿cómo harías esto?

Answer 1

Aquí hay una solución que itera sobre la lista attributes.

que estoy en realidad sólo estableciendo su valor en "" (cadena vacía), porque por alguna razón, removeAttribute() falla cuando se pone al atributo border. Investigando ...

Darle una oportunidad:

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 2

Dependiendo de la situación, puede crear un nuevo elemento, copiar los atributos del antiguo basado en una lista blanca y reemplazar; o podrías transformarlo en una cadena HTML y analizarlo. Pero lo más probable es que, si necesita desinfectar elementos de jQuery, esté haciendo algo mal. ¿Qué te gustaría lograr?

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> 

Y el 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(); 

Prueba aquí: http://jsfiddle.net/drZhu/

Answer 4

general prefiero no desplegable a raw js DOM a menos que sea absolutamente necesario cuando se trabaja con jQ, por lo que ofrecen una solución de jQ pura:

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