¿Cómo recortar una extensión de archivo de una string usando JavaScript?

Dado un nombre de archivo en formato de string, la tarea es recortar la extensión del archivo de la string usando JavaScript.

  • 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:

    • searchVal: Es un parámetro requerido. Especifica el valor o expresión regular que se va a reemplazar por el nuevo valor.
    • newvalue: Es un parámetro requerido. 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:

    • separador: Es un parámetro 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: Es un parámetro opcional. Especifica el número entero que especifica el número de elementos divididos más allá del límite de división que se excluirán de la array.

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

  • Método JavaScript String slice(): este método obtiene partes de una string y devuelve las partes extraídas en una nueva string. Los parámetros de inicio y finalización se utilizan para especificar la parte de la string que se va a extraer. El primer carácter comienza en la posición 0, el segundo tiene la posición 1 y así sucesivamente.

    Sintaxis:

    string.slice(start, end)
    

    Parámetros:

    • start: Es un parámetro requerido. Especifica la posición desde donde iniciar la extracción. El primer carácter comienza desde la posición 0.
    • final: Es un parámetro opcional. Especifica la posición (excluyéndola) donde detener la extracción. Si no se usa, slice() selecciona todos los caracteres desde la posición inicial hasta el final.

    Valor de retorno: Devuelve una string, que representa la parte extraída de la string.

  • Método JavaScript Array join(): este método agrega los elementos de una array en una string y devuelve la string. Los elementos estarán separados por un separador pasado. El separador predeterminado es la coma (, ).

    Sintaxis:

    array.join(separator)
    

    Parámetros: este método acepta un separador de parámetro único, que es opcional. Especifica el separador a utilizar. Si no se utiliza, los elementos se separan con una coma.

    Valor de retorno: Devuelve una string, que denota los valores de la array, separados por el separador definido.

Ejemplo 1: este ejemplo obtiene el nombre del archivo mediante los métodos split(), slice() y join() .

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            Trim a file extension from a
            string 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()"> 
            click here
        </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 fName = "fileName.jpg";
            el_up.innerHTML = "String = '"+fName + "'";
          
            function gfg_Run() {
                el_down.innerHTML = fName.split('.').slice(0, -1).join('.');
            }         
        </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 usando RegExp junto con el método replace() .

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>
            Trim a file extension from a
            string 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()"> 
            click here
        </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 fName = "fileName.jpg";
            el_up.innerHTML = "String = '" + fName + "'";
          
            function gfg_Run() {
                el_down.innerHTML =fName.replace(/\.[^/.]+$/, "")
            }         
        </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 *