Cómo titular una frase en JavaScript

¿Recuerda en la escuela primaria cuando sus maestros le mostraron cómo escribir correctamente un artículo? Lo primero con lo que comienzas es un buen título, y todo buen título está correctamente escrito en mayúscula.

Durante este desafío de creación de scripts de algoritmos, aprenderemos a poner un título en una oración en JavaScript. En última instancia, vamos a hacer que nuestro algoritmo tome una oración y escriba en mayúscula la primera letra de cada palabra como si fuera el título de un artículo.

Instrucciones de algoritmo

Devuelve la cadena proporcionada con la primera letra de cada palabra en mayúscula. Asegúrese de que el resto de la palabra esté en minúsculas. Para el propósito de este ejercicio, también debe usar mayúsculas para conectar palabras como “el” y “de”.

Casos de prueba proporcionados

  • titleCase("I'm a little tea pot")debería devolver una cadena.
  • titleCase("I'm a little tea pot")debería volver I'm A Little Tea Pot.
  • titleCase("sHoRt AnD sToUt")debería volver Short And Stout.
  • titleCase("HERE IS MY HANDLE HERE IS MY SPOUT")debería volver Here Is My Handle Here Is My Spout.

Solución # 1: .map () y .slice ()

PEDAC

Comprender el problema : tenemos una entrada, una cadena. Nuestra salida también es una cadena. En última instancia, queremos devolver la cadena de entrada con la primera letra, y solo la primera letra, de cada palabra en mayúscula.

Ejemplos / Casos de prueba : Nuestros casos de prueba proporcionados muestran que deberíamos tener una letra en mayúscula solo al principio de cada palabra. Necesitamos minúsculas el resto. Los casos de prueba proporcionados también muestran que no nos están lanzando bolas curvas en términos de palabras compuestas extrañas separadas por símbolos en lugar de espacios en blanco. ¡Esas son buenas noticias para nosotros!

Estructura de datos : tendremos que transformar nuestra cadena de entrada en una matriz para manipular cada palabra por separado.

Un par de notas sobre los métodos que usaremos:

Hablemos de .map():

.map() crea una nueva matriz con los resultados de llamar a una función en cada elemento de la matriz.

En otras palabras, .map()nos permite manipular cada elemento en una matriz con una función, luego devolver una nueva matriz con los resultados de nuestra manipulación. La función puede apuntar tanto al currentValue como al índice de ese currentValue, así:

array.map((currentValue, Index) => { // manipulate the currentValue in some way})

No siempre tenemos que usar el índice. Sin embargo, habrá ocasiones en las que necesitemos apuntar a elementos de una matriz por su índice, por lo que es útil tenerlo en cuenta.

Ahora veamos un ejemplo de .map()en acción. Tenemos una matriz llena de números y queremos multiplicar cada número por 2.

let arrayOfNumbers = [3, 6, 10, 42, 98]arrayOfNumbers.map(number => number * 2)// returns [6, 12, 20, 84, 196]

Ahora investiguemos .slice():

.slice()extrae una sección de una cadena y la devuelve como una nueva cadena. Si invoca .slice()una cadena sin pasarle información adicional, devolverá la cadena completa.

"Bastian".slice()// returns "Bastian"

Tenemos la opción de pasar .slice()un beginIndex y endIndex, así

.slice(beginIndex, endIndex)

Esto le indica .slice()dónde comenzar el corte y dónde terminar el corte. Tenga en cuenta que las cadenas tienen un índice cero. Entonces, si quisiéramos volver de la letra de 2 índices de "Bastian" hasta pero sin incluir la letra de 5 índices de "Bastian", podríamos hacer esto:

"Bastian".slice(2, 5)// returns "sti"

Con eso en mente, podemos cortar el comienzo de las palabras y devolver el resto pasando solo un beginIndex, así:

"Bastian".slice(3)// returns "tian"

Algoritmo :

  1. Convierte todas las letras en strminúsculas.
  2. Divida la minúscula stren una matriz, con cada palabra como un elemento separado en la matriz.
  3. Escriba en mayúscula la primera letra de cada elemento de la matriz.
  4. Une cada elemento de la matriz en una cadena, separando cada palabra con un espacio en blanco.
  5. Devuelve la cadena en mayúscula del título.

Código : ¡Ver abajo!

Creé muchas variables locales innecesarias en el código anterior para mostrar el efecto de cada método en la entrada. A continuación, eliminé las variables locales, encadené todos los métodos y eliminé los comentarios.

Solución # 2: regex

¡Advertencia! Regex no es la mejor solución para principiantes. Las expresiones regulares son difíciles por derecho propio, y su complejidad es una queja común para muchos desarrolladores experimentados. Pero bueno, me siento aventurero mientras escribo esto, y me encanta desafiarme a mí mismo para comprender mejor las expresiones regulares siempre que puedo. Este desafío de scripting de algoritmos en realidad se presta bien a las expresiones regulares, así que echémosle un vistazo y veamos si podemos mejorar nuestra comprensión de las expresiones regulares.

PEDAC

Comprender el problema : tenemos una entrada, una cadena. Nuestra salida también es una cadena. En última instancia, queremos devolver la cadena de entrada con la primera letra, y solo la primera letra, de cada palabra en mayúscula.

Ejemplos / Casos de prueba : Nuestros casos de prueba proporcionados muestran que deberíamos tener una letra en mayúscula solo al principio de cada palabra. Necesitamos minúsculas el resto. Los casos de prueba proporcionados también muestran que no nos están lanzando bolas curvas en términos de palabras compuestas extrañas separadas por símbolos en lugar de espacios en blanco. ¡Esas son buenas noticias para nosotros!

Estructura de datos : no transformaremos nuestra cadena en una matriz mientras usamos expresiones regulares. JavaScript tiene un método ingenioso .replace()que nos permite apuntar a prácticamente cualquier cosa que queramos en una cadena y reemplazarla con otra cosa. Usamos expresiones regulares para apuntar a lo que queremos reemplazar.

Hay tantos símbolos utilizados en expresiones regulares que no puedo esperar dar una descripción general amplia de ellos aquí. Sin embargo, puedo señalarle esta hoja de referencia, que uso cada vez que tengo que emplear expresiones regulares.

Lo que puedo hacer es decirle que la expresión regular con .replace()JavaScript sigue un patrón básico. .replace()toma dos argumentos: un patrón (generalmente una expresión regular) y un reemplazo (podría ser una cadena o una función).

string.replace(regex, function)

En nuestra solución, reemplazaremos la letra al principio de cada palabra. ¿Cómo conseguimos que regex haga esto por nosotros? Decimos .replace()que coincida con cualquier carácter que siga un espacio en blanco o que coincida con el primer carácter de toda la cadena (porque la primera palabra de la cadena no tiene un espacio en blanco antes).

Analicemos la parte de expresiones regulares de nuestra solución. Para hacer eso, veamos el primer argumento de la .replace()función. Este es el código de expresiones regulares que determina qué patrón buscamos para hacer coincidir y reemplazar.

// full solution:
function titleCase(str)  return str.toLowerCase().replace(/(^

En última instancia, queremos encontrar todos los caracteres que no sean espacios en blanco, que están representados por \S.

Luego queremos especificar que queremos hacer coincidir esos caracteres que no son espacios en blanco al comienzo de una cadena ^o |después de cualquier carácter de espacio en blanco \s.

Agregamos el modificador global gpara buscar y reemplazar todos esos patrones en toda la cadena.

Algoritmo :

  1. Convierte todas las letras en strminúsculas.
  2. Reemplace la primera letra de cada palabra en la cadena con la letra en mayúscula.
  3. Devuelve la cadena en mayúscula del título.

Código : ¡Ver abajo!

Si tiene otras soluciones y / o sugerencias, ¡comparta los comentarios!

Este artículo es parte de la serie FreeCodeCamp Algorithm Scripting.

Este artículo hace referencia a FreeCodeCamp Basic Algorithm Scripting: Título de caso una oración

¡Puedes seguirme en Medium, LinkedIn y GitHub!