CODEWITHSUNDEEP
phpcssregex
Teiv
Teiv

Reputation: 2635

Parse inline CSS values with Regex?

I have such an inline CSS like this

color:#777;font-size:16px;font-weight:bold;left:214px;position:relative;top:70px

The CSS may end with a semicolon ";" or not. It also can contain extra space between its values. I'm about using "explode" function to parse the CSS into an array, something like :

Array(
"color" => "#777",
"font-size" => "16px",
"font-weight" => "bold",

and so on.

Can anybody suggest me a way to use regular expression to complete this task?

Upvotes: 4

Views: 3571

Answers (5)

Delphine
Delphine

Reputation: 888

In case of someone who's looking for something without a loop there's this solution.

Use case: string from HTML style attribute (needed for Behat Tests for example)

$styleAttribute = "color: blue; opacity: 50%;";
$styleAsKeyValuePairs = array_column(array_chunk(preg_split("/[:;]\s*/", $styleAttribute), 2), 1, 0);

print_r($styleAsKeyValuePairs);

Hope this whould be helpful !

Upvotes: 0

Felix Eve
Felix Eve

Reputation: 3864

I had issues with the regex solution, and the quick and dirty php explode solution fails with urls, so here is another non-regex solution that doesn't fail with urls:

$css = 'background-image:url(https://test.com/media.jpg);color:#777;font-size:16px;font-weight:bold;left:214px;position:relative;top:70px';

$attrs = explode(';', $css);
$parsed = [];
foreach($attrs as $attr) {
  $first_colon_pos = strpos($attr, ':');
  $key = substr($attr, 0, $first_colon_pos);
  $value = substr($attr, $first_colon_pos + 1);
  $parsed[$key] = $value;
}

Outputs:

Array
(
    [background-image] => url(https://test.com/media.jpg)
    [color] => #777
    [font-size] => 16px
    [font-weight] => bold
    [left] => 214px
    [position] => relative
    [top] => 70px
)

Upvotes: 0

Lakshmanan Murugappan
Lakshmanan Murugappan

Reputation: 21

Let try this it will work fine

str.replace(/(\w+[-]?\w+)(?=:)/gi,'\n[$1] => ').replace(/[:;]+/g,'')

Upvotes: -1

gnarf
gnarf

Reputation: 106322

Another way, using a regex:

$css = "color:#777;font-size:16px;font-weight:bold;left:214px;position:relative;top:   70px";

$results = array();
preg_match_all("/([\w-]+)\s*:\s*([^;]+)\s*;?/", $css, $matches, PREG_SET_ORDER);
foreach ($matches as $match) {
  $results[$match[1]] = $match[2];
}

print_r($results);

Outputs:

Array
(
    [color] => #777
    [font-size] => 16px
    [font-weight] => bold
    [left] => 214px
    [position] => relative
    [top] => 70px
)

Upvotes: 6

gnuf
gnuf

Reputation: 2762

Here's a quick-and-dirty script that does what you're asking:

<?php

$css = "color:#777;font-size:16px;font-weight:bold;left:214px;position:relative;top:   70px";

$attrs = explode(";", $css);

foreach ($attrs as $attr) {
   if (strlen(trim($attr)) > 0) {
      $kv = explode(":", trim($attr));
      $parsed[trim($kv[0])] = trim($kv[1]);
   }
}
?>

And the output of print_r($parsed) is:

Array
(
   [color] => #777
   [font-size] => 16px
   [font-weight] => bold
   [left] => 214px
   [position] => relative
   [top] => 70px
)

Upvotes: 4

Related Questions