如何使用正则表达式从内联样式中删除样式元素？

Question

I am trying to remove only one property ie float and its value, from an inline style. I would like to start with this:

<div id="first_line_info" style="width:490px; float:right;"> </div>

And make it like this:

<div id="first_line_info" style="width:490px"> </div>

So far I have tried this code:

Regex noInlineStylePattern = new Regex("style=\"[^\"]*\"", RegexOptions.IgnoreCase);
data = noInlineStylePattern.Replace(data, "");

This removes all of the inline styles. How can I just remove the float?

Answer 1

这应该删除所有浮点数：

data = Regex.Replace(data, @"(style=\"".*?)(float:\s*[^;\""]+;?)(.*?\"")", "$1$3", RegexOptions.IgnoreCase)

Answer 2

This code removes all attributes in style element except first attribute

string test = @" <div id=""first_line_info"" style=""width:490px; float:right;""> </div>";

var result = Regex.Replace(test,"(style=\")(.*?;).*\"", new MatchEvaluator((m)=>
    {
        return m.Groups[1].Value + m.Groups[2].Value + @"""";
    }));

This code removes only float attribute from style element:

var result2 = Regex.Replace(test, "(style=\".*?;).*(float:.*?;)\"", new MatchEvaluator((m) =>
    {
        return m.Groups[1].Value + @"""";
    }));

Answer 3

We can achieve the same with DOM manipulation:

var dom = document.createElement('div');
dom.innerHTML = `
  <div id="first_line_info" style="width:490px; float:right;"> </div>
  <div id="first_line_info1" style="width:490px;float:left;float:right"> </div>
`;
var elem = dom.getElementsByTagName('div');
var len = elem.length;

for (var i = 0; i < len; i++) {
  elem[i].style.float = null;
  //float removed
}

console.log(dom.innerHTML);

From dom-manipulation plus regex replace method:
advantage: just need to match float not style and float

var dom = document.createElement('div');
dom.innerHTML = `
  <div id="first_line_info" style="width:490px; float:right;"> </div>
  <div id="first_line_info1" style="width:490px; float:right;float:left"> </div>
`;
var elem = dom.getElementsByTagName('div');
var len = elem.length;

for (var i = 0; i < len; i++) {
  var style = elem[i].getAttribute('style');
  var regex = /(float:\w+;*)/g;

  style = style.replace(regex, "");
  //float removed

  elem[i].setAttribute('style', style);
}

console.log(dom.innerHTML);

Answer 4

In the match group value, you could replace it.

(float:.*?;)

1.  float:right;