Return the CSS values from CSS attributes using regex

Question

I have the following regex:

$string = 'font-size:12em;';

$pattern = '@:[A-Za-z0-9.]+;@i';

preg_match($pattern, $string, $matches);

$matches returns:

Array ( [0] => :12em; )

However, why is the : and ; returned? How can I get it to not return those colons and only return the CSS value 12em?

Qtax · Accepted Answer · 2011-07-14 22:26:29Z

1

Because the first element in that array is the whole match. Use a capturing group, and the second element (or use lookarounds).

Example:

preg_match('/:\s*(\w[^;}]*?)\s*[;}]/', $string, $matches);
print $matches[1];

Note that things like these will not work in all cases. Comments and more complicated statements could break it.

Example:

/* foo: bar; */
foo: url("bar?q=:x;");

answered Jul 14, 2011 at 22:26

Qtax

34k9 gold badges92 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abs Over a year ago

That is a good point, all I am looking for really is the CSS values ending in em and px - maybe I should use these to narrow things down? How would you implement this in your regex?

Qtax Over a year ago

@Abs, try /:\s*(\w[^;}]*?(?:em|px))\s*[;}]/

Jacob Eggers · Accepted Answer · 2011-07-14 22:46:08Z

0

Use this pattern instead:

@(?<=:)[A-Za-z0-9.]+(?=;)@i

The explanation is that you the (?<=) and (?=) are respectively lookbehind and lookahead groups. Which means they aren't captured as part of your match.

Edit For handling %'s +more

@(?<=:)[^;]+@i

edited Jul 14, 2011 at 22:46

answered Jul 14, 2011 at 22:23

Jacob Eggers

9,3282 gold badges27 silver badges43 bronze badges

1 Comment

Abs Over a year ago

That works well. However, when I try it on width:10% it doesn't seem to return any value? Maybe the % is a special character?

Collectives™ on Stack Overflow

Return the CSS values from CSS attributes using regex

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related