Соответствующие URL-адреса фонового изображения с регулярными выражениями

Я пытаюсь вытащить абсолютные URL-адреса из блока текста CSS и заменить их на относительные версии в JavaScript.Соответствующие URL-адреса фонового изображения с регулярными выражениями

Вот что я до сих пор, который работает отлично подходит для URL, которые не имеют каких-либо скобок в них:

var relativeCss = originalCss.replace(/url\(['|"]?(http[^\)|^'|^"]+)['|"]?\)/g, function(fullMatch, fullUrl) { 
    var fileName = fullUrl.substr(fullUrl.lastIndexOf('/') + 1); 
    return 'url("' + fileName + '")'; 
});

Однако, если есть URL с скобкой как часть имени файла, например background-image: url(http://uploads.server.com/IMG_0445 (2).jpg);, то жадное регулярное выражение перестает останавливаться на первом найденном парне.

Вот простой тест: http://jsfiddle.net/NHfCg/1, для которого выход должен быть:

.rule1 { background-image: url("image1.png"); } 
.rule2 { background-image: url("IMG_0445 (2).jpg"); }

Я мог бы написать более длинное регулярное выражение, которое ищет конкретные расширения файлов для оканчиваются на (например, .(png|jpg|jpeg)['|"]?\), но интересно, если есть способ ., чтобы сделать это без расширений белого списка

некоторых ограничениями я сталкиваюсь с:

Я не могу предположить, что background-image: url(...) декларация будет правильно заканчиваться ;
Я не могу предположить, что background-image: url(...) будет иметь URL в кавычках - это может быть в кавычках, можно использовать одиночные кавычки (') или двойные кавычки (").

источник

2013-11-18 Vlad Magdalin

Вы можете использовать этот шаблон, так как вы уверены, что адрес всегда на одной строке:

/\burl\s*\(\s*["']?([^"'\r\n,]+)["']?\s*\)/gi

Заметим, что вы можете сделать эту замену в одном кадре, как это:

var relativeCss = originalCss.replace(/\burl\s*\(\s*["']?http:\/\/((?:[^"'\r\n\/,]+)\/?)+["']?\s*\)/i, 'url("$1")');

источник

2013-11-18 18:10:34

Это прекрасно работает, спасибо! Я понимаю, что могу сделать это одним выстрелом, но мне нужно сделать дополнительную обработку с соответствующей группой. –

Еще одно изменение учетной записи для нескольких определений URL в одной строке (так как 'background-image' поддерживает несколько изображений) было бы добавить' \, 'сразу после' \ r \ n'. –

@ VladMagdalin: действительно! Я забыл об этом. Чтобы справиться с этим случаем, вам нужно только запретить ',' (так как несколько 'url (....)' всегда разделяются с ','. Я отредактирую свой шаблон, чтобы добавить ',' в класс символов , –

Вы могли бы сделать что-то вроде этого

Поиск:

# /url\(\s*(["']?)\s*([^{}]*\.[a-zA-z]{2,3})\s*\1\s*\)/ 

url 
\(

\s* 
(["']?)    # (1) 
\s* 
(     # (2 start) 
     [^{}]*    # not {} so not to overrun 
     \. [a-zA-z]{2,3}  # image file extension 
          # (comment this out if no file extension is possible) 
)      # (2 end) 
\s* 
\1     # backref to grp 1 
\s* 

\)

Заменить:

"url(" + transformed($2) + ")"

источник

2013-11-18 18:28:31 sln

Вот регулярное выражение, которое обрабатывает как список адресов и запятых в URL.

/\burl\s*\(\s*["']?([^"'\r\n\)\(]+)["']?\s*\)/gi

Запятые разрешены в URL-адресов и используются в dataURIs для разделения ресурсов мета данные из base64 кодируемых потока данных.

Вы можете увидеть, как это работает здесь: http://regex101.com/r/eT7zN6

источник

2014-04-22 19:17:00 Shawn

Соответствующие URL-адреса фонового изображения с регулярными выражениями

ответ

Смежные вопросы