Javascript 如何替换css（'；背景图像'；）

我想替换css（“背景图像”）路径

问题是：

对于同一变量

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 + ')');

注:

据 可以使用单引号、双引号或无引号符号

我正在寻找一个通用的解决方案，也是相对路径（没有“http”或“file”），我只想替换URL中的文件名

---

下面是一个如何使用正则表达式的示例。-

表达方式：

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

比赛

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

然后你可以重建你的财产

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

---

这应该适用于所有浏览器。

您可以用类似的内容替换

oldBgImg

中的引号

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

---

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

我用正则表达式实现了这一点。我使用以下代码：

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

我来解释原因

它以

/

开头，这表示它是一个RE

然后是

url\（

），它匹配文本

url（

）（

）因为是保留字符而被转义

然后是

['”]？

['”]

匹配的

'

或

“

，

？

使其成为可选的

（

启动可引用的RE组

在

+？

中，匹配除换行符以外的所有字符。

+

告诉必须至少有一个或多个字符。最后，

？

使

+

不贪婪，因此它匹配尽可能少的字符，但仍尝试匹配整个字符

A

）

结束分组

[^\/]

匹配任何非

/

字符。然后又有一个

+

字符。它后面没有

？

，因为我们希望尽可能多地匹配末尾的非

/

字符（文件名）

最后，另一个可选的引号，一个转义的

）

用于

url（…）

中的结束括号，一个

/

用于结束RE

---

现在

re.exec（oldBgImg）

返回一个数组，第一个元素是整个匹配的字符串，下一个元素是匹配的re组（由

（）

方括号创建）。然后我可以只取

regs[1]

，这是第一个匹配的组并包含路径名。

使用正则表达式可能更容易些？我知道，您可以在ff中同时使用带引号和不带引号的url。尝试更改它，看看会发生什么！@Homan-我知道。问题是，我尝试更改CSS初始文件中的值，而每个浏览器都处理其di不管有没有引号…谢谢你的详细回答。但是如果我有一个引号呢？如果URL不是以“http”开头怎么办？我正在寻找一个更通用的解决方案。@Atara重新编辑以匹配单引号；已经可以处理不以“http”开头的URL。它只返回

URL（

和

之间的URL）

在最后一次

/

之后没有任何内容。谢谢！我会试试的。