一个在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>

我希望把这个字符串变成：

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

- Jimmy Page

---

我正在引用一篇传说中的答案，其中提到不要使用正则表达式解析HTML。 - zerkms

removeAttribute()怎么样？ - David Thomas

将其转换为DOM元素并使用适当的工具进行操作。 这是一种更稳定的解决方案。 - You

Answer 1

不要使用正则表达式解析HTML，这是一个不好的想法，你可以利用所有浏览器中可用的DOM功能。首先，我们需要能够遍历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。

- You

---

示例与 jsfiddle 不同，walk_the_DOM(wrapper.firstChild 应为 walk_the_DOM(wrapper，否则只有第一个元素会被剥离属性。 - Abc Xyz

Answer 2

如果您愿意删除除div标记名称之外的所有内容-

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

如果HTML是大写字母，则此代码将返回<DIV>。

- kennebec

---

这对包含>字符的属性无效： <div data-attr="> this is a value">Text</div>'.replace(/<(div)[^>]+>/ig,'<$1>') - TbWill4321

Answer 3

使用正则表达式。这在生产时间上很快，开发时间上也很容易。

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

- Alejandro Salamanca Mazuelo

Answer 4

如果你只想删除属性，那么正则表达式并不是正确的工具。我建议使用以下方法：

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 Fiddle演示。

- David Thomas

Answer 5

我使用了这个。

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,[]);

- Cem Yıldız

---

你好，代码运行良好，但仍然只有这些属性没有被删除：<p data-spm-anchor->和一些其他的数据属性。 - sairfan

Answer 6

尝试使用正则表达式解析HTML将会引起问题。这个答案可能有助于解释它们。如果您正在使用jQuery，您可以尝试像这样做：

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

为了使其正常工作，您需要使用此处描述的outerHTML插件。

如果您不想使用jQuery，则会更加棘手。这些问题可能有一些有用的答案，可以将字符串转换为DOM元素集合：将HTML字符串转换为DOM元素？, 使用内置DOM方法或原型创建新的DOM元素。您可以通过内置的removeAttr函数循环遍历元素并删除属性。我没有时间或动力为您解决所有细节。

- Elias Zamaria

---

尽管这个答案本身是正确的，但仍然没有给出任何提示，告诉OP应该做什么。 - zerkms

好的观点。抱歉，但我不得不链接到那篇文章。我可能会扩展我的答案，提出做什么的建议。 - Elias Zamaria

谢谢，但由于某些原因，我不想使用jQuery。 - Jimmy Page

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

一个更通用的解决方案是将属性名称作为额外参数或空格分隔的字符串获取，然后迭代这些名称以删除它们。

- RobG

Answer 8

我对正则表达式不太了解，但对于jQuery，我非常熟悉。

将给定的HTML字符串转换为DOM元素，进行解析，并返回其内容。

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

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

- Devplex