¿Cómo obtener el nombre del archivo de la ruta completa usando JavaScript?

Dado un nombre de archivo que también contiene la ruta del archivo, la tarea es obtener el nombre del archivo de la ruta completa. Hay algunos métodos para resolver este problema que se enumeran a continuación:

  • Método replace(): este método busca en una string un valor definido, o una expresión regular, y devuelve una nueva string con el valor definido reemplazado.

    Sintaxis:

    string.replace(searchVal, newvalue)

    Parámetros: este método acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:

    • searchVal: este parámetro es obligatorio. Especifica el valor, o expresión regular, que se va a reemplazar por el nuevo valor.
    • valor nuevo: este parámetro es obligatorio. Especifica el valor a ser reemplazado con el valor de búsqueda.

    Valor de retorno: Devuelve una nueva string donde los valores definidos han sido reemplazados por el nuevo valor.

  • Método split(): este método se usa para dividir una string en una array de substrings y devuelve la nueva array.

    Sintaxis:

    string.split(separator, limit)

    Parámetros: este método acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:

    • separador: este parámetro es opcional. Especifica el carácter, o la expresión regular, que se usará para dividir la string. Si no se usa, se devolverá la string completa (una array con un solo elemento).
    • límite: este parámetro es opcional. Especifica el número entero que especifica el número de divisiones, los elementos más allá del límite de división se excluirán de la array.

    Valor devuelto: Devuelve un nuevo Array, con los elementos divididos.

  • Método JavaScript Array pop(): este método elimina el último elemento de una array y devuelve el elemento eliminado.

    Sintaxis:

    array.pop()

    Valor devuelto: Devuelve cualquier tipo, que representa el elemento de array eliminado. Este elemento puede ser una string, un número, una array, un valor booleano o cualquier otro tipo de objeto permitido en una array.

Ejemplo 1: este ejemplo obtiene el nombre del archivo con la ayuda de la expresión regular usando el método replace() .

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            How to get the file name from a
            full path using JavaScript
        </title>
    </head> 
      
    <body style = "text-align:center;"> 
          
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" style =
            "font-size: 15px; font-weight: bold;">
        </p>
          
        <button onclick = "gfg_Run()"> 
            get File Name
        </button>
          
        <p id = "GFG_DOWN" style = 
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            var path = "Path = " +
                    "C:\\Documents\\folder\\img\\GFG.jpg";
              
            el_up.innerHTML = path;
          
            function gfg_Run() {
                el_down.innerHTML = path.replace(/^.*[\\\/]/, '');
            }         
        </script> 
    </body> 
</html>

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Ejemplo 2: este ejemplo obtiene el nombre del archivo con la ayuda de los métodos split() y pop() repetidos .

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            How to get the file name from a
            full path using JavaScript
        </title>
    </head> 
      
    <body style = "text-align:center;"> 
          
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" style = 
            "font-size: 15px; font-weight: bold;">
        </p>
          
        <button onclick = "gfg_Run()"> 
            get File Name
        </button>
          
        <p id = "GFG_DOWN" style =
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            var path = "Path = " + 
                    "C:\\Documents\\folder\\img\\GFG.jpg";
            el_up.innerHTML = path;
          
            function gfg_Run() {
                el_down.innerHTML
                    = path.split('\\').pop().split('/').pop();
            }         
        </script> 
    </body> 
</html>                    

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *