Удалите все атрибуты, которые не работают должным образом в ie8 из-за дополнительных (по умолчанию) атрибутов

Question

У меня есть функция, которая удаляет все атрибуты во всех тегах, кроме нескольких, таких как colspan, color или align

Когда я отправляю HTML-код этой функции, он хорошо работает в Firefox и IE9, но в IE8 и IE7 он находит множество атрибутов, которых нет у элементов. Например, когда я отправляю:

jRemoveAtt("<button color=\"red\" id=\"start\">Hello World</button>")

Он должен найти атрибут color и пропустить его, затем найти атрибут id и удалить его.

Но в IE8 он находит больше атрибутов, таких как onwrite, onunwrite, onpage, onbeforeactivate и др.

Эта функция предназначена для очистки HTML и отправки его в печатаемое новое окно. Он очень быстро очищается, но в IE8 это занимает 8-9 секунд, а браузер не отвечает.

Я не знаю, как я могу игнорировать неписанные атрибуты в строках HTML. Есть идеи?

Вот моя функция:

function jRemoveAtt(x){
    if(!x)return '';
    var str=$('<div>'+x+'</div>');
    $('*',str).each(function(){
        var c=$(this);
        var attributes = $.map(this.attributes, function(item) {
            var a=item.name.toLowerCase();
            /*alert(a); */  //this alert shows the extra tags when activated
            if (a!='align'&&a!='colspan'&&a!='span'&&a!='color'&&a!='size') {
                c.removeAttr(item);
            }

        });

    });
    return $(str).html();
};

Answer 1

Вы можете сделать это в чистом JS.

HTML:

<div color="red" id="start" align="center">Hello World</div>

JS:

var test = document.getElementById("start");
purgeAttributes(test);
postAttributes(test);

function purgeAttributes(el)
{
    //keep these attributes
    var whitelist = ["colspan", "color", "align"];
    for(var i=0;i<el.attributes.length;i++)
    {
        var attr = el.attributes.item(i);
        var whiteListCheck = false;
        //loop through whitelist
        for(var j=0;j<whitelist.length;j++)
        {
            if(attr.nodeName === whitelist[j])
            {
                whiteListCheck = true;
                break;
            }   
        }
        if(!whiteListCheck)
        {
            //second parameter means a case-sensitive search
            el.removeAttribute(attr.nodeName, 1);   
        }
    }  
}

function postAttributes(el)
{
    var txtHolder = document.createElement("p");
    var titleTxt = document.createTextNode("attributes: ");
    document.body.appendChild(txtHolder);
    txtHolder.appendChild(titleTxt);
    for(var i=0;i<el.attributes.length;i++)
    {
        var attr = el.attributes.item(i);
        if(attr.nodeValue)
        {
            var txt = document.createTextNode(attr.nodeName + ": " + attr.nodeValue + " ");
            txtHolder.appendChild(txt);
        }
    }  
}

http://jsfiddle.net/mkmcdonald/ZsezN/3/

Протестировано как работающее в Firefox 4, IE 8, IE 7 (режим Quirks), IE 6, Chrome 4, Safari 4 и Opera 11. Следует отметить, что IE в режиме Quirks отображает атрибут contentEditable .

Answer 2

Расширяя мой комментарий, что-то вроде этого должно сделать трюк для очистки:

function purgeAttributes(el) {
    var curIndex = 0;
    var whitelist = ["colspan", "color", "align"];
    var initialLength = el.attributes.length;
    var whiteListCheck = false; 

    for (var i = 0; i < initialLength; i++) {
        var attr = el.attributes.item(curIndex);
        for(var j = 0; j < whitelist.length; j++) {
            if(attr.nodeName === whitelist[j]) {
                whiteListCheck = true;
                // We know that there is an item at curIndex we want to keep, proceed to the next
                curIndex++;
                break;
            }   
        }
        if(!whiteListCheck) {
            el.removeAttribute(attr.nodeName);
        }
    };
}

Answer 3

Как насчет этого: вы удаляете все атрибуты элемента, верно? Как насчет того, чтобы вместо удаления всех его атрибутов сделать это:

HTML:

<div id="myElement" fakeAttr="1" fakeAttr2="2">This is a test.</div>

JQuery:

var before = $("#myElement");
var after = $("<"+before[0].tagName+"/>", { html: before.html() });

alert( "Before: "+before[0].outerHTML );
alert( "After: "+after[0].outerHTML );

То же самое, но сделано по-другому ...

EDIT:

Добавлено в функцию, где можно установить массив "хороших" атрибутов ...

var attrObj = function(el, good){
    var obj = {}, attribs = el[0].attributes;
    var tLC = function(s){ return s.toLowerCase() };

    for(var i=0; i<attribs.length; i++){
        var isGd = false;
        for(var i2=0; i2<good.length; i2++){
            if(tLC(attribs[i].name) == tLC(good[i2])){ isGd = true; break; }
        }
        if(isGd){ obj[attribs[i].name] = attribs[i].value; }
    }

    return obj;
};

var before = $("#myElement");
var newAttr = attrObj(before, ["id"]);
newAttr.html = before.html();

var after = $("<"+before[0].tagName+"/>", newAttr);

alert( "Before: "+before[0].outerHTML );
alert( "After: "+after[0].outerHTML );