1

si yo tengo esta etiqueta:

<div class="ytp-cued-thumbnail-overlay-image" style="background-image: url(&quot;https://i.ytimg.com/vi/8u_c-DePcYQ/maxresdefault.jpg&quot;);"></div>

¿Como podría extraer la url del background-image con Javascript?

Se que si tengo un img con su respectivo src podria devolver la url de esta forma:

return t.content.match(/(<img.*?>)/gi)[0].match(/src=["'](.*?)["']/)[1]

¿Como podria hacer lo mismo con el background-image de la etiqueta de arriba?

1
  • Esta duda viene de que estoy realizando un feed rss de noticias, cuando la noticia contiene una imagen, la extraigo con el codigo de abajo, pero aveces la noticia no tiene una imagen y tiene un video, en ese caso lo que intento es obtener la miniatura del video. Pero no lo consigo.
    – CuadCode
    Commented el 29 nov. 2021 a las 12:05

1 respuesta 1

2

Los estilos de una etiqueta, hayas usando style o no, son añadidos como (sub)propiedades a la propiedad style del componente. La única diferencia es que en Javascript no es cómodo usar guiones (-) en los nombres de las propiedades, por lo que el nombre background-image es transformado, usando el estilo camelCase, a backgroundImage.

Esto simplifica mucho la búsqueda:

const div = document.querySelector('div');

//obtenemos la propiedad background-image
const backImg = div.style.backgroundImage;
console.log(backImg);

//buscamos la URL con una regexp, capturando la parte que nos interesa (usamos paréntesis en la regex)
const resultado =/url\("(http.*)"\)/.exec(backImg);
const grupoCapturado = resultado[1];
console.log(grupoCapturado);
<div class="ytp-cued-thumbnail-overlay-image" style="background-image: url(&quot;https://i.ytimg.com/vi/8u_c-DePcYQ/maxresdefault.jpg&quot;);"></div>

4
  • 1
    Para buscar con el guion se puede hacer div.style["background-image"]
    – Emeeus
    Commented el 29 nov. 2021 a las 11:47
  • Se podría hacer si existiera la propiedad con ese nombre, pero supongo que los diseñadores del no lo consideraron elegante. Hay una pregunta/respuesta en el que comento esa opción: es.stackoverflow.com/a/225787/22851 Commented el 29 nov. 2021 a las 11:53
  • 1
    Existe con ese nombre: console.log("background-image" in div.style) es true
    – Emeeus
    Commented el 29 nov. 2021 a las 12:06
  • Tienes razón! Es curioso que no sale en la lista Object.keys(div.style), debe tener un getter para acceder Commented el 29 nov. 2021 a las 13:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.