How do I remove a style element from an inline style using regex?

Question

I am trying to remove only one property i.e 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?

What are you trying to remove? Only instances of `float:right;`? Any `float` style? All styles except `width`? — AlliterativeAlice, Jun 11 '15 at 21:00
I would like to remove all the floats and leave the width. There are more than one float in the documents HTML that I am using. — user3457760, Jun 11 '15 at 21:03
In addition, you might want to take a look at [Should hi, thanks, taglines, and salutations be removed from posts?](http://meta.stackexchange.com/questions/2950/should-hi-thanks-taglines-and-salutations-be-removed-from-posts) — Ken White, Jun 13 '15 at 04:07
why not remove all inline styles and replace them with classes in the CSS? — Yvonne Aburrow, Apr 02 '19 at 14:55
at first I wondered why the question had so many downvotes, then I looked at the history — CervEd, May 08 '20 at 19:48

AlliterativeAlice · Answer 1 · 2015-06-11T21:20:23.360

16

This should remove all floats:

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

edited Jun 11 '15 at 21:20

answered Jun 11 '15 at 21:11

AlliterativeAlice

11,841
9
52
69

score 11 · Answer 2 · edited Jul 24 '18 at 05:59

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 + @"""";
    }));

score 4 · Answer 3 · edited Jul 16 '21 at 10:15

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

score 0 · Answer 4 · answered Apr 02 '19 at 11:56

0

In the match group value, you could replace it.

(float:.*?;)

1.  float:right;

answered Apr 02 '19 at 11:56

Abimanyu

495
2
13

score -1 · Answer 5 · answered Mar 30 '23 at 17:10

-1

string data = "<div id=\"first_line_info\" style=\"width:490px; float:right;\"> </div>";
Regex floatPattern = new Regex(@"float\s*:\s*\w+\s*;?", RegexOptions.IgnoreCase);
data = floatPattern.Replace(data, "");

answered Mar 30 '23 at 17:10

Feng

1

3

Please add some explanation for your code rather than posting code only. Additional explanation will be more helpful. – user67275 Mar 30 '23 at 22:26

How do I remove a style element from an inline style using regex?

5 Answers5

Linked