用於從JS中的HTML標記中刪除id，style，class屬性的正則表達式

Question

我在javascript中使用了html字符串並使用正則表達式我想刪除html標簽中的id，style和class屬性，例如我有：

New York City.<div style="padding:20px" id="upp" class="upper"><div style="background:#F2F2F2; color:black; font-size:90%; padding:10px 10px; width:500px;">This message is.</div></div>

我希望這個String成為：

New York City.<div><div>This message is.</div></div>

Answer 1

您可以利用所有瀏覽器中可用的DOM功能，而不是使用正則表達式解析HTML，這是一個壞主意 。 我們需要能夠首先遍歷DOM樹：

var walk_the_DOM = function walk(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walk(node, func);
        node = node.nextSibling;
    }
};

現在解析字符串並操縱DOM：

var wrapper= document.createElement('div');
wrapper.innerHTML= '<!-- your HTML here -->';
walk_the_DOM(wrapper.firstChild, function(element) {
    if(element.removeAttribute) {
        element.removeAttribute('id');
        element.removeAttribute('style');
        element.removeAttribute('class');
    }
});
result = wrapper.innerHTML;

另見這個JSFiddle 。

Answer 2

如果您願意刪除除div標簽名稱之外的所有內容 -

string=string.replace(/<(div)[^>]+>/ig,'<$1>');

如果html為大寫，則返回<DIV> 。

Answer 3

如果您只想刪除屬性，那么正則表達式是錯誤的工具。 相反，我建議：

function stripAttributes(elem){
    if (!elem) {
        return false;
    }
    else {
        var attrs = elem.attributes;
        while (attrs.length) {
            elem.removeAttribute(attrs[0].name);
        }
    }
}

var div = document.getElementById('test');

stripAttributes(div);

JS提琴演示 。

Answer 4

我用過這個

var html = 'New York City.<div style="padding:20px" id="upp"
class="upper"><div style="background:#F2F2F2; color:black; font-size:90%; padding:10px 10px; width:500px;">This message is.</div></div>';

function clear_attr(str,attrs){
    var reg2 = /\s*(\w+)=\"[^\"]+\"/gm;
    var reg = /<\s*(\w+).*?>/gm;
    str = str.replace(reg,function(match, i) {
        var r_ = match.replace(reg2,function(match_, i) {
            var reg2_ = /\s*(\w+)=\"[^\"]+\"/gm;
            var m = reg2_.exec(match_);
            if(m!=null){
                if(attrs.indexOf(m[1])>=0){
                    return match_;
                }
            }
            return '';
        });        
        return r_;
    });
    return str;
}
clear_attr(html,[]);

Answer 5

使用正則表達式。 這很快（在生產時間）和容易（在開發時間）。

htmlCode = htmlCode.replace(/<([^ >]+)[^>]*>/ig,'<$1>');

Answer 6

嘗試使用正則表達式解析HTML將導致問題。 這個答案可能有助於解釋它們。 如果您使用的是jQuery，您可以執行以下操作：

var transformedHtml = $(html).find("*").removeAttr("id").removeAttr("style").removeAttr("class").outerHTML()

為此，您需要使用此處描述的outerHTML插件 。

如果你不想使用jQuery，那將會更棘手。 關於如何將字符串轉換為DOM元素的集合，這些問題可能有一些有用的答案： 將HTML字符串轉換為DOM元素？ ， 使用內置DOM方法或原型從HTML字符串創建新的DOM元素 。 您可以使用內置的removeAttr函數遍歷元素並刪除屬性。 我沒有時間或動力為您找出所有細節。

Answer 7

一個簡單的腳本解決方案將是這樣的：

function removeProperties(markup) {
  var div = document.createElement('div');
  div.innerHTML = markup;
  var el, els = div.getElementsByTagName('*');

  for (var i=0, iLen=els.length; i<iLen; i++) {
    el = els[i];
    el.id = '';
    el.style = '';
    el.className = '';
  }
  // now add elements to the DOM
  while (div.firstChild) {
   // someElement.appendChild(div.firstChild);
  }
}

更通用的解決方案是將屬性名稱作為額外參數，或者說空格分隔的字符串，然后迭代名稱以刪除它們。

Answer 8

我不知道RegEx，但我肯定知道jQuery。

將給定的HTML字符串轉換為DOM元素，解析它並返回其內容。

function cleanStyles(html){
    var temp = $(document.createElement('div'));
        temp.html(html);

        temp.find('*').removeAttr('style');
        return temp.html();
}