Как заменить Backgrund URL в классе CSS с помощью регулярных выражений (JavaScript)

Question

У меня есть HTML-строка, в которой я хочу заменить URL-адрес background-image. Но не смог этого сделать.

Этот код выглядит как html, но на самом деле это строка, содержащая html-данные.

МОЯ строка

var html ="
.reg-inner {
background-image: linear-gradient),url(http:\\abc.com);
}

  .reg-left {
            background-image: linear-gradient),url(http:\\abc.com);
            background-size: cover;           
            }
.reg-right {
background-image: linear-gradient),url(http:\\abc.com);
}"

Я хочузамените URL после .reg-left.

Я применил это регулярное выражение, но оно заменит первое.

html.replace(/url\((['"]?)(.+?)\1\)/, "url(" + replacableImage + ")");

Answer 1

Ваша HTML-строка не является HTML. Это CSS.

Ваше регулярное выражение работает . Вам нужно добавить ag, чтобы получить все из них

Также у вас не может быть новых строк в строке JS - вам нужны обратные галочки, чтобы разрешить перевод строки

const replacableImage = "abc.jpg";
let CSS =`
.reg-inner {
background-image: linear-gradient),url(http:\\abc.com);
}

  .reg-left {
            background-image: linear-gradient),url(http:\\abc.com);
            background-size: cover;           
            }
.reg-right {
background-image: linear-gradient),url(http:\\abc.com);
}`
CSS = CSS.replace(/url\((['"]?)(.+?)\1\)/g, "url(" + replacableImage + ")")
console.log(CSS)

Если вам нужен только один из них, вы можете запустить функцию замены или split + map + join

const replacableImage = "abc.jpg";
let CSS = `
.reg-inner {
background-image: linear-gradient),url(http:\\abc.com);
}

  .reg-left {
            background-image: linear-gradient),url(http:\\abc.com);
            background-size: cover;           
            }
.reg-right {
background-image: linear-gradient),url(http:\\abc.com);
}`

CSS = CSS.split('.reg-').map(
    str => str.indexOf('left') === 0 ?
    str.replace(/url\((['"]?)(.+?)\1\)/, `url("${replacableImage}")`) : str
  )
  .join('.reg-')

console.log(CSS)