Извлечение двойных ведущих элементов стиля sh из HTML

Question

Для настольного проекта Swift я пытаюсь извлечь свойство --background-image со страницы HTML. Код фрагмента, из которого я пытаюсь извлечь:

<div class="artist-header artist-header--fixed " data-test-artist-header="" style="--background-image:url(https://example.com/image.jpeg); --background-color:#f8f8ef;">

Конечная цель - получить https://example.com/image.jpeg. Это не обязательно имеет значение для извлеченного значения. Я выполняю большую часть утомительного анализа на стороне приложения независимо (ie. --background-image:url(https://example.com/image.jpeg) -> https://example.com/image.jpeg); однако было бы неплохо получить точные значения при извлечении точного значения для производственной версии этого приложения.

Я довольно близко подошел к следующему коду, но безуспешно в течение последних 2 часов:

document.getElementsByClassName('artist-header')[0].style[0].toString()               // returns "--background-image"
document.getElementsByClassName('artist-header')[0].style.toString()                  // returns "[object CSSStyleDeclaration]"
document.getElementsByClassName('artist-header')[0].style.var(--background-image)     // returns nil
document.getElementsByClassName('artist-header')[0].style.var(--background-image).url // returns nil

(Слайд справа от кода, чтобы увидеть возвращаемые значения каждого оператора)

Любая помощь будет принята с благодарностью! Спасибо!

Answer 1

Вам нужно использовать getPropertyValue. Это даст вам всю строку:

url(https://example.com/image.jpeg)

Есть много способов, которыми вы можете удалить url() из этого.

img = document.getElementsByClassName('artist-header')[0].style.getPropertyValue('--background-image');
console.log(img.replace(/url\(([^)]*)\)/, '$1'));

<div class="artist-header artist-header--fixed " data-test-artist-header="" style="--background-image:url(https://example.com/image.jpeg); --background-color:#f8f8ef;">

Answer 2

Используйте getPropertyValue(), чтобы получить переменную background-image.
Затем, slice(), чтобы вырезать URL.
И replace(), чтобы удалить обратную косую черту.

var imageUrl = getComputedStyle(document.getElementsByClassName('artist-header')[0]).getPropertyValue('--background-image').slice(4, -1).replace(/\\/g, '');

console.log(imageUrl);

<div class="artist-header" style="--background-image:url(https://example.com/image.jpeg)"></div>