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)，因此您可以通过将小数位数字和尾随一到四位数字包装在非捕获组中并添加零或一量词 (?) .
• 您的模式被打破了，因为您使用了两个连续的量词：{1,4}*，这就像说“匹配 1 到 4 0 次或更多次出现”。正则表达式引擎就像：“嗯？”

代码：(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 位数字前面是否有冒号或空格（\K 重新开始全字符串匹配）：

  /[: ]\K\d{1,4}(?:\.\d{1,4})?px/
  

• 检查 1-4 位数字前面没有数字：

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

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

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

2. /\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',
  ),

)