Domine RegEx e Manipulação de Strings no JavaScript

Neste tutorial, vamos explorar técnicas avançadas de manipulação de strings em JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente., incluindo o uso de Expressões Regulares (RegEx) para realizar buscas, substituições e validaçõesValidação de Código: W3C Validator e DebuggingAprenda a validar e corrigir erros de HTML com o W3C Validator. Descubra técnicas de debugging para melhorar a compatibilidade e a manutenção do seu site. de forma poderosa. A ideia é compreender como trabalhar com padrões de texto para aplicações mais práticas, como checagem de formato de dados de entrada, busca de palavras-chave, sanitização de conteúdo, entre outras necessidades comuns em desenvolvimento web.

Conceitos Fundamentais de Strings no JavaScript🔗

A manipulação de strings em JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente. permite modificações, consultas e análises de textos com métodos nativos integrados. Alguns métodosClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. importantes para rever:

• indexOf(): retorna a posição inicial (índice) de uma substring.
• slice(): extrai parte da stringVariáveis, Tipos de Dados e OperadoresAprenda os conceitos essenciais de JavaScript, explorando variáveis, tipos de dados e operadores com exemplos claros e práticas dicas de programação. a partir de um índice até outro.
• substring(): similar ao slice(), mas não aceita valores negativos para definir índice.
• toUpperCase() / toLowerCase(): transformam toda a stringVariáveis, Tipos de Dados e OperadoresAprenda os conceitos essenciais de JavaScript, explorando variáveis, tipos de dados e operadores com exemplos claros e práticas dicas de programação. em maiúsculas ou minúsculas, respectivamente.
• includes(): verifica se contém determinada substring, retornando true ou false.
• startsWith() / endsWith(): checam se a stringVariáveis, Tipos de Dados e OperadoresAprenda os conceitos essenciais de JavaScript, explorando variáveis, tipos de dados e operadores com exemplos claros e práticas dicas de programação. começa ou termina com determinada substring.

Esses métodosClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. são ótimos pontos de partida, mas há necessidades mais avançadas que exigem padrões e validadores poderosos. Para isso, entra em cena o RegEx.

Introdução às Expressões Regulares (RegEx)🔗

Expressões Regulares são padrões de texto usados para encontrar e manipular cadeias de caracteres. Ao criar um RegEx, você descreve um formato que deseja localizar em uma string. No JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente., existem duas formas comuns de escrever um RegEx:

1. Literal: /padrao/

2. Construtor: new RegExp('padrao')

Um RegEx pode ser usado com métodosClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. como test(), exec(), match(), replace(), entre outros.

Flags Mais Comuns

As flags controlam a forma como o padrão é buscado:

• g (global): pesquisa por todas as ocorrências, não apenas pela primeira.
• i (case-insensitive): ignora maiúsculas e minúsculas.
• m (multiline): permite que o ^ e $ representem o início e fim de cada linha, e não apenas da stringVariáveis, Tipos de Dados e OperadoresAprenda os conceitos essenciais de JavaScript, explorando variáveis, tipos de dados e operadores com exemplos claros e práticas dicas de programação. inteira.

Exemplo simples de uso:

const texto = "JavaScript é Fantástico!";
const regex = /fantastico/i; // Flag i para case-insensitive
console.log(regex.test(texto)); // true

Construção de Padrões com RegEx🔗

Uma expressão regular pode conter caracteres especiaisQuebras de Linha e Entidades HTML: Caracteres EspeciaisDescubra neste tutorial completo como utilizar quebras de linha com a tag <br> e aplicar entidades HTML, garantindo a exibição correta de caracteres. que representam grupos, faixas e repetições. Alguns dos mais usados:

Exemplos de Construção de Padrões

• ValidarValidação de Código: W3C Validator e DebuggingAprenda a validar e corrigir erros de HTML com o W3C Validator. Descubra técnicas de debugging para melhorar a compatibilidade e a manutenção do seu site. formato de CEP (xxxxx-xxx)

const cepRegex = /^\d{5}-\d{3}$/;
console.log(cepRegex.test("12345-678")); // true
console.log(cepRegex.test("1234-6789")); // false

• Capturar palavras-chave

const frase = "Eu adoro pizza e sorvete!";
// Capturar palavras que terminam com "a"
const padrao = /\b\w+a\b/g; // \b define fronteira de palavra
console.log(frase.match(padrao)); // ["pizza", "sorvete" não termina com 'a']

Uso de RegEx para Substituições e Limpeza de Texto🔗

Para substituições, o métodoClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. replace() pode utilizar RegEx. É útil quando se quer remover caracteres indesejados, substituir padrões repetidos ou aplicar formatações.

let texto = "Olá!!! Tudo bem??? Vamos programar???";
// Remove pontos de exclamação e interrogação repetidos
texto = texto.replace(/[!?]+/g, match => {
  // match é cada grupo encontrado no padrão
  return match[0]; // mantém apenas um caractere
});
console.log(texto); // "Olá! Tudo bem? Vamos programar?"

No exemplo acima, [!?]+ capta grupos de ! e ?. A funçãoFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas. callbackCallbacks, Promises e Async/AwaitAprenda como aplicar programação assíncrona em JavaScript utilizando callbacks, promises e async/await. Melhore o fluxo do seu código de forma prática. no replace() substitui cada grupo de repetição por apenas um caractere, limpando o texto.

Grupos de Captura e Referências🔗

Quando se usa parênteses em um RegEx, cria-se um grupo de captura. É possível referenciá-lo para reordenação ou substituições específicas.

const data = "2023-10-05";
// Inverter para formato DD/MM/AAAA
const formatoBrasileiro = data.replace(/(\d{4})-(\d{2})-(\d{2})/, "$3/$2/$1");
console.log(formatoBrasileiro); // "05/10/2023"

Acima, cada par de parênteses representa um grupo:

1. (\d{4}) → grupo 1 (ano)

2. (\d{2}) → grupo 2 (mês)

3. (\d{2}) → grupo 3 (dia)

Com "$3/$2/$1", reordenamos dia, mês e ano.

Lookahead e Lookbehind🔗

Os lookarounds (lookahead e lookbehind) permitem definir regras de correspondência sem consumir os caracteres no padrão principal, dando maior flexibilidade para validarValidação de Código: W3C Validator e DebuggingAprenda a validar e corrigir erros de HTML com o W3C Validator. Descubra técnicas de debugging para melhorar a compatibilidade e a manutenção do seu site. cenários em que precisamos analisar textos à frente ou antes do ponto de captura.

• Lookahead (positivo): (?=...)
• Lookahead (negativo): (?!...)
• Lookbehind (positivo): (?<=...)
• Lookbehind (negativo): (?<!...)

Exemplo: Suponha que queremos encontrar todas as palavras “JS” que não sejam seguidas de “DOMIntrodução ao DOM e Seleção de ElementosDescubra como o DOM transforma o HTML em uma árvore de objetos. Aprenda a selecionar e manipular elementos com métodos JavaScript para páginas dinâmicas.”:

const texto = "Aprender JS é ótimo, mas JS DOM tem outro contexto.";
// Lookahead negativo: (?!DOM)
const padrao = /JS(?! DOM)/g;
console.log(texto.match(padrao)); // ["JS"]

Repare como usamos (?! DOMIntrodução ao DOM e Seleção de ElementosDescubra como o DOM transforma o HTML em uma árvore de objetos. Aprenda a selecionar e manipular elementos com métodos JavaScript para páginas dinâmicas.) para indicar que não queremos corresponder “JS” quando estiver imediatamente seguido de “ DOMIntrodução ao DOM e Seleção de ElementosDescubra como o DOM transforma o HTML em uma árvore de objetos. Aprenda a selecionar e manipular elementos com métodos JavaScript para páginas dinâmicas.”.

Métodos Avançados de Manipulação de Strings🔗

Além dos métodosClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. tradicionais, temos funcionalidades que ressaltam a manipulação moderna de strings:

• padStart() e padEnd(): preenchem a stringVariáveis, Tipos de Dados e OperadoresAprenda os conceitos essenciais de JavaScript, explorando variáveis, tipos de dados e operadores com exemplos claros e práticas dicas de programação. com caracteres no início ou final, até atingir um comprimento definido.

const codigo = "123";
console.log(codigo.padStart(6, "0")); // "000123"
console.log(codigo.padEnd(6, "X"));  // "123XXX"

• repeatGrid Responsivo: fr, minmax(), repeat()Descubra como criar grids flexíveis e responsivos com CSS Grid, explorando fr, minmax() e repeat() para layouts modernos em seu site.(): repete a stringVariáveis, Tipos de Dados e OperadoresAprenda os conceitos essenciais de JavaScript, explorando variáveis, tipos de dados e operadores com exemplos claros e práticas dicas de programação. conforme o número de vezes indicado.

console.log("JS ".repeat(3)); // "JS JS JS "

• matchAll(): retorna todas as ocorrências encontrada em um padrão com groups e captures, permitindo iteração facilitada.

const frase = "A1 B2 C3";
const reg = /([A-Z])(\d)/g;
for (const match of frase.matchAll(reg)) {
  console.log(match[1], match[2]);
}
// A 1
// B 2
// C 3

Boas Práticas ao Trabalhar com RegEx🔗

1. Clareza: prefira expressões regulares fáceis de serem lidas e documentadas.

2. Escape de caracteres especiaisQuebras de Linha e Entidades HTML: Caracteres EspeciaisDescubra neste tutorial completo como utilizar quebras de linha com a tag <br> e aplicar entidades HTML, garantindo a exibição correta de caracteres. quando necessário (\, ., , +, ? etc.).

3. Testes: experimente seus padrões em ferramentas on-line ou em ambientes de teste para garantir que o resultado seja o esperado.

4. PerformanceDebugging e Ferramentas de Desenvolvimento do NavegadorAprenda a depurar código JavaScript com as Ferramentas do Navegador. Use console, breakpoints e debugger para solucionar bugs de forma prática.: evite padrões extremamente complexos que possam causar lentidão.

Exercício Prático (Sugerido)🔗

Imagine que você precisa criar uma funçãoFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas. para sanitizar inputs de usuários, removendo possíveis introduções maliciosas (por exemplo, tags HTML). Tente:

1. Criar uma funçãoFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas. limparInput(texto) que:

• Remova qualquer tag HTMLEstrutura Básica de um Documento HTMLAprenda a criar a base perfeita para suas páginas com nosso tutorial de HTML. Descubra como organizar sua estrutura web de forma prática e sem complicações., como <!DOCTYPE html> ou <script>.
• Limite caracteres especiaisQuebras de Linha e Entidades HTML: Caracteres EspeciaisDescubra neste tutorial completo como utilizar quebras de linha com a tag <br> e aplicar entidades HTML, garantindo a exibição correta de caracteres. que possam gerar problemas de injeção de código.

2. Ao final, faça alguns testes com strings simulando inputs de usuário.

Com esse exercício, você treinará várias técnicas: uso de grupos de captura, lookarounds para possíveis padrões, e substituições com replace().

Conclusão🔗

A manipulação avançada de strings com RegEx no JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente. é um passo fundamental para quem deseja aprofundar-se em validaçõesValidação de Código: W3C Validator e DebuggingAprenda a validar e corrigir erros de HTML com o W3C Validator. Descubra técnicas de debugging para melhorar a compatibilidade e a manutenção do seu site. e formatação de dados. As expressões regulares oferecem flexibilidade e precisão para lidar com cenários de busca e substituição complexos. Ao dominar esses conceitos, você ganha versatilidade para construir soluções robustas no front-end e no back-end, se tornando capaz de criar regras de validaçãoValidação de Código: W3C Validator e DebuggingAprenda a validar e corrigir erros de HTML com o W3C Validator. Descubra técnicas de debugging para melhorar a compatibilidade e a manutenção do seu site. e formatação mais elaboradas, garantindo a qualidade e a confiabilidade dos dados em suas aplicações.

Pratique bastante e explore os padrões, pois quanto mais exemplos você testa, melhor se torna em compreender e aplicar as expressões regulares no dia a dia do desenvolvimento web!