2

Tengo un string que contiene código HTML con tags <img> en él, necesito crear un array con los src de cada img pero no puedo indicarle por números dónde cortar, pues no conozco dónde aparece el tag img ni dónde termina

<p>Hola, esto es un ejemplo<img src="./img-uploads/345753e8-bba6-d75f-3f0f-0f4d0b9bd493.jpg" style="width: 757px;">&nbsp;más texto de prueba<img src="./img-uploads/48deeb1c-a32e-cc28-76b4-e59806c7b1d5.jpg" style="width: 50px;"><br></p>

Mi idea es encontrar como inicio <img src=" y como final, el siguiente caracter en orden que sería ", pues lo que genera este código es un editor y el estilo añadido variará siempre.


Lo he solucionado de una manera un poco rara pero funciona para encontrar en cualquier string un trozo usando como índice pedazos de string que lo rodeen

Gracias a Lois6b por su ayuda, en lo que busco ahora mismo es la respuesta correcta, sin embargo, dejo el código por si alguien quiere hacer algo similar sin poder usar getElementsByTagName.

var string = '<p>Hola, esto es un ejemplo<img src="./img-uploads/345753e8-bba6-d75f-3f0f-0f4d0b9bd493.jpg" style="width: 757px;">&nbsp;más texto de prueba<img src="./img-uploads/48deeb1c-a32e-cc28-76b4-e59806c7b1d5.jpg" style="width: 50px;"><br></p>'
var resultado = [];
var ultimo = -1;
do {
    var n = string.indexOf('<img src="',ultimo+1); // img
        ultimo=n;
    var m = string.indexOf('"',ultimo+10) // comillas

    if(n!=-1)
    resultado.push(string.slice(n+10, m));  //+10 por el tamaño de <img src= 
    ultimo=n;
} while (n!=-1);

console.log(resultado);

2
  • me alegro ser de ayuda. mira mi edit para que veas la diferencia entre .src y .getAttribute("src")
    – lois6b
    el 19 ene. 2017 a las 10:49
  • Hola @JeanRodríguez. Deberías publicar tu solución como respuesta, y no como parte de la pregunta... Sin embargo, ¿por qué no podrías usar .getElementsByName?. Cualquier string se puede analizar como DOM utilizando document.implementation
    – Mariano
    el 20 ene. 2017 a las 1:31

1 respuesta 1

2

Para eso puedes usar la funcion getElementsByTagName("img"); que devuelve una colección de elementos, en este caso cuya Tag sea img.

Iteras por los elementos y para cada uno, sacas el atributo src con .getAttribute("src"); para que te saque literalmente lo que contiene ese atributo. En tu caso, sacaria la URL relativa sin incluir el http://...

Si usas .src a secas sacaría la URL completa

var elementos= document.getElementsByTagName("img");
var imagenesSRC =  new Array (elementos.length);
for(var i=0;i<elementos.length;i++){
    console.log(elementos[i].getAttribute("src"));
    imagenesSRC[i] = elementos[i].getAttribute("src");
}
<p>Hola, esto es un ejemplo<img src="./img-uploads/345753e8-bba6-d75f-3f0f-0f4d0b9bd493.jpg" style="width: 757px;">&nbsp;más texto de prueba<img src="./img-uploads/48deeb1c-a32e-cc28-76b4-e59806c7b1d5.jpg" style="width: 50px;"><br></p>

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.