什麼是正則表達式來匹配所有的CSS網址？

Question

我有一大堆的背景圖像URL的CSS文件：

.alert-01 { 
    background: url('img/alert-01.jpg') center no-repeat; 
} 
.alert-02 { 
    background: url('img/alert-02.jpg') center no-repeat; 
} 
.alert-03 { 
    background: url('img/alert-03.jpg') center no-repeat; 
} 
.alert-04 { 
    background: url('img/alert-04.jpg') center no-repeat; 
} 

我想寫一個正則表達式，將剝離出的URL。

所以最初我會得到：

url('img/alert-01.jpg') 
url('img/alert-02.jpg') 
url('img/alert-03.jpg') 
url('img/alert-04.jpg') 

，我可以再替換比特將它們轉換成html <img>塊。

我很好，最後一點，但我的正則表達式技能有點生疏。

我最新的嘗試是這樣的：/^url\(.*?g\)$/ig

任何幫助嗎？

順便說一句我是這樣做的所有在JavaScript中，但語言不應該真的影響正則表達式。

在此先感謝！

此外，只是要注意，我不能保證文件將永遠是JPG格式，可能是JPEG，PNG等。此外，背景參數將始終是相同的。因此，爲什麼我只想提取url部分。

Answer 1

嘗試：

/url\(.*?g'\)/ig 

你搞錯了，包括正則表達式，它錨輸入字符串的開頭和結尾^和$。你忘了允許報價。

Answer 2

使用以下正則表達式：

/\burl\([^)]+\)/gi 

有沒有必要使用錨（^和$），因爲它們會限制匹配了整個字符串輸入，因此失敗。爲了施工時分別捕獲圖像的路徑，這樣就可以輕鬆地使用它（並避免子）你<img>標籤使用：

/\burl\('([^']+)'\)/gi 

這在一組捕獲img/alert-xx.jpg。

Answer 3

你只是不佔收盤報價

 
url\(.*g\'\) 

和錨定

Answer 4

使用像Regexper一個工具，我們可以看到你的正則表達式匹配：

正如你所看到的，這有幾個問題：

1. 此處假設「url（」位於行首。
2. 此處假定內容以「g」結尾，而所有示例均以「g」）結尾。
3. 這個假設在「g）」之後是行的末尾。

我們需要做的只是匹配"url(" [any character] ")"。我們可以做到這一點使用：

/url\(.*?\)/ig 

請注意，我已經刪除了的情況下，在「G」結束URL的圖像類型爲.gif或任何其他非JPG，JPEG要求或PNG。

---

編輯：Seçkin M評論如下：如果我們不希望任何其他的URL;如具有.ttf或.eot的字體？定義允許的擴展組的最簡單方法是什麼？

爲此，我們可以通過將我們的擴展名放在括號內預先定義我們要尋找的擴展名，用|分隔。舉例來說，如果我們想只匹配gif，png，jpg或jpeg，我們可以使用：

/url\(.*?(gif|png|jpg|jpeg)\'\)/ig 

Answer 5

/^url\((['"]?)(.*)\1\)$/ 

使用jQuery：

var bg = $('.my_element').css('background-image'); // or pure js like element.style.backgroundImage 
    bg = /^url\((['"]?)(.*)\1\)$/.exec(bg); 
    bg = bg ? bg[2] : false; 
if(bg) { 
// Do something 
} 

十字鍍鉻/ Firefox

http://jsfiddle.net/KFWWv/

Answer 6

我從谷歌來到這個問題。舊的，但沒有一個答案正在討論關於數據：image/*網址。以下是我在另一個Google搜索結果中發現的結果，它只會匹配http或相關網址。

/url\((?!['"]?(?:data):)['"]?([^'"\)]*)['"]?\)/g 

我希望這可以幫助來自搜索引擎的其他人。