從$（）.css（「background-image」）獲取相對路徑

Question

在CSS中我有background-image: url(folder/bg.jpg);。

爲此，JQuery的css("background-image")回報url(http://www.example.com/folder/bg.jpg)，

，但我只需要folder/bg.jpg。

我正在尋找一個正則表達式來解決這個問題。

Answer 1

嘗試使用String.prototype.split()與RegExp/\//，Array.prototype.join()，String.prototype.slice()

$("div").html(
 
    
 
    $("div").css("backgroundImage").split(/\//) 
 
    .slice(-2).join("/").slice(0, -1) 
 

 
)

div { 
 
    background-image: url(http://www.example.com/folder/bg.jpg) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div></div>

Answer 2

由於jQuery將返回的絕對路徑，你將永遠無法確定沒有字符串操作了解的相對路徑是什麼刪除給定如何嵌套您的網頁可能在您的目錄層次結構。我會建議字符串替換正則表達式。見下面的plnkr。

$("div").click(function() { 
     var bg = $(this).css('background-image'); 
     bg = bg.replace('url(http://run.plnkr.co/cybkjF7HN9sYH3oS/','').replace(')',''); 
     alert(bg); 
    }); 

http://plnkr.co/edit/zkeoRE?p=preview

Answer 3

我知道這是不是所有的情況下最好的正則表達式，但你明白了吧。

/* Explaining: 
/regex here/
[^\/]+ ---> will match anything before a/(https:) 
\/\/ ---> the // after https: 
[^\/]+ ---> will match anything before/(www.example.com) 
\/  ---> will match/
(.*) ---> the rest of url (that you want) 
So, you need to get the [1] index of the returned array. 
*/ 
"http://www.example.com/folder/bg.jpg".match(/[^\/]+\/\/[^\/]+\/(.*)/)[1] 

將返回： 「文件夾/ bg.jpg」