Usuń wszystkie atrybuty elementu na podstawie białej listy

Question

Należy usunąć wszystkie atrybuty ustawione na niektórych elementach (za pomocą wanilowego JS lub jQuery), z wyjątkiem kilku wybranych ręcznie. Powiedzmy, że mam obraz:

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

i chcę to w wyniku:

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

Jedynym sposobem mogę myśleć jest .removeAttr() każdego atrybutu. Problem polega jednak na tym, że czasami elementy mają atrybuty, których nie ma w specyfikacji W3C. Chcę usunąć wszystkie pozostałe atrybuty, które nie są umieszczone na białej liście.

jak to zrobić?

Answer 1

Oto rozwiązanie, które jest iterowane na liście attributes.

mam właściwie tylko ustawiając jego wartość na "" (pusty ciąg znaków), bo z jakiegoś powodu, removeAttribute() zawiedzie, gdy robi się do atrybutu border. Śledztwo ...

Spróbować:

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

W zależności od sytuacji można utworzyć nowy element, skopiować atrybuty starego na podstawie białej listy i zastąpić; lub możesz przekształcić go na ciąg znaków HTML i przeanalizować go. Ale są szanse, że jeśli potrzebujesz odkażać elementy z jQuery, robisz coś złego. Co chciałbyś osiągnąć?

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> 

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

Spróbuj tutaj: http://jsfiddle.net/drZhu/

Answer 4

ja generalnie wolą nie spaść w dół do surowego js DOM, chyba że jest to absolutnie konieczne przy pracy z jQ, więc źle oferuje czyste rozwiązanie jQ:

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