javascript - 使用 JavaScript 模板文字输出 CSS 中背景属性的值

Question

我知道密码是 jQuery , 但我特别想结合 Javascript Template literals使用字符串作为 background CSS property 的值.

var bg=$("#hp-row1-1 > div.fp-bg").css('background-image').split('), url(');
if(bg.length==2) {
  bg2 = `<div style="background: url(${bg[1].replace(/\s+/g, '/')}"></div>`;
  console.log(bg2);
  $("#hp-row1-1 > div.fp-bg").attr('style', 'background: ' + bg[0] + ') no-repeat center top !important;');
  $(bg2).insertAfter("#hp-row1-1");
};
<div style="background: url("http://www.davidnguyen.us/sinfulcolors.com/blog/wp-content/uploads/2019/02/HOME_Nudes_M_414x500.jpg")"></div>

如何删除包裹 url 的引号:

url("xxxxxx image xxxxxx")

就是这样:

url(xxxxxx image xxxxxx)

提前致谢!

更新根据 Hemant 的建议尝试了以下内容。

var bg=$("#hp-row1-1 > div.fp-bg").css('background-image').split('), url(');
if(bg.length==2) { 
bg2 = `<div style="width:500px; height: 500px; background: url(${bg[1].replace(/\s+/g, '/')}"></div>`;
console.log(bg2);
bg[0] = bg[0].replace(/"([^"]+(?="))"/g, '$1');
console.log(bg[0])
  $("#hp-row1-1 > div.fp-bg").css({
    "background": `url(${bg[0]}) no-repeat center top !important;`});
  $(bg2).insertAfter("#hp-row1-1");
};

    <div style="background: url("http://www.davidnguyen.us/sinfulcolors.com/blog/wp-content/uploads/2019/02/HOME_Nudes_M_414x500.jpg")"></div>

想通了:

bg[0] = bg[0].replace(/"([^"]+(?="))"/g, '$1');

将去除 url("path/to/image") 中的引号；

但仍然得到:

<div style="width:500px; height: 500px; background: url("http://www.davidnguyen.us/sinfulcolors.com/blog/wp-content/uploads/2019/02/HOME_Nudes_M_414x500.jpg")"></div>

Answer 1

假设 imgPath 是一个带有背景 url 的变量，你可以这样做

const bg = `<div style="background: url(${imgPath})"></div>`;

或在 jQuery 中

$("#bg").css({
  "background":`url( ${imgPath} )`
})