Manipulación de cadenas en formato título

JavaScriptJavaScriptBeginner
Practicar Ahora

This tutorial is from open-source community. Access the source code

💡 Este tutorial está traducido por IA desde la versión en inglés. Para ver la versión original, puedes hacer clic aquí

Introducción

En este laboratorio, exploraremos cómo convertir una cadena de texto a formato título usando JavaScript. Utilizaremos expresiones regulares para dividir la cadena en palabras y luego capitalizar la primera letra de cada palabra. Al final de este laboratorio, tendrás una mejor comprensión de cómo manipular cadenas de texto en JavaScript y aplicar esta técnica para formatear texto en tus aplicaciones web.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28663{{"Manipulación de cadenas en formato título"}} javascript/data_types -.-> lab-28663{{"Manipulación de cadenas en formato título"}} javascript/arith_ops -.-> lab-28663{{"Manipulación de cadenas en formato título"}} javascript/comp_ops -.-> lab-28663{{"Manipulación de cadenas en formato título"}} javascript/higher_funcs -.-> lab-28663{{"Manipulación de cadenas en formato título"}} end

Función para convertir una cadena a formato título

Para convertir una cadena dada a formato título, utiliza la siguiente función. Utiliza String.prototype.match() para dividir la cadena en palabras utilizando una expresión regular adecuada. Luego las combina utilizando Array.prototype.map(), Array.prototype.slice(), Array.prototype.join() y String.prototype.toUpperCase(). Esto capitaliza la primera letra de cada palabra y agrega un espacio en blanco entre ellas.

const toTitleCase = (str) =>
  str
    .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(" ");

A continuación, se presentan algunos ejemplos de cómo utilizar la función:

toTitleCase("some_database_field_name"); // 'Some Database Field Name'
toTitleCase("Some label that needs to be title-cased");
// 'Some Label That Needs To Be Title Cased'
toTitleCase("some-package-name"); // 'Some Package Name'
toTitleCase("some-mixed_string with spaces_underscores-and-hyphens");
// 'Some Mixed String With Spaces Underscores And Hyphens'

Resumen

¡Felicitaciones! Has completado el laboratorio de convertir una cadena a formato título. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.