0

here is the tag from 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;);">

what I'm trying to do is the following:

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

I want the background-image attribute to go into my #img src using jQuery I can't replace the url(&quot; and the &quot;);

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339

3 Answers3

1

Instead of replacing all unwanted parts of a string, just use the regex to fetch the part you need. This uses regex much more effectively, as you don't need to make any assumptions on the source string, or make any other modifications before you set the attribute. This is all the code you need:

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

And here's a demonstration (using the same regex, but different code to better illustrate the process):

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>

Why matching is superior to modifying the string

In comparison to methods that will get whatever value css() returns, this will return null if no match was found, which you can check for in your implementation. For example, if your background-image value is http://www.example.com and you chop the first five and last two characters, expecting it to actually say url("http://www.example.com/img.png"), you will get //www.example.c, which doesn't make for a very nice URL.

TheThirdMan
  • 1,482
  • 1
  • 14
  • 27
  • thanks for the info! but I can't change the &qout to ' because its from a api that I can't modify (way back-end...) – Hyun Joong Kim Aug 05 '16 at 01:51
  • and this error occurs (index):124 Uncaught TypeError: Cannot read property 'match' of undefined – Hyun Joong Kim Aug 05 '16 at 02:14
  • This gives me undefined in my console --->>>String($(".ytp-thumbnail-overlay").css('background-image')) "undefined" – Hyun Joong Kim Aug 05 '16 at 02:24
  • @HyunJoongKim: As you can see in my answer, this works if you use `"` - this is because at the time jQuery does it's magic, it will already see html special characters as the character they represent. It also works without throwing an error, so either other scripts must be interfering with it or you copied the in the snippet instead of the one from the code block above. Either way, your error means that `$(".ytp-cued-thumbnail-overlay").css('background-image')` is undefined, meaning you have no such element - this was in your original example, so I can't help you without more info... – TheThirdMan Aug 05 '16 at 07:39
0

this work for me. replace the apostrophe(') from bg not '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">
user3227295
  • 2,168
  • 1
  • 11
  • 17
  • This will fix the problem with the original script, but also inherits the same problems - please see my answer for a solution that uses regex more effectively. – TheThirdMan Aug 04 '16 at 14:10
  • thanks for the help, but an error occurs. (index):124 Uncaught TypeError: Cannot read property 'replace' of undefined – Hyun Joong Kim Aug 05 '16 at 02:12
  • This gives me undefined in my console --->>>String($(".ytp-thumbnail-overlay").css('background-image')) "undefined" – Hyun Joong Kim Aug 05 '16 at 02:24
0

If you can edit the HTML of div use ' instead of &quot;. Change

<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;);">

to

<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');">

Note: bg is a variable and should not be enclosed in quotes.

$(function() {
  var bg = $(".ytp-cued-thumbnail-overlay").css('background-image');
  bg = bg.substring(5).slice(0, -2);
  $("#img1").attr('src', bg);
  console.log(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="background-image: url('https://i.ytimg.com/vi_webp/VV5oVYVGfNc/sddefault.webp');">
Pugazh
  • 9,453
  • 5
  • 33
  • 54