Question

我有像这样的内联CSS

颜色：＃777;字体大小：16px的;字型重量：粗体;左边：214px;位置：相对;顶部：70像素

CSS可能以分号结束“;”或不。它还可以在其值之间包含额外的空间。我正在使用“explode”函数将CSS解析为数组，如：

阵列（
  “color”=＆gt; “＃777”，
  “font-size”=＆gt; “16像素”，
  “font-weight”=＆gt; “大胆”，

等等。

有人可以建议我使用正则表达式来完成这项任务吗？

Answer 1

另一种方式，使用正则表达式：

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

输出：

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

Answer 2

这是一个快速而肮脏的脚本，可以满足您的要求：

<?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]);
   }
}
?>

print_r($parsed)的输出是：

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

Answer 3

让我们尝试一下吧

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

Answer 4

我在使用正则表达式解决方案时遇到了问题，快速而肮脏的 php 爆炸解决方案因 url 失败，所以这里是另一个不会因 url 失败的非正则表达式解决方案：

$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;
}

输出：

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

Answer 5

如果有人正在寻找没有循环的东西，有这个解决方案。

用例：来自 HTML 样式属性的字符串（例如 Behat 测试所需）

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

print_r($styleAsKeyValuePairs);

希望这会有所帮助！

使用Regex解析内联CSS值？

5 个答案: