Converter cada primeira letra de cada palavra em maiúscula

Neste artigo você vai aprender como converter cada primeira letra de cada palavra em maiúscula com JavaScript puro, de maneira fácil

Resposta rápida: pra converter a primeira letra de cada palavra em maiúscula com JavaScript, jogue a string toda pra caixa baixa e use replace com uma expressão regular que pegue a letra inicial de cada palavra:

function capitalizeFirst(str) {
return str.toLowerCase().replace(/(?:^|\s)\S/g, (a) => a.toUpperCase())
}

capitalizeFirst("TESTANDO OUTRA STRING") // "Testando Outra String"

O toLowerCase() vem antes de propósito: sem ele, uma string em caixa alta continuaria em caixa alta

Se a mudança for só visual, na tela, dá pra resolver sem JavaScript nenhum: a propriedade CSS text-transform: capitalize coloca a primeira letra de cada palavra em maiúscula e deixa as demais letras inalteradas

A diferença importa: o CSS muda a exibição, o JavaScript muda o valor da string

Veja o conteúdo em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre como converter a primeira letra de uma string!

Para resolver este problema, vamos converter toda a string para caixa baixa, ou seja lower case

Depois vamos identificar a primeira letra de cada palavra, através de uma expressão regular

E substituir esta letra, por uma letra maiúscula

Veja o código:

var texto = "testando uma string";
var texto2 = "TESTANDO OUTRA STRING";
function capitalizeFirst(str) {
  var subst = str.toLowerCase().replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
  return subst;
}
console.log(capitalizeFirst(texto)); // "Testando Uma String"
console.log(capitalizeFirst(texto2)); // "Testando Outra String"

Veja que qualquer string é possível, seja ela formada apenas de letras maiúsculas ou minúsculas

Como também se estivessem embaralhadas

Então desta forma conseguimos retornar a frase com apenas a primeira letra em maiúsculo com JavaScript

Vale ressaltar que as regex nos ajudam demais em manipulação de string, segue um artigo também para validação de e-mail com expressão regular, recomendo muito a leitura

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Conclusão

Neste artigo vimos como converter cada primeira letra de cada palavra em maiúscula com JavaScript puro

Utilizamos uma função que transformar toda a string em lower case

Depois por meio de uma regex, filtramos a primeira letra e mudamos ela para maiúscula

Desta maneira temos a string retornada só com a primeira letra de cada palavra em caixa alta

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

E quando tem hífen, parêntese ou acento?

A regex que a gente usou procura a primeira letra depois de um espaço (ou no início da string)

Então ela dá conta muito bem do caso comum, mas tem situação que ela deixa passar

Repara:

capitalizeFirst("maria-clara (uma amiga)") // "Maria-clara (uma Amiga)"

O que aconteceu? o \S pegou o ( como se fosse a letra inicial, e o ( em maiúsculo continua sendo (

O mesmo vale pro que vem depois do hífen

Se tu precisa tratar isso, dá pra trocar a busca de "não espaço" por "letra de verdade", usando os escapes de propriedade Unicode do regex:

function capitalizeLetras(str) {
return str
.toLowerCase()
}

capitalizeLetras("maria-clara (uma amiga)") // "Maria-Clara (Uma Amiga)"

Tome cuidado com um detalhe aqui: os escapes \p{...} e \P{...} só funcionam com o modo unicode ligado, ou seja, a flag u (ou v) é obrigatória

Esqueceu o u no fim da regex? erro na hora

Esse recurso entrou na linguagem no ES2018, beleza?

Dá pra resolver só com CSS?

Dá, e às vezes é o certo

Se a mudança é só pra aparecer bonito na tela, tu não precisa mexer no valor da string:

.titulo {
text-transform: capitalize;
}

A propriedade text-transform com o valor capitalize coloca a primeira letra de cada palavra em maiúscula e deixa as demais letras inalteradas

Se liga nisso, porque é o pulo do gato: ele NÃO força o resto pra minúscula

Texto todo em caixa alta continua todo em caixa alta

É exatamente por isso que o nosso JavaScript passa a string pelo toLowerCase() antes do replace

Outro ponto importante: o CSS não faz title case de verdade, ele não pula artigo nem preposição, e a própria MDN orienta que autores não esperem title casing vindo do CSS

E o comportamento é sensível ao idioma declarado no documento: línguas túrquicas têm dois tipos de i, o ß do alemão vira SS em maiúscula, e o dígrafo ij do holandês vira IJ mesmo com capitalize

Curiosidade de bastidor: esse valor era subespecificado no CSS 1 e no CSS 2.1, cada navegador decidia por conta própria qual era a "primeira letra", e só o CSS Text Level 3 definiu o comportamento correto 😀

O jeito moderno de achar as palavras: Intl.Segmenter

Regex é ótima, mas ela não sabe o que é "palavra", ela só sabe o padrão que tu escreveu

Quem sabe isso é o Intl.Segmenter, a API nativa de segmentação de texto sensível a locale, que trabalha com grafemas, palavras e frases

Ela entrou no Baseline como newly available em 16 de abril de 2024, disponível nos três principais motores de navegador

As versões mínimas são Chrome 87, Edge 87, Firefox 125 e Safari 14.1

Com granularity: "word" ela divide a string nas fronteiras de palavra determinadas pelo locale, e cada segmento vem com a propriedade isWordLike: true pra palavra, false pra espaço e pontuação

O exemplo oficial da MDN filtra por isWordLike e devolve só as palavras:

const segmenter = new Intl.Segmenter("en", { granularity: "word" })

segments.filter(s => s.isWordLike).map(s => s.segment)

Com isso na mão, capitalizar vira só percorrer os segmentos e mexer nos que são palavra, mantendo espaço e pontuação do jeito que estavam:

function capitalizeComSegmenter(texto, locale = "pt-BR") {
const segmenter = new Intl.Segmenter(locale, { granularity: "word" })
let saida = ""

for (const { segment, isWordLike } of segmenter.segment(texto)) {
saida += isWordLike
: segment
}

return saida
}

É mais código que a regex? é

Mas é o caminho pra quando a string não é comportada e tu quer a quebra de palavra que o próprio navegador usa

toUpperCase ou toLocaleUpperCase?

Noventa por cento das vezes dá na mesma

A diferença aparece em locales cujo mapeamento de caixa foge do padrão Unicode

O caso clássico é o turco:

"istanbul".toLocaleUpperCase("en-US") // "ISTANBUL"
"istanbul".toLocaleUpperCase("tr")    // "İSTANBUL"

Repara no ponto em cima do I

Se o teu sistema é só pt-BR, segue com toUpperCase() de boa

Se ele é multi idioma, passar o locale te salva de um bug bem chato de descobrir

Preciso instalar uma biblioteca pra isso?

Não precisa, o JavaScript puro resolve, como tu viu aí em cima

Mas se o teu projeto já usa Lodash, existe o _.startCase, que converte a string pra start case:

_.startCase("fooBar") // "Foo Bar"

Um aviso antes de tu sair instalando: os pacotes avulsos estão parados

O lodash.startcase está na versão 4.4.0, com a última publicação há cerca de 10 anos

O lodash.capitalize está na 4.2.1, também com a última publicação há cerca de 10 anos

Ou seja, puxar uma dependência inteira pra fazer o que cabe em três linhas de replace? pensa bem se compensa 😛

Perguntas frequentes

Entram aqui as perguntas e respostas do bloco geo.faq desta proposta, na ordem em que estão listadas

No vídeo deste post eu monto a solução do zero, e o caminho é bem pé no chão: um HTML simples, o script puxado com o atributo defer pra esperar o carregamento do HTML antes de executar o JS, e o console do navegador como bancada de teste

A parte que eu faço questão de mostrar ao vivo é o teste com a string TODA em maiúscula

É ali que fica claro por que o toLowerCase() entra antes do replace: sem ele, a string em caixa alta sai igualzinha entrou, e a função parece "não funcionar"

O que eu ainda não testei aqui, e por isso não vou afirmar, é o comportamento do Intl.Segmenter com português do Brasil em palavra composta, apóstrofo e hífen

Pra fechar isso com honestidade faltaria rodar uma bateria com nomes tipo maria-clara, d’Ávila e cotidiano com pontuação colada, comparando saída do Segmenter, da regex \S e da versão com \p{L} lado a lado

function capitalizeFirst(str) {
return str.toLowerCase().replace(/(?:^|\s)\S/g, (a) => a.toUpperCase())
}