Question

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

为此，JQuery＆＃39; 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

我知道这不是所有情况下最好的正则表达式，但你明白了。

/* 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]

将返回：＆＃34;文件夹/ bg.jpg＆＃34;

Answer 3

由于jQuery将返回绝对路径，因此您将永远无法确定没有字符串操作的相对路径，因为知道如何在目录层次结构中嵌套页面。我建议用Regex替换字符串。见下面的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

获取$（）。css的相对路径（＆＃34; background-image＆＃34;）

3 个答案: