如何替換CSS（'background-image'）

Question

我想替換CSS（'background-image'）路徑。

問題：

同一變量oldBgImg = this.element.css('background-image')

火狐返回 -

"url("http://mySite/images/file1.png")" 

而Chrome返回它不帶引號：

"url(http://mySite/images/file1.png)" 

這裏是解 我用。你能幫我把它變得簡單嗎？

var oldBgImg = this.element.css('background-image');  
// => FF: "url("http://mySite/images/file1.png")" 
// Chrome: "url(http://mySite/images/file1.png)" 
// According to http://www.w3.org/TR/CSS2/syndata.html#value-def-uri : 
// quotes are optional, so Chrome does not use them, but FF does . . . 

var n1 = oldBgImg.lastIndexOf("("); n1 += 1; // now points to the char after the "(" 
var n2 = oldBgImg.lastIndexOf(")"); n2 -= 1; // now points to the char before the ")" 
var c1 = oldBgImg.substring(n1, n1 + 1);  // test the first Char after the "(" 
var c2 = oldBgImg.substring(n2, n2 + 1);  // test the first Char after the "(" 
if ((c1 == "\"") || (c1 == "\'")) { n1 += 1; } 
if ((c2 == "\"") || (c2 == "\'")) { n2 -= 1; } 
var oldBgImgPath = oldBgImg.substring(n1, n2 + 1);  // [ (" ] .. [ ") ] 
var n = oldBgImgPath.lastIndexOf("/"); 
var newBgImgPath = oldBgImgPath.substring(0, n + 1) + "file2.gif"; 

// if needed, should also add : 
// var path = encodeURI(newBgImgPath); 
this.element.css('background-image', 'url(' + newBgImgPath + ')'); 

注：

1. 根據http://www.w3.org/TR/CSS2/syndata.html#value-def-uri 可以使用單引號或雙引號或無報價跡象

2. 我要尋找一個通用的解決方案，也爲相對路徑（沒有「http」或「文件」），我只想替換URL中的fileName。

Answer 1

下面是如何使用正則表達式實現的示例。 - live demo

表達：

("?)(http:.*?)\1\) 

比賽

url = 'url("http://mySite/images/file1.png")'.match(/("?)(http:.*?)\1\)/)[2]; 

然後你可以重建你的財產。

$(this).css('background-image', 'url("' + url + "')"); 

這應該適用於所有瀏覽器。

Answer 2

你可以用oldBgImg來代替引號。

oldBgImg = oldBgImg.replace(/\"/g, ""); 

這種方式無論瀏覽器檢索到它，URL總是相同的。

Answer 3

我用正則表達式做了它。我用這個代碼：

var re = /url\(['"]?(.+?)[^\/]+['"]?\)/; 
var regs = re.exec(oldBgImg); 
var newBgImgPath = regs[1] + "file2.png"; 

JSFiddle

我將解釋RE。

1. 它以/開頭，這表示它是一個RE。
2. 然後是url\(。它匹配文本url(。 (已被轉義，因爲它是一個保留字符。
3. 然後有['"]?。['"]匹配'或"和?使其成爲可選項。
4. A (開始RE組，可以參考。
5. 在.+?.匹配除換行符外的所有字符。 A +告訴他們必須至少有一個或更多。最後，一個?使+非貪婪，所以它儘可能匹配儘可能少的字符，但仍然嘗試匹配整個RE。
6. A )結束該組。
7. [^\/]匹配任何非/字符。然後再次有一個+。它後面沒有?，因爲我們希望儘可能多地匹配儘可能多的非/字符（文件名）。
8. 最後，另一個可選報價，url(...)和/的結尾括號)以結束RE。

現在re.exec(oldBgImg)返回與所述第一元件是所述整個匹配的字符串和下一元件是匹配的RE組（由()括號創建）的陣列。然後我可以採取regs[1]，這是第一個匹配的組幷包含路徑名。