使用正则表达式解析内联 CSS 值？答案

【问题标题】：Parse inline CSS values with Regex?使用正则表达式解析内联 CSS 值？
【发布时间】：2011-05-24 20:35:11
【问题描述】：

我有一个像这样的内联 CSS

颜色：#777；字体大小：16px；字体粗细：粗体；左：214px；位置：相对；顶部：70px

CSS 可以以分号“;”结尾或不。它还可以在其值之间包含额外的空格。我正在使用“explode”函数将 CSS 解析成一个数组，类似于：

数组(
"颜色" => "#777",
"字体大小" => "16px",
"字体粗细" => "粗体",

等等。

谁能给我建议一种使用正则表达式来完成这项任务的方法？

【问题讨论】：

Parsing CSS by regex 的可能重复项
感谢您的链接，但它的主题是关于使用选择器解析整个 CSS 文件或“样式”标签中的 CSS。我只解析元素的“样式”属性中的内联 CSS。

标签： php css regex

【解决方案1】：

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

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

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

print_r($styleAsKeyValuePairs);

希望这会有所帮助！

【讨论】：

【解决方案2】：

我遇到了正则表达式解决方案的问题，快速而肮脏的 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
)

【讨论】：

【解决方案3】：

试试这个会很好用的

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

【讨论】：

这是什么语言的？

【解决方案4】：

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

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

输出：

大批 ( [颜色] => #777 [字体大小] => 16px [字体粗细] => 粗体 [左] => 214 像素 [位置] => 相对 [顶部] => 70 像素 )

【讨论】：

为了清楚起见，由于贪心的否定字符类，这种模式可能需要对值进行修剪。 3v4l.org/6V4nj

【解决方案5】：

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

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

【讨论】：

这会中断：background-image: url(/example.jpeg?arg=1;arg=2);。正则表达式不是解析非常规数据的好选择。
@David Dorward - 当然 - 这种情况会破坏这个解决方案，或者你写的任何其他“简单”解析器，但是这个答案不使用正则表达式......只是简单的旧 explode 's - 这次也许你应该把 RE 的仇恨指向其他地方；）
哎呀。那教我假设它实际上回答了问题；）尽管如此，它仍然遇到同样的问题。你需要一个合适的 CSS 解析器来解析 CSS。
实际上，在这种情况下，Regex 比使用“explode”要快一些，我要求使用 Regex 解决方案，所以我仍然投票支持 gnarf 的答案。不过，非常感谢大家的回答:)