URL-адреса Preg_match в CSS - PullRequest
Новая
       22

URL-адреса Preg_match в CSS

0 голосов
/ 07 апреля 2019

Я хотел бы сопоставить все URL из CSS, который я использовал, с этим регулярным выражением, и оно работало очень хорошо. 

@[^a-z_]{1}url\s*\((?:\'|"|)(.*?)(?:\'|"|)\)@im

Full match: url(https://example/product.png)
Group 1: https://example/product.png

проблема возникла, когда я нашел такой URL: 

background-image: url(/uploads/2019/03/product01-image(thumbnail_photo).jpg);


Full match url(/uploads/2019/03/product01-image(thumbnail_photo)
Group 1. /uploads/2019/03/product01-image(thumbnail_photo

Я посмотрел эту тему и попытался использовать некоторые регулярные выражения, которые существуют с некоторой модификацией

preg_match для соответствия src =, background = и url (..)

результат был такой 

@(?:url\((?:\"|'|)(.*\.(?:[a-z_]{3}))(?:\"|'|)\))@im

Full match: url(/uploads/2019/03/product01-image(thumbnail_photo).jpg)
Group 1: /uploads/2019/03/product01-image(thumbnail_photo).jpg

Сначала казалось, что он работает нормально, но он ломается, когда у меня возникает такая ситуация: 

.card-thumb__img1{display:block;width:142px;height:62px;background:url(https://example.com/product01.jpg) center center no-repeat;background-size:contain}@media (max-width:1029px).card-thumb__img2{display:block;z-index:1;background:url(https://example.com/product02.jpg) center center no-repeat #000;

Full match: url(https://example.com/product01.jpg) center center no-repeat;background-size:contain}@media (max-width:1029px).card-thumb__img2{display:block;z-index:1;background:url(https://example.com/product02.jpg)
Group 1:https://example.com/product01.jpg) center center no-repeat;background-size:contain}@media (max-width:1029px).card-thumb__img2{display:block;z-index:1;background:url(https://example.com/product02.jpg

Как я могу решить эту проблему и получить ожидаемый результат для всех ситуаций?

Редактировать Некоторые типы вхождений, которым я должен соответствовать 

url(https://exemples.com/fonts/lato/lato/lato-regular-webfont.ttf)
src:url(https://exemples.com/fonts/lato/lato-regular-webfont.eot?#iefix)
background:url(https://exemples.com/product/header/img.png)
background:url(/product/header/img.png)
background:url("/product/header/img.png")
background:url('/product/header/img.png')
background:url(/uploads/2019/03/0002-image(thumbnail_product).jpg)

1 Ответ

1 голос
/ 08 апреля 2019

Для данных в качестве примера одним из вариантов может быть повторение первого подшаблона (?1 и использование второй группы захвата для URL.

URL будет в группе захвата 2. 

url(\(((?:[^()]+|(?1))+)\))

Regex demo | Php demo

Пояснение

  • url
  • ( Первая группа захвата
    • \( Совпадение ( char
    • ( Вторая группа захвата
      • (?:[^()]+|(?1))+ Совпадение либо 1+ раз, что не указано в классе символов, либо повторение первого подшаблона и повторение1+ раз
    • ) Закрыть вторую группу захвата
    • \) Совпадение ) char
  • ) Закрыть первую группу захвата

Это также будет соответствовать ведущему и конечному " и ' URL.Вы можете выполнить другую проверку при получении совпадений с помощью группы захвата, чтобы проверить, совпадает ли начальный тип цитаты с конечным типом цитаты.

Например: 

$re = '/url(\(((?:[^()]+|(?1))+)\))/m';
$str = 'background:url("/product/header/img1.png") and background:url("/product/header/img2.png\' and background:url(/product/header/img3.png"))';

preg_match_all($re, $str, $matches, PREG_SET_ORDER);

foreach ($matches as $match) {
    if (preg_match('/^([\'"]?)[^"]+\1$/', $match[2])) {
        echo trim($match[2], "'\"") . PHP_EOL;
    }
}

Результат: 

/product/header/img1.png
...