CODEWITHSUNDEEP
cssregex
D_R
D_R

Reputation: 4972

Trying to delete certain css elements from style

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?

Upvotes: 1

Views: 669

Answers (4)

aleation
aleation

Reputation: 4834

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

Upvotes: 0

Lorenzo Marcon
Lorenzo Marcon

Reputation: 8179

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;

Upvotes: 4

Christophe
Christophe

Reputation: 4828

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

Upvotes: 0

bkwint
bkwint

Reputation: 626

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

?>

Upvotes: 1

Related Questions