删除由于额外(系统默认)属性而在ie8中无法正常工作的所有属性

Question

我有一个函数，它移除所有标记中的所有属性，只有少数属性，如colspan、颜色或对齐。

当我向这个函数发送HTML代码时，它在Firefox和IE9中工作得很好，但是在IE8和IE7中，它发现了许多元素没有的属性。例如，当我发送：

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

它应该找到颜色属性并跳过它，然后找到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>

联署材料：

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、IE8、IE7(古怪模式)、IE6、Chrome 4、Safari 4和Opera 11中进行测试。需要注意的一点是，IE在古怪模式下将显示contentEditable属性。

Answer 2

这样如何:您正在删除元素的所有属性，对吗？与其删除所有属性，不如执行以下操作：

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

同样的事情，但以另一种方式.

编辑：

添加了可以设置“好”属性数组的功能.

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

Answer 3

在我的评论中，像这样的东西应该能起到净化的作用：

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