JavaScript: Texto em Maiúsculo & Minúsculo - Todas as Formas

Precisa converter um texto em maiúsculo, minúsculo, primeira letra maiúscula? Então acompanhe os exemplos deste artigo e descubra como alterar a caixa de um texto qualquer ou enquanto escreve.

Para alterar um texto para maiúsculo em JavaScript, utilizamos o método toUpperCase(). Para alterar para minúsculo, utilizamos o método toLowerCase().

Veja abaixo outros exemplos de como alterar um texto enquanto escreve, e também outras formas de caixa como Title Case.

Alterando caixa em JavaScript

Para alterar um texto para maiúsculo, utilizamos o método toUpperCase(), nativo do objeto String.

let text = 'hello world';
// Maiúsculo
console.log(text.toUpperCase()); // HELLO WORLD

Para minúsculo, basta usar toLowerCase().

let text = 'Hello World';
// Minúsculo
console.log(text.toUpperCase()); // hello world

Somente a primeira letra maiúscula

No exemplo abaixo, pegamos a primeira letra usando text[0], transformamos em maiúscula, pegamos também o resto da string menos a primeira letra, usando slice(1) e transformamos em minúscula, depois concatenamos tudo.

let text = 'ricardo';

console.log(text[0].toUpperCase() + text.slice(1).toLowerCase()); // Ricardo

Title case

Title case é outra opção de alteração de caixa muito utilizada. Segue abaixo uma função que utiliza os mesmos métodos acima, só que aplica para todas as palavras utilizando split e join.

// O que essa função faz:
// 1. Converte o texto para minúsculas
// 2. Divide a string em um array, dando split nos espaços
// 3. Faz um map no array, convertendo a primeira letra em maiúscula
// 4. Converte o array em string através de um join
const titleCase = text => {
	return text.toLowerCase()
		.split(' ')
		.map((word) => {
			return word[0].toUpperCase() + word.slice(1);
		}).join(' ')
}

titleCase('lorem ipsum dolor sit amet'); // Lorem Ipsum Dolor Sit Amet

Alterando para maiúsculas enquanto se escreve

Se você deseja alterar a caixa de um texto em um input enquanto se escreve, pode fazer uso de um event listener que verifica quando uma tecla é pressionada, veja o exemplo abaixo.

<input type="text" id="text">
document.getElementById('text').addEventListener('keyup', (ev) => {
	const input = ev.target;
	input.value = input.value.toUpperCase();
});

O mesmo código em jQuery ficaria:

$('#text').on('keyup', (ev) => {
	$('#text').val($('#text').val().toUpperCase());
});

Como você pode notar, o método acima tem um certo delay para converter a caixa do texto, e isso é inevitável. Mas para fins estéticos, uma solução muito mais simples é utilizar apenas CSS, veja o exemplo abaixo.

Para fins estéticos, apenas utilize CSS

Se você precisa alterar o texto para maiúsculo ou minúsculo apenas para fins estéticos, sem alterar o real valor do campo, ou possa alterar o valor do campo posteriormente, você pode usar a propriedade CSS text-transform no input ou em qualquer outra tag HTML.

<input type="text" id="text" style="text-transform: uppercase">

Para converter o texto para minúsculo, basta usar text-transform: lowercase. Para a primeira letra maiúscula, use text-transform: capitalize.

Publicidade

Este artigo foi útil pra você?

Ricardo Metring

Ricardo Metring

Sou desenvolvedor full stack e co-fundador da Criar.io.
Trabalho há 10 anos com programação e sempre interessado em aprender mais.

Artigos relacionados