PHP preg_match_all 从 css 中获取像素值（"px"）的正则表达式

Question

我正在寻找与 PHP 的 preg_match_all() 函数一起使用的正则表达式，它将为我提供 CSS 中的所有 px 值文件。

例如，如果使用下面的 css，则预期结果将是一个数组：

array ( "11px", "0.45px", "11.0005px", "1.1px", "888.888px" )

$pattern 字符串是我目前所拥有的——但是它似乎没有用。

我当时尝试使用的逻辑是：小数点前的数字最多4位，小数点符号可选，小数点后的数字可选，最多4位，后面跟"px".

$pattern = "/([0-9]{1,4}\.*[0-9]{1,4}*px)/";

$css = '
.some_class {
    font-size: 11px;
    margin-left: 0.45px;
    margin-top:11.0005px;
    border: 1.1px solid blue;
}
.another_class {
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    color: #012345;
    z-index: 12;
    font-size: calc(100% + 888.888px);
}
';
preg_match_all($pattern, $css, $matches, PREG_PATTERN_ORDER);

Answer 1

捕获组是不必要的，只会降低正则表达式引擎的速度。
\b 将确保只匹配完整的合格号码
\d 是 [0-9].
要匹配零个或一个使用 ?。 * 表示零个或多个。
因为并非所有像素值都是浮点数 (11px)，您可以通过将 non-capturing 组包裹起来并添加零或一来使小数位数字和尾随一到四位数字可选量词 (?).
你的模式被打破了，因为你使用了两个连续的量词：{1,4}*，就像说 "match 1 to 4 0 or more occurrences"。正则表达式引擎就像："huh?"

代码：(Demo) (Pattern Demo)

$css = '
.some_class {
    font-size: 11px;
    margin-left: 0.45px;
    margin-top:11.0005px;
    border: 1.1px solid blue;
}
.another_class {
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    color: #012345;
    z-index: 12;
    font-size: calc(100% + 888.888px);
}';
$pattern = "/\b\d{1,4}(?:\.\d{1,4})?px/";

var_export(preg_match_all($pattern, $css, $matches) ? $matches[0] : 'fail');

输出：

array (
  0 => '11px',
  1 => '0.45px',
  2 => '11.0005px',
  3 => '1.1px',
  4 => '888.888px',
)

经过验证的模式：

检查 1-4 位数字前面是否有冒号或 space（\K 重新启动全字符串匹配）：
```
/[: ]\K\d{1,4}(?:\.\d{1,4})?px/
```
检查 1-4 位数字前面没有数字：
```
/\D\K\d{1,4}(?:\.\d{1,4})?px/
```

您的样本输入在小数点前使用了零。如果零是可选的，我的模式将需要调整。这些将允许没有前导数字的浮点数，同时要求点后面有一个数字。

/\D\K(?:\d{1,4}|\d{0,4}\.\d{1,4})px/
/\D\K\d{0,4}(?:\.(?=\d))?\d{1,4}px/

Answer 2

刚刚根据您的模式进行了更正，

$pattern = "~([0-9]{1,4})px|([0-9]{1,4}?\.[0-9]{1,4})px~";

$css = '
.some_class {
    font-size: 11px;
    margin-left: 0.45px;
    margin-top:11.0005px;
    border: 1.1px solid blue;
}
.another_class {
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    color: #012345;
    z-index: 12;
    font-size: calc(100% + 888.888px);
}
';
preg_match_all($pattern, $css, $matches, PREG_PATTERN_ORDER);

$matches中的数据：

array (
  0 => 
  array (
    0 => '11px',
    1 => '0.45px',
    2 => '11.0005px',
    3 => '1.1px',
    4 => '888.888px',
  ),
  1 => 
  array (
    0 => '11',
    1 => '',
    2 => '',
    3 => '',
    4 => '',
  ),
  2 => 
  array (
    0 => '',
    1 => '0.45',
    2 => '11.0005',
    3 => '1.1',
    4 => '888.888',
  ),

)

PHP preg_match_all 从 css 中获取像素值（"px"）的正则表达式

PHP preg_match_all regular expression to get pixel values (with "px") from css

css

php

regex

pixels

preg-match-all