如何替换css（'background-image'）

Question

我想替换css（'background-image'）路径。

问题：

表示相同的变量oldBgImg = this.element.css('background-image')

FireFox返回 -

"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

我用正则表达式做了。我使用这段代码：

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

<强> JSFiddle

我会解释RE。

1. 以/开头，这表示它是RE。
2. 然后是url\(。它与文本url(匹配。 (被转义，因为它是一个保留字符。
3. 然后有['"]?。 ['"]匹配'或"，而?会将其设为可选。
4. (启动一个可以参考的RE组。
5. 在.+? .匹配除换行符之外的所有字符。 +告诉他们必须至少有一个或更多。最后，?使+非贪婪，因此它尽可能匹配小字符但仍尝试匹配整个RE。
6. )结束群组。
7. [^\/]匹配任何非/字符。然后又有一个+。它之后没有?，因为我们希望尽可能多地匹配尽可能多的非/个字符（文件名）。
8. 最后，另一个可选引用，)中的结束括号的转义url(...)和结束RE的/。

现在re.exec(oldBgImg)返回一个数组，第一个元素是整个匹配的字符串，下一个元素是匹配的RE组（由()括号创建）。然后，我可以使用regs[1]，这是第一个匹配的组并包含路径名。

Answer 3

你可以用oldBgImg替换oldBgImg = oldBgImg.replace(/\"/g, ""); 中的引号。

{{1}}

这样，无论浏览器检索到哪个URL，URL总是相同的。