Remover vocales de un String con JavaScript

Jordi Ayala - Mar 20 '23 - - Dev Community

En este post vamos a ver cómo remover todas las vocales de un String con JavaScript. Para ello vamos a usar la función replace() de JavaScript.

La idea es que dado un String, queremos obtener otro String que no incluya las letras a, e, i, o y u.

Remover vocales

Consideremos el siguiente String:

let frase = "Esto es una oración con todas las vocales";
Enter fullscreen mode Exit fullscreen mode

Para remover todas las vocales es necesario utilizar el método replace() y una expresión regular que nos permita encontrar todas las vocales.

let fraseSinVocales = frase.replace(/[aeiou]/gi, '');
Enter fullscreen mode Exit fullscreen mode

De esta manera obtenemos el siguiente resultado:

console.log(fraseSinVocales);

// st s n rcón cn tds ls vcls
Enter fullscreen mode Exit fullscreen mode

Pero, ¿Qué pasa con las vocales acentuadas? Para removerlas es necesario modificar la expresión regular, y de paso incluir las vocales en mayúsculas.

let fraseSinVocales = frase.replace(/[aáAÁeéEÉiíIÍoOóÓuúÚ]/gi, '');

console.log(fraseSinVocales);

// st s n rcn cn tds ls vcls
Enter fullscreen mode Exit fullscreen mode

Listo, de esta manera se pueden remover todas las vocales de un String con JavaScript utilizando pocas líneas de código.

Explicación

En primer lugar se utiliza el método replace() que recibe como primer parámetro una expresión regular. Por ejemplo se puede reemplazar la letra a por una cadena vacía de la siguiente manera:

let frase = "Esto es una oración con todas las vocales";

let fraseSinLetraA = frase.replace("a", "");

console.log(fraseSinLetraA);

// Esto es un oración con todas las vocales
Enter fullscreen mode Exit fullscreen mode

Como se puede ver, solo se reemplazó la primera letra a que encontró. En este punto es donde toma mayor importancia el uso de una expresión regular.

  • Se inicia envolviendo la expresión entre barras invertidas / /.
  • Después se abren corchetes [ ] para indicar que se va a buscar una lista de caracteres.
  • La ultima parte es utilizar la bandera gi que significa global ignore y hace referencia a que se debe buscar en todo el String y no solo en la primera coincidencia, así como que la busqueda no distinga entre mayúsculas y minúsculas.

Y de esta manera se obtiene el resultado deseado.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .