Question

我一直在创作一个图片库，我一直在创造自己，我正在添加一个＆＃34;放大＆＃34;它的特色。

我知道我非常接近成功，但我只有一个小问题。在Javascript中，我设法获得将被放大的图像的背景属性，但它抓取包括url()的图像。我想只获取URL（http：... /）排除url()。

我希望这不会让人感到困惑，但如果你这样，那就是我项目的链接。单击要放大的图像，但它实际上会警告background-image属性，因为我想先查看它取出的内容。

这可能吗？

Answer 1

已更新

您可以使用正则表达式来取消url(和)，如下所示：

  var sourceimg = document.getElementById("image");
  var url = window.getComputedStyle(sourceimg, null).getPropertyValue("background-image");
  var urlWithoutUrl = url.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
  alert(urlWithoutUrl);

：）

Answer 2

最简单的解决方案是slice方法。第一个参数指定开始选择的位置，第二个参数指定从字符串结尾开始选择的结尾（如果它是否定的）。所以，你的代码应该是：

var bkImg = window.getComputedStyle(sourceimg,null).getPropertyValue("background-image");
var bkImgUrl = bkImg.slice(4, -1);

Answer 3

最好只将字符串放在url()内，而不是使用正则表达式或其他东西。

var url = "url(somefile.gif)";
var final_url = url.substr(4, url.length - 4 - 1);

参数：初始位置（从0开始，这意味着第四个字符是＆＃34; s＆＃34;）以及将创建新字符串的字符数（即，字符串的长度）原始字符串减去4 - url(填充 - 和减1 - )填充 - ）。

结果将是：

somefile.gif

在您的问题中使用它：

var url = window.getComputedStyle(sourceimg,null).getPropertyValue("background-image");
var final_url = url.substr(4, url.length - 4 - 1);
alert(final_url);

Answer 4

使用正则表达式或

位置的子串

s.IndexOf("(")) + 1;

在＆＃34; URL之后解决所有问题（＆＃34;然后修剪最后一个字符以删除＆＃34;）＆＃34;。

Answer 5

尝试

var url = $(el).css("backgroundImage").split(/\s|url\(|\)/).filter(Boolean)[0];

var url = $("body").css("backgroundImage").split(/\s|url\(|\)/).filter(Boolean)[0];
console.log(url);

body {
  width:300px;
  height:200px;
  background-image: url('http://lorempixel.com/300/200/technics/')
}

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

Answer 6

这是您需要在代码中进行的更改：

alert(window.getComputedStyle(sourceimg,null).getPropertyValue("background-image").replace(/^url\((http.+)\)$/g, '$1'));

Javascript获取元素背景图像但是消除了＆＃34; url（）＆＃34;

6 个答案: