正則表達式搜索和替換路徑圖像在css

Question

有必要執行搜索和替換字符串在CSS文件。並找到只有標題圖片。

而搜索是這樣做與

/:(\s*)url\(((.(?!.*https:|.*http:|.*base64|.*data:image))*)\)/ig 

異常，更換

:$1url(\'../dist/img/vendor/$2\') 

在這種情況下，我代替以類似的方式的路徑。而我得到這個結果

background-image: url('../dist/img/vendor/"../images/preloader.gif"'); 

，需要一個字符串的

background-image: url("../images/preloader.gif"); 

得到

background-image: url('../dist/img/vendor/preloader.gif'); 

Answer 1

查找

/(url\(\s*[\"\'])(?:[^\"\']+\/)?([^\/\"\']+[\"\']\s*\))/ig 

更換

$1../dist/img/vendor/$2 

演示https://regex101.com/r/kU7cC9/3

Answer 2

使用CSS解析器是一個更好的方式，如果你想在其他事情，以避免報價的問題（單引號，雙引號，不包括引號）。

另外，background-image CSS屬性不是唯一可以包含圖像文件路徑的屬性，因爲background屬性可以編譯其他background-屬性的所有數據。

與sabberworm PHP CSS Parser一個例子，可自動包圍雙引號之間的路徑：

require __DIR__ . '/vendor/autoload.php'; 

define('NEW_PATH', '../dist/img/vendor/'); 

$oCssParser = new Sabberworm\CSS\Parser($css); 
$oCssDocument = $oCssParser->parse(); 

$properties = ['background-image', 'background']; 

foreach($oCssDocument->getAllRuleSets() as $oRuleSet) { 
    foreach($properties as $property) { 
     $oCssRules = $oRuleSet->getRules($property); 

     foreach ($oCssRules as $oCssRule) { 
      $value = $oCssRule->getValue()->__toString(); 

      if (!preg_match('~https?:|base64|data:image~S', $value)) { 
       $value = preg_replace('~url\("\K(?:[^"/]*/)*~', NEW_PATH, $value); 
       $oCssRule->setValue($value); 
      } 
     } 
    } 
} 

echo $oCssDocument->render(Sabberworm\CSS\OutputFormat::createPretty());