Cómo contar vocales en una cadena de texto usando algoritmos de JavaScript

Introducción

La frase “Vainil JavaScript” se utiliza a menudo para describir la escritura de JavaScript sin marcos ni bibliotecas. Si bien muchos problemas modernos se pueden resolver con marcos y bibliotecas, comprender qué está disponible de forma nativa en JavaScript y cómo y cuándo puede confiar en ellos lo ayudará a convertirse en un desarrollador más sólido.

Imaginemos un escenario en el que recibimos cadenas de texto de longitud variable. Nuestro objetivo es contar la cantidad de veces que aparecen las vocales en inglés (“a”, “e”, “i”, “o” y “u”) (mayúsculas y minúsculas) en las cadenas.

JavaScriptcontiene 3 vocales. DigitalOceancontiene 6 vocales. Rhythmscontiene 0 vocales.

En este artículo, creará una solución utilizando un bucle iterativo y una segunda solución utilizando expresiones regulares.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Un navegador web moderno con una consola de desarrollador web o un entorno sandbox con una implementación REPL .
• Será beneficioso estar familiarizado con bucles , cadenas y matrices .
• Puede resultar beneficioso tener cierta familiaridad con expresiones regulares , pero no es obligatorio.

Este ejemplo utiliza for…ofy, includes()que no es compatible con los navegadores tradicionales.

Usando un bucle iterativo

En el enfoque iterativo, recorrerá cada letra de la cadena pasada y luego verificará si alguna de las letras coincide con alguna de las vocales. Si la letra coincide con los posibles valores conocidos para las vocales, incrementará una variable de contador. Una vez que se complete el bucle, puede hacer referencia a esta variable y mostrará la cantidad de vocales.

Tómese un momento para pensar en cómo desglosaría los requisitos y pasos de esta tarea.

Ahora, utilizando la consola de desarrollador web en un navegador web u otra implementación de un REPL, construyamos una solución para este problema.

Primero, definamos lo que sabes:

const vowels = ["a", "e", "i", "o", "u"]

Este código declara una constante – vowels– que contiene una matriz de las cinco vocales inglesas.

Luego, vamos a crear una función a la que se le pasa un textvalor:

const vowels = ["a", "e", "i", "o", "u"]function countVowelsIterative(text) {}

Dentro de esta función, inicializa una countervariable a 0.

const vowels = ["a", "e", "i", "o", "u"]function countVowelsIterative(text) {  let counter = 0  console.log(`The text contains ${counter} vowel(s)`)  return counter}

Este código registrará un mensaje en la consola y también returnel valor de la countervariable.

A continuación, para recorrer la cadena, puedes utilizar un for…ofbucle:

const vowels = ["a", "e", "i", "o", "u"]function countVowelsIterative(text) {  let counter = 0  for (let letter of text.toLowerCase()) {  }  console.log(`The text contains ${counter} vowel(s)`)  return counter}

Un for…ofbucle itera sobre objetos iterables : cadenas, matrices, mapas, conjuntos, etc.

Este código también convierte todos los caracteres texta minúsculas. Puede haber otras situaciones en las que sea necesario distinguir entre mayúsculas y minúsculas, pero para esta situación en particular, puedes utilizarlas toLowerCase()y evitar tener que definir también vocales en mayúsculas.

Luego, puedes usar una ifdeclaración para verificar si a lettercoincide con alguno de los siguientes vowels:

const vowels = ["a", "e", "i", "o", "u"]function countVowelsIterative(text) {  let counter = 0  for (let letter of text.toLowerCase()) {    if (vowels.includes(letter)) {    }  }  console.log(`The text contains ${counter} vowel(s)`)  return counter}

Este código utiliza el includes()método en la matriz de vowelspara determinar si la matriz incluye el seleccionado letter, devolviendo trueo false, según corresponda.

Finalmente, si la condición es true, puedes incrementar la countervariable:

const vowels = ["a", "e", "i", "o", "u"]function countVowelsIterative(text) {  let counter = 0  for (let letter of text.toLowerCase()) {    if (vowels.includes(letter)) {      counter++    }  }  console.log(`The text contains ${counter} vowel(s)`)  return counter}

Considere los posibles valores textque un usuario podría enviar y asegúrese de que su función maneje cada uno de ellos adecuadamente.

Una cadena vacía:

countVowelsIterative('')

Lo que esperas debería devolver un valor de 0:

OutputThe text contains 0 vowel(s)

Una cadena sin vocales:

countVowelsIterative('Rhythms')

Lo que esperas debería devolver un valor de 0:

OutputThe text contains 0 vowel(s)

Y una cadena con una o más vocales:

countVowelsIterative('DigitalOcean')

Lo que esperas debería devolver un valor numérico igual al número de ocurrencias de vocales en la cadena:

OutputThe text contains 6 vowel(s)

Ha logrado desarrollar una solución de bucle iterativo para contar el número de ocurrencias de vocales en inglés en una cadena de texto.

Uso de expresiones regulares

Las expresiones regulares (regex) le ayudan a encontrar patrones o combinaciones de caracteres dentro de cadenas.

Para este escenario particular, una expresión regular sería adecuada para contar el número de ocurrencias de vocales en inglés en una cadena de texto.

Las expresiones regulares están disponibles en muchos lenguajes de programación y se utilizan para resolver muchos problemas que requieren búsqueda, coincidencia y filtrado. Familiarizarse con las expresiones regulares agregará una herramienta más poderosa a sus habilidades de desarrollador.

Tómese un momento para pensar en cómo desglosaría los requisitos y pasos de esta tarea.

Ahora, utilizando la consola de desarrollador web en un navegador web u otra implementación de un REPL, construyamos una solución para este problema.

Vamos a crear una función a la que se le pasa un textvalor:

function countVowelsRegex(text) {}

En lugar de una matriz que contenga vocales, puedes utilizar una expresión regular con el patrón [aeiou]:

/[aeiou]/gi

En el caso de patrones simples, las expresiones regulares suelen definirse dentro de un par de barras diagonales ( /). Los corchetes ( [y ]) se utilizan para designar una “clase de caracteres”. La expresión regular buscará cualquier carácter que coincida con esta clase de caracteres.

Después de la barra de cierre, se utilizan las letras gy i. Una expresión regular se detendrá una vez que se cumpla la condición. Si se utiliza gpara una búsqueda global, se seguirán realizando búsquedas adicionales. Si se utiliza ipara una búsqueda que no distinga entre mayúsculas y minúsculas, se evita tener que definir también vocales en mayúscula.

Luego, aplique una expresión regular a text:

function countVowelsRegex(text) {  let matchingInstances = text.match(/[aeiou]/gi);}

Este código utiliza el match()método.

Si hay una coincidencia, se devolverán todas las instancias de esa coincidencia con la expresión regular. Si no hay ninguna coincidencia, nullse devolverá un valor.

Verifique si el matchingInstancesvalor existe y maneje ambos casos:

function countVowelsRegex(text) {  let matchingInstances = text.match(/[aeiou]/gi);  if (matchingInstances) {    console.log(`The text contains ${matchingInstances.length} vowel(s)`)    return matchingInstances.length  } else {    return 0  }}

Si matchingInstancesse evalúa como un valor verdadero (es decir, una matriz de coincidencias encontradas), se registra un mensaje con formato que muestra la cantidad de vocales, que es la misma que la lengthde la matriz. Luego, se devuelve el número.

Si matchingInstancesse evalúa como un valor falso, se devuelve 0porque significa que no se encontraron coincidencias.

Considere los posibles valores textque un usuario podría enviar y asegúrese de que su función maneje cada uno de ellos adecuadamente.

Una cadena con una o más vocales:

countVowelsRegex('DigitalOcean')

Lo que esperas debería devolver un valor numérico igual al número de ocurrencias de vocales en la cadena:

OutputThe text contains 6 vowel(s)

Ha logrado desarrollar una solución de expresión regular para contar el número de ocurrencias de vocales en inglés en una cadena de texto.

Conclusión

En este artículo, implementó con éxito dos soluciones que cuentan la cantidad de vocales en una cadena de texto en JavaScript. En este proceso de diseño de soluciones, dividió el problema en pequeños pasos y aprovechó los métodos disponibles en JavaScript.

El enfoque de bucle iterativo utilizó cadenas, matrices, for…of, toLowerCase(), if, includes(), e incremento.

El enfoque de expresión regular utilizó cadenas, matrices, match(), if…else, y length().

Elegir una solución para su proyecto requerirá considerar factores como la legibilidad y la optimización del rendimiento.

Continúe su aprendizaje explorando otros métodos disponibles para cadenas y matrices.