Question

这是html的标签

<div class="ytp-thumbnail-overlay ytp-cued-thumbnail-overlay" data-layer="4" style="background-image: url(&quot;https://i.ytimg.com/vi_webp/VV5oVYVGfNc/sddefault.webp&quot;);">

我要做的是以下内容：

var bg = $(".ytp-cued-thumbnail-overlay").css('background-image');
bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
$("#img1").attr('src','bg');

我希望background-image属性使用jQuery进入我的#img src 我无法替换url("和");

Answer 1

不要替换字符串中所有不需要的部分，只需使用正则表达式来获取所需的部分。这样可以更有效地使用正则表达式，因为您不需要对源字符串进行任何假设，也不需要在设置属性之前进行任何其他修改。这是您需要的所有代码：

string = $(".ytp-cued-thumbnail-overlay").css('background-image');
$("#img1").attr('src', string.match(/.*url\(['|"]([^)]*)['|"]\)/i));

这是一个演示（使用相同的正则表达式，但不同的代码来更好地说明过程）：

string = $("#source").text();
$("#match").text(string.match(/.*url\(['|"]([^)]*)['|"]\)/i)[1]);

#source, #match { display:inline-block;border:1px solid #aaa;padding:10px; }
#source:before { color:#aaa;content:'source: '; }
#match:before { color:#aaa;content:'match: ';}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">url(&quot;this is your URL&quot;)</div>
&rightarrow;
<div id="match"></div>

为什么匹配优于修改字符串

与将获得css()返回值的方法相比，如果未找到匹配项，则返回null，您可以在实现中检查该匹配项。例如，如果您的背景图片值为http://www.example.com并且你砍掉前五个和后两个字符，期望它实际上说url("http://www.example.com/img.png")，那么你将获得//www.example.c，而不是SELECT TOP 1 * ........... order by ABS(datediff(second,table_timeStamp, @myTimestamp) )制作一个非常好的网址。

Answer 2

这项工作对我而言。从bg而不是'bg'替换撇号（'）

var bg = $(".ytp-cued-thumbnail-overlay").css('background-image');
bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
$("#img1").attr('src',bg);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ytp-thumbnail-overlay ytp-cued-thumbnail-overlay" data-layer="4" style="height:200px;background-image: url(&quot;https://i.ytimg.com/vi_webp/VV5oVYVGfNc/sddefault.webp&quot;);">
  
  </div>
<img id="img1">

Answer 3

如果您可以修改div使用'而不是"的HTML。改变

<div class="ytp-thumbnail-overlay ytp-cued-thumbnail-overlay" data-layer="4" style="background-image: url(&quot;https://i.ytimg.com/vi_webp/VV5oVYVGfNc/sddefault.webp&quot;);">

到

<div class="ytp-thumbnail-overlay ytp-cued-thumbnail-overlay" data-layer="4" style="background-image: url('https://i.ytimg.com/vi_webp/VV5oVYVGfNc/sddefault.webp');">

注意： bg是一个变量，不应该用引号括起来。

＆＃13;

$(function() {
  var bg = $(".ytp-cued-thumbnail-overlay").css('background-image');
  bg = bg.substring(5).slice(0, -2);
  $("#img1").attr('src', bg);
  console.log(bg);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ytp-thumbnail-overlay ytp-cued-thumbnail-overlay" data-layer="4" style="background-image: url('https://i.ytimg.com/vi_webp/VV5oVYVGfNc/sddefault.webp');">

＆＃13;

我想在jquery中获取背景图片网址。我怎样才能替换（）这段代码？

3 个答案: