[SOLUCIONADO] obtener/devolver nombre de imágenes

[Speedbit]

hola a todos... esta consulta la posteé previamente, como respuesta a una pregunta similar, pero el post era viejo y parece que ya nadie lo ve...

necesito hacer lo siguiente:
tengo un documento html, con varias imágenes y necesitaría incorporar un script, que LEA el nombre de cada una de las imágenes y las agregue al pie de cada una... sin la extensión.

o sea... tomar de cada <img src="IMAGE 01.jpg" /> sólo el "IMAGE 01" y agregarlo al pié (puede ser en otro div o celda...
es posible?? o será mucho pedir? jejejejeje

gracias de antemano, aunque sea por leer mi pregunta!!
espero alguien pueda ayudarme,

[Alexis88]

Solamente tienes que tomar a todos los elementos <img> ya sea por el nombre de la etiqueta (img) o la clase (class), lo cual generaría una lista de nodos. Luego, recorres dicha lista y en cada iteración, obtienes el valor del atributo src y lo colocas en donde desees. Para obtener el nombre sin la extensión, delimita la cadena con el método substring.

Código Javascript:

var imagenes = document.getElementsByTagName("img"),
    labels = document.getElementsByTagName("label"),
    totalImg = imagenes.length;
 
for (i = 0; i < totalImg; i++){
    var src = imagenes[i].src;
    labels[i].innerHTML = src.substring(src.lastIndexOf("/") + 1, src.lastIndexOf("."));
}
 

En este ejemplo, asigno los nombres de las imágenes a elementos <label> que coloco justo debajo de cada imagen. Como la ruta de la imagen contiene barras inclinadas y como solo quiero tomar solamente el nombre, tomo el fragmento de la ruta que va desde una posición adelante de la última barra inclinada hasta antes del punto correspondiente a la extensión, para lo cual utilizo el método lastIndexOf.



Saludos

[Speedbit]

Sr. Alexis88... MONSTRUOSO LO SUYO!! y con qué simplicidad lo explicás! jajajaaaa
I-M-P-E-C-A-B-L-E!!

ahora se me presenta un problema... y es que la mayoría de las imágenes (por no decir todas) tienen ESPACIOS en sus nombres (ej: IMAGE 01.jpg) y el script me devuelve un "%20" por cada espacio que encuentra en el nombre...
es posible resolver esto, de manera que se visualice el nombre de la imagen con el espacio, como corresponde y tal cual está archivada?

no me voy a ir sin agradecerte MUCHO!!
y espero puedas ayudarme con este detalle con el que me he encontrado...

[Alexis88]

Cambia la línea en donde asigno el contenido a cada <label> por esta:

Código Javascript:

labels[i].innerHTML = src.substring(src.lastIndexOf("/") + 1, src.lastIndexOf(".")).replace(/%20/g, " ");
 

Con el método replace, reemplazo todos los "%20" que hayan por espacios.

Saludos

[Speedbit]

bueno... qué puedo decir?? qué más puedo pedir? jajjajaaaa
sos GROSSO, pero de verdad!

muchísimas gracias!! resolviste todos mis problemas y con una precisión impecable!
ya volveré pronto por aquí, a molestar con mis dudas!

MUCHAS GRACIAS!! =)

[Alexis88]

Como consejo final, sería mejor que a los elementos <img> y <label> que desees afectar, les asignes una clase (atributo class), para que el código que te mostré, no afecte a elementos <img> y <label> que no tengan nada que ver con este proceso. Lo único que cambiaría sería la forma de tomar a los elementos, en lugar del método getElementsByTagName, utilizarías el método getElementsByClassName, mientras que entre los paréntesis y comillas, iría el nombre de la clase.

No olvides marcar el tema como solucionado para que aquellos usuarios que tienen el mismo problema que tuviste al inicio, sepan que aquí pueden encontrar una solución.

Saludos

[Speedbit]

buenísimo Alexis88!! tendré en cuenta tus acertadas sugerencias!
MUCHÍSIMAS GRACIAS!