Trying to delete certain css elements from style - css

Question

I am trying to delete the some elements from the html style="" attribute.
<div style="color: red; background: #000; position: fixed; top:0; left: 0;">Hey</div>
I want to cut this HTML so it will delete
position element, and background element.
Example:
<div style="color: red; top:0; left: 0;">Hey</div>
How can I do that on Regex?

Answer 1

A simple regex could be:
/background:.*?;|position:.*?;/
If you'd like to check only inside the style attribute in a tag, try the following PHP test code:
<?php
$str = '<div style="color: red; background: #000; position: fixed; top:0; left: 0;">Hey</div>';
echo preg_replace('/(<.*?style=.*?)background:.*?;|position:.*?;(.*?")/','$1$2',$str);
?>
You also asked to match the case when the attribute doesn't have a semicolon (unique attribute, last attribute). To match the case without semicolon, we should assume that is either the only attribute or is the last one. In both cases we'll have the following regexes working:
position:[^;]*?("|')
background:[^;]*?("|')
Basically, I'm asking to match the keyword position: or background: followed by any char except the semicolon, repeated zero or more times until a quote (single or double) is found.
This covers the case we called "without semicolon".
The following code should be working for all cases, it's not optimized and is only for clarity and example. It consist of a chain of calls:
$str = preg_replace('/(<.*?style.*?)(position:[^;]*?)("|\')/','$1$3',$str);
$str = preg_replace('/(<.*?style.*?)(background:[^;]*?)("|\')/','$1$3',$str);
$str = preg_replace('/(<.*?style.*?)(position:.*?;)(.*?")/','$1$3',$str);
$str = preg_replace('/(<.*?style.*?)(background:.*?;)(.*?")/','$1$3',$str);
echo $str;

Answer 2

try something like (untested though, so not quite sure wether the expressions are correct, though it should give you enough leadway to solve the rest of the problem)
<?php
$pattern = array();
$replacement = array();
$pattern[0] = '/position: [a-zA-Z]+;/';
$pattern[1] = '/background: #[a-zA-Z0-9]+;/';
$replacement[0] = '';
$replacement[1] = '';
$input_html = '<div style="color: red; background: #000; position: fixed; top:0; left: 0;">Hey</div>';
echo preg_replace($pattern, $replacement, $input_html);
?>

Answer 3

something like this should work:
$tag = '<div style="color: red; background: #000; position: fixed; top:0; left: 0;">Hey</div>';
$tag = preg_replace('/background:\s?#[0-9a-zA-Z]{3,6};\s?/', '', $tag);
that would only be for the background attribute, you would then do another for the color attribute.
$tag = preg_replace('/position:\s?[a-zA-Z];\s?/', '', $tag);

Answer 4

For the future, you could try to use Chirpy - VS Add In For Handling Js, Css, DotLess, and T4 Files or similar apps, try googling CSS combine/compress, they regroup all your repeated selectors and stuff.
Also I recommend to use a linked css file, that way you can organize your classes much better