如何用PHP的preg_replace正确替换CSS变量的颜色值？

问题根源分析 #

1. 正则贪婪匹配导致过度替换：原函数使用.*贪婪匹配规则，会从第一个匹配到的$start位置，一直匹配到最后一个$end位置，直接覆盖了中间的所有CSS代码。
2. 调用参数错误：
   • 颜色值未加引号：PHP中#开头的内容会被解析为注释，导致#FFFFFF这类颜色值无法正确传入函数。
   • 起止符不匹配：替换--themeColour时错误使用了--buttonRequestColour的注释作为结束符，完全无法定位到目标位置。
3. 正则特殊字符未转义：$end中的/*、*/包含正则特殊字符*和/，直接拼接会破坏正则语法，导致匹配逻辑异常。
4. 全局变量使用不严谨：依赖全局变量$cssFile容易引发意外的变量污染，不利于函数复用。

方案一：精准匹配CSS变量格式 #

直接针对CSS变量的固定格式构建正则，无需手动传入起止符，减少出错概率：

function update_colour($cssContent, $targetColour, $varName) {
    // 构建正则：匹配变量名 + 可选空格 + : + 可选空格 + 颜色值 + ;/*变量名:*/
    $pattern = '/(' . preg_quote($varName . ':') . '\s*)(#[0-9A-Fa-f]{3,6})(\s*;\/\*' . preg_quote($varName . ':') . '\*\/)/i';
    // 保留前后固定内容，替换中间的颜色值
    $replacement = '$1' . $targetColour . '$3';
    return preg_replace($pattern, $replacement, $cssContent);
}

// 原始CSS内容
$cssFile = '
:root{
    --buttonRequestColour: #0DA5FF;/*--buttonRequestColour:*/

    --themeColour: #f58134;/*--themeColour:*/
}
';

// 正确调用：传入原始内容、目标颜色、变量名
$cssFile = update_colour($cssFile, '#FFFFFF', '--buttonRequestColour');
// 注意：#00000是无效十六进制颜色，改为标准的#000000或#000
$cssFile = update_colour($cssFile, '#000000', '--themeColour');

echo $cssFile;

方案二：修复原函数的正则与参数问题 #

如果想保留原函数传入起止符的逻辑，需要修正正则规则和调用参数：

function update_colour($cssContent, $targetColour, $start, $end) {
    // 转义起止符中的正则特殊字符，使用非贪婪匹配.*?避免过度替换
    $searchPattern = '/(' . preg_quote($start, '/') . ')(.*?)(' . preg_quote($end, '/') . ')/s';
    $replaceStr = $start . $targetColour . $end;
    return preg_replace($searchPattern, $replaceStr, $cssContent);
}

// 原始CSS内容
$cssFile = '
:root{
    --buttonRequestColour: #0DA5FF;/*--buttonRequestColour:*/

    --themeColour: #f58134;/*--themeColour:*/
}
';

// 正确调用：起止符完全对应目标变量的前后内容，颜色值加引号
$cssFile = update_colour($cssFile, '#FFFFFF', '--buttonRequestColour: ', ';/*--buttonRequestColour:*/');
$cssFile = update_colour($cssFile, '#000000', '--themeColour: ', ';/*--themeColour:*/');

echo $cssFile;

最终效果 #

两种方案都能生成预期的CSS代码：

:root{
    --buttonRequestColour: #FFFFFF;/*--buttonRequestColour:*/

    --themeColour: #000000;/*--themeColour:*/
}

内容的提问来源于stack exchange，提问作者ronaldklching