javascript - 我想在 jquery 中获取背景图片 url。我如何替换()此代码？

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 并且您将前五个字符和最后两个字符 chop ，期望它实际上是说 url("http://www.example.com/img.png")，你会得到 //www.example.c，这不是一个很好的 URL。