javascript - 用于从 JS 中的 HTML 标记中删除 id、样式、类属性的正则表达式

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>

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

<DIV>如果 html 是大写，这将返回。

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

​<a href="http://jsfiddle.net/davidThomas/3fnzn/" rel="nofollow">JS Fiddle 演示。

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

Trying to parse HTML with regexes will cause problems. This answer may be helpful in explaining them. If you are using jQuery, you may be able to do something like this:

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

For this to work, you need to be using the outerHTML plugin described here.

If you don't want to use jQuery, it will be trickier. These question may have some helpful answers as to how to convert the string to a collection of DOM elements: Converting HTML string into DOM elements?, Creating a new DOM element from an HTML string using built-in DOM methods or prototype. You may be able to loop through the elements and remove the attributes using the built-in removeAttr function. I don't have the time or motivation to figure out all the details for you.

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