Demo
JavaScript es encantador, nos permite realizar tareas geniales y dinámicas, pero algo que le hace falta es la manipulación nativa de Strings algo que otros Lenguajes de Programación si tienen como PHP o bien podría utilizar un librería externa para hacer la manipulación de Strings, pero esto puede generar más peso a mi aplicación, a pesar de esto JavaScript cuenta con una funcionalidad que me facilita Capitalizar mis Strings y este Post te mostraré como llevar acabo esta tarea.
Te invito a leer el artículo Que es JavaScript y otros Detalles , este artículo se expone la historia, aplicaciones creadas con este Lenguaje de Programación y otros detalles más, o si no continua con este Post, no hay problema.
Ya que usaré JavaScript puro no es necesario que instale algo adicional, de hecho puedo usar la propia consola del Navegador Google Chrome.
Capitalizar un String completo
Hacer esto es muy sencillo, quizás es algo que has hecho en el trabajo diario con JavaScript. Para capitalizar un String completo invoca al método toUpperCase(), por ejemplo:
|
1 2 3 4 5 6 7 |
let miString = 'gelatina'; miString.toUpperCase(); //Devuelve GELATINA |
El método toUpperCase() convierte el String gelatina a mayúscula: GELATINA.
Incluso puedes usar palabras separadas o que tengan la primera letra capital, por ejemplo el texto: Nube Colectiva
|
1 2 3 4 5 6 7 |
miString1 = 'Nube Colectiva'; miString1.toUpperCase(); // Devuelve NUBE COLECTIVA |
Capitalizar la primera letra de un String
El caso anterior fue muy fácil, ahora veremos algo más complejo, debido a que no hay un método nativo en JavaScript para hacer la primera letra Capital de un String, debemos ser un poco creativos.
Lo que haremos es tomar la primera letra del String, ponerla en mayúscula, luego tomar el resto del String y dejarlo en minúsculas, tal como estaba.
Para esto puedo hacer uso de una expresión regular que tome la primera letra y la haga mayúscula y que retorne el String modificado, le pasamos el método replace():
|
1 2 3 4 5 6 7 |
miString = 'visita la web de nube colectiva'; miString.replace(/^\w/, (c) => c.toUpperCase()); // Devuelve Visita la web de nube colectiva |
Puedes ver que la primera letra se hizo capital, la letra V de la palabra Visita.
Hay casos en que el String puede tener un espacio al inicio, para esto podemos hacer uso del método trim() para eliminarlo
|
1 2 3 4 5 6 7 |
miString = ' visita la web de nube colectiva'; miString.trim().replace(/^\w/, (c) => c.toUpperCase()); // Devuelve Visita la web de nube colectiva |
Capitalizar todas las letras de un String
En el ejemplo anterior capitalizamos solo la primera letra del String, pero si queremos capitalizar la primera letra de todas las palabras debemos ser creativos y hacer uso de expresiones regulares y jugar con ellas.
El enfoque es algo similar al caso anterior, debemos dividir el String en palabras y cada palabra se debe escribir en Mayúscula la primera letra y luego unirlas para que hagan una oración:
|
1 2 3 4 5 6 7 |
miString = 'visita la web de nube colectiva'; miString.replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase()))); //Devuelve Visita La Web De Nube Colectiva |
Puedes ver que me devuelve todas las letras capitalizadas: Visita La Web De Nube Colectiva
Y si tu String tiene palabras mixtas (Mixed Case) o Casos mixtos, eso no es problema, JavaScript igual capitaliza todas las palabras ejecutando el siguiente código:
|
1 2 3 4 5 6 7 8 |
miString = 'visITA la WEB de NUbe coLECTIVa'; miString.trim().toLowerCase().replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase()))); //Devuelve Visita La Web De Nube Colectiva |
JavaScript convirtió el String: visITA la WEB de NUbe coLECTIVa a palabras normales con la primera letra Capitalizada: Visita La Web De Nube Colectiva.
Conclusión
Sin hacer uso de librerías o métodos adicionales hemos capitalizado los Strings o textos de nuestro código, si necesitas realizar Capitalizaciones más complejas, puede que requieras hacer uso de otros métodos adicionales de JavaScript.
Las expresiones regulares son de gran ayuda en muchas tareas que se lleven acabo en JavaScript y en la capitalización de Strings no es la excepción.
Nota(s)
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
- Los métodos y pasos mencionados en este Post, pueden dejar de existir, continuar o ser modificados, esto no depende de mi, sino de los Desarrolladores que dan Soporte a JavaScript.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenido.