Búsqueda de sitios web

¿Cómo obtener el nombre del archivo a partir de una ruta completa usando JavaScript?

¿Hay alguna manera de que pueda obtener el último valor (basado en el símbolo '\') de una ruta completa?

Ejemplo :

C:\Documents and Settings\img\recycled log.jpg

Con este caso, solo quiero obtener recycled log.jpg de la ruta completa en JavaScript.

Respuesta #1

var filename = fullPath.replace(/^.*[\\/]/, '')

Esto manejará tanto/como\en las rutas.

Respuesta #2

Solo por el bien del rendimiento, probé todas las respuestas dadas aquí:

var substringTest = function (str) {
    return str.substring(str.lastIndexOf('/')+1);
}

var replaceTest = function (str) {
    return str.replace(/^.*(\\|\/|\:)/, '');
}

var execTest = function (str) {
    return /([^\\]+)$/.exec(str)[1];
}

var splitTest = function (str) {
    return str.split('\\').pop().split('/').pop();
}

substringTest took   0.09508600000000023ms
replaceTest   took   0.049203000000000004ms
execTest      took   0.04859899999999939ms
splitTest     took   0.02505500000000005ms

Y el ganador es la respuesta de estilo Split and Pop, ¡gracias a bobince!

Respuesta #3

En Node.js, para obtener solo el nombre base, puedes usar la función basename del módulo Path:

var path = require('path');
var file = '/home/user/dir/file.txt';
var name = path.basename(file)

Si estás haciendo más cosas con el archivo, es posible que quieras usar la función parse de Path:

var details = path.parse(file);
//=> { root: '/', dir: '/home/user/dir', base: 'file.txt', ext: '.txt', name: 'file' }
var name = details.base
//=> 'file.txt'

Respuesta #4

¿De qué plataforma proviene la ruta? Las rutas de Windows son diferentes de las rutas POSIX, diferentes de las rutas de Mac OS 9, diferentes de las rutas de RISC OS, diferentes...

Si es una aplicación web donde el nombre del archivo puede provenir de diferentes plataformas, no hay una única solución. Sin embargo, un intento razonable es usar tanto '\' (Windows) como '/' (Linux/Unix/Mac y también una alternativa en Windows) como separadores de ruta. Aquí hay una versión sin RegExp para mayor diversión:

var leafname= pathname.split('\\').pop().split('/').pop();

Respuesta #5

Ates, tu solución no protege contra una cadena vacía como entrada. En ese caso, falla con TypeError: /([^(\\|\/|\:)]+)$/.exec(fullPath) no tiene propiedades.

bobince, aquí hay una versión de nickf que maneja los separadores de rutas DOS, POSIX y HFS (y cadenas vacías):

return fullPath.replace(/^.*(\\|\/|\:)/, '');

Respuesta #6

La siguiente línea de código JavaScript te dará el nombre del archivo.

var z = location.pathname.substring(location.pathname.lastIndexOf('/')+1);
alert(z);

Respuesta #7

En Node.js, puedes usar el método path.basename

const path = require('path');
const file = '/home/user/dir/file.txt';

const filename = path.basename(file);
//=> 'file.txt'

Respuesta #8

Otro más

var filename = fullPath.split(/["/]/).pop();

Aquí split tiene una expresión regular con una clase de caracteres
Los dos caracteres deben ser escapados con '\'

O usar un array para dividir

var filename = fullPath.split(['/','\\']).pop();

Sería la manera de agregar dinámicamente más separadores en un array, si es necesario.
Si fullPath se establece explícitamente mediante una cadena en tu código, ¡necesita escapar la barra invertida!
Como "C:\\Documents and Settings\\img\\recycled log.jpg"

Respuesta #9

No es necesario manejar las barras invertidas de manera especial; la mayoría de las respuestas no manejan los parámetros de búsqueda.

El enfoque moderno es simplemente usar la API URL y obtener la propiedad pathname. La API normaliza las barras invertidas a barras normales. Ten en cuenta que location (en un entorno de navegador) también funciona, pero solo para la URL actual, no para una URL arbitraria.

Para analizar el %20 resultante como un espacio, simplemente pásalo a decodeURIComponent.

const getFileName = (fileName) => new URL(fileName).pathname.split("/").pop();

// URLs need to have the scheme portion, e.g. `file://` or `https://`.
console.log(getFileName("file://C:\\Documents and Settings\\img\\recycled log.jpg")); // "recycled%20log.jpg"
console.log(decodeURIComponent(getFileName("file://C:\\Documents and Settings\\img\\recycled log.jpg"))); // "recycled log.jpg"
console.log(getFileName("https://example.com:443/path/to/file.png?size=480")); // "file.png"
.as-console-wrapper { max-height: 100% !important; top: 0; }

Agrega un .filter(Boolean) antes del .pop() si siempre quieres la última parte no vacía de la ruta (por ejemplo, file.png de https://example.com/file.png/).

Si solo tienes una URL relativa pero aún quieres simplemente obtener el nombre del archivo, usa el segundo argumento del constructor URL para pasar un origen base. "https://example.com" es suficiente: new URL(fileName, "https://example.com"). También es posible anteponer "https://" a tu fileName, el constructor URL acepta https://path/to/file.ext como una URL válida.

Respuesta #10

No más conciso que la respuesta de nickf, pero este directamente "extrae" la respuesta en lugar de reemplazar partes no deseadas con una cadena vacía:

var filename = /([^\\]+)$/.exec(fullPath)[1];

Artículos relacionados