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;