Question

我有一个功能可以删除所有标签中的所有属性，除了 colspan，color或align

之外的所有属性

当我将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

这个怎么样：你要删除所有元素的属性，对吗？如何而不是删除它的所有属性，你这样做：

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 2

你可以用纯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 Mode），IE 6，Chrome 4，Safari 4和Opera 11中进行测试。需要注意的一个小问题是，Quirks Mode中的IE将显示{{1} } attribute。

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

由于额外（系统默认）属性，删除ie8中无法正常工作的所有属性

3 个答案: