Primeiras aulas do curso Expressões regulares: Capturando textos de forma mágica

Expressões regulares: Capturando textos de forma mágica

Começando com Regex - Começando a aprender Regex com Javascript

Download do projeto

Você pode fazer o DOWNLOAD completo do projeto inicial aqui.

O que é uma Expressão Regular?

Uma expressão regular, ou Regex, são padrões utilizados para identificar determinadas combinações ou cadeias de caracteres em uma string. Ela faz parte do dia a dia de todos os programadores e administradores de infra. Por meio dela, podemos validar a entrada de usuários ou encontrar alguma informação em logs, documentação ou saída de comando. O mais legal é que as Regex são escritas independentes de uma linguagem, como JavaScript ou C#. As expressões são definidas em sua própria linguagem formal e uma vez aprendida, podemos aplicar o conhecimento dentro da linguagem de nossa preferência. Em outras palavras, linguagens como Java, JavaScript, C# e várias outras possuem uma implementação das expressões regulares e sabem interpretá-la.

Neste curso, vamos focar nessa linguagem formal, mas claro, também mostraremos como executá-la nas plataformas diversas.

Onde queremos chegar? Entender, por exemplo, uma Regex assim:

<(img)\s+src="(.+)"(?:>(?:.*)<\/\1>|\s+\/>)

E saber executá-la utilizando a sua linguagem. No último capítulo desse curso mostraremos como executar uma Regex com Java, C#, PHP, Python, Ruby e JavaScript.

Ambiente de execução

Para testar as Regex durante o curso, preparamos uma página HTML e um código JavaScript que interpreta a Regex. Você pode baixar o projeto aqui. Basta extrair o ZIP e abrir o arquivo index.html.

Ao abrir, podemos ver que a página mostra um formulário para executar e testar as regex. Vamos utilizar esse formulário para analisar as expressões.

Repare que já estamos usando um vocabulário focado na Regex. A string que queremos usar na busca, no exemplo da imagem, a string imagem.png é chamada de alvo, ou target. A expressão regular, na imagem .*png, estamos chamando de pattern. Os resultados são os *matches. *

Já estamos aplicando a primeira Regex, estamos procurando algum texto que termine com png. O ponto (.) é um caractere especial e significa qualquer caractere. Ou seja, a Regex não interpreta o ponto literalmente e sim faz um match para qualquer *char. *

O asterisco (*) é outro meta-char com o significado "zero, um ou mais vezes". Ao adicionar o asterisco (*), conseguimos definir a quantidade, por isso ele também é chamado de quantifier. O ponto (.) e asterisco (*) fazem parte dos metacaracteres que veremos durante o curso.

Apresentando o código

Qualquer Regex precisa ser interpretada por meio de uma Regex engine. Esse motor é uma parte de software que processa a expressão, tentando achar o padrão dentro da string dada, devolvendo os resultados. Normalmente a Regex engine faz parte da aplicação maior, para executar uma validação ou busca de uma string.

No nosso caso, usamos uma Regex engine baseada na linguagem JavaScript. No treinamento, veremos ainda como usar expressões regulares em outras linguagens, como Java, C# ou Ruby.

Vamos dar uma olhada na função executaRegex, dentro do arquivo regex.js. Nela criamos o objeto que sabe interpretar a expressão regular. O JavaScript chama esse objeto de RegExp:

var objetoRegex = new RegExp(textoPattern, 'g');

No construtor passamos o pattern, aquilo que colocamos no input Pattern da página index.html. A letra g é uma flag do mundo JavaScript e significa global, para aplicar a regex na string inteira (e não parar no primeiro match) .

Após a inicialização do objeto regex, podemos executá-lo usando o método exec, que recebe como parâmetro o alvo:

while (resultado = objetoRegex.exec(textoTarget)) {

    //codigo omitido

}

O método exec devolve um resultado que possui a string match *e outras informações, como a posição/index. *Repare que estamos fazendo um laço sempre pedindo o próximo resultado.

O resto do código do arquivo regex.js se preocupa com a leitura, validação e apresentação dos dados.

Começando com Regex - O nosso primeiro problema

Já vimos um pequeno exemplo de regex e já sabemos que existem metacaracteres (meta-char) que possuem significados especiais, como o ponto (.) ou asterisco (*). No nosso primeiro exemplo para valor, vamos focar no CPF.

Uma tarefa muito comum no dia a dia do desenvolvedor é parsear um arquivo linha a linha, onde cada linha representa um dado ou registro. Há vários tipos de arquivos, e nesse curso vamos usar o exemplo de arquivo CSV, ou Comma-separated Values, por exemplo:

João Fulano,123.456.789-00,21 de Maio de 1993,(21) 3079-9987,Rua do Ouvidor,50,20040-030,Rio de Janeiro
Maria Fulana, 98765432100,11 de Abril de 1995,(11) 933339871,Rua Vergueiro,3185,04101-300,São Paulo
denise teste, 987.654.321.00,28 de Dezembro de 1991,(31)45562712,SCS Qd. 8 Bl. B-50,11,70333-900,Rio Grande

Então, em cada linha temos vários valores separados pela vírgula, por exemplo:

João Fulano,123.456.789-00,21 de Maio de 1093,(21) 3079-9987,Rua Buarque de Macedo,67,22220-232,Rio de Janeiro

Encontrando números

Repare que o segundo valor é um CPF que precisamos extrair dessa linha. Você conhece um CPF e sabe o padrão de caracteres dele, só falta traduzir o seu conhecimento para a linguagem que a regex engine entende!

Um CPF são 9 números, separados em blocos de 3 números por um ponto, mais um hífen e mais dois números. Para representar um número, podemos utilizar uma caracter class, que é um símbolo especial para representar um conjunto de caracteres. No mundo de regex, um número é representado pelo \d.

O primeiro quantifier

Agora queremos que esse número apareça 3 vezes. Já vimos que o asterisco (*) significa 0, 1 ou mais vezes, ou seja, não atende. Queremos exatamente 3 números que podemos definir pela expressão \d{3}.

Dentro das chaves definimos a quantidade que o caractere deve estar presente. Com isso, já podemos encontrar 3 dígitos. Agora vem o "ponto" só que aprendemos que esse caractere possui um significado especial. No entanto queremos procurar o ponto literalmente e não qualquer caractere. Para deixar claro que o ponto deve ser ponto apenas, é preciso escapar o caractere com \. Assim temos:

\d{3}\.

Sabendo disso podemos definir o resto do CPF:

\d{3}\.\d{3}\.\d{3}\-\d{2}

Repare que o usamos um hífen seguido por apenas 2 dígitos.

Classes de caracteres - Entendendo Classes de Caracteres

No último capítulo demos uma introdução às regex e vimos nossa primeira expressão para encontrar um CPF em uma linha de texto. Já criamos uma expressão regular, bastante simples ainda encontrando o CPF:

\d{3}\.\d{3}\.\d{3}-\d{2}

Olhando novamente no nosso arquivo CSV, percebemos que há uma pequena variação da formatação do CPF: 987.654.321.00 e 11122233300.

A nossa regex falha e não "enxerga" esses CPFs. Para fazer ela funcionar, devemos usar o poder das classes de caracteres. Na aula anterior já vimos uma classe predefinida, o \d. Essa classe na verdade é apenas um atalho pra [0-9], ou seja qualquer dígito. Os colchetes definem uma classe de caracteres e nada impede que criemos nossa própria classe.

Repare que na décima segunda posição do CPF pode vir um ponto OU hífen, que podemos declarar com a classe: [.-]. Perceba também que não escapamos o ponto (.), pois dentro dos colchetes o ponto já possui o seu valor literal. Importante também é que a ordem não importa, [.-] e [-.] são a mesma coisa.

Caracteres opcionais

A quantidade de vezes que essa classe de caracteres deve aparecer é definida por um quantifier, por exemplo, como já vimos:

No nosso caso [.-] é opcional, pode ter ou não ter, mas uma vez apenas. Dentro da regex, isso é declarado através do meta-char ponto de interrogação (?). O ponto de interrogação (?), que significa zero ou uma vez, é mais um quantifier.

Assim podemos combinar a classe [.-] com o quantifier ?:

Vamos aplicar isso na nossa regex:

\d{3}[.-]?\d{3}[.-]?\d{3}[.-]?\d{2}

Agora sim, os CPFs serão encontrados com ou sem hífen/ponto.

Sabendo disso até podemos reescrever a classe \d (sim \d também é uma classe, já predefinida). Invés de usar \d podemos escrever:

[0123456789]

Ou mais curto:

[0-9]

Só cuidado, o hífen não possui um significado especial e define todos os números de 0 até 9.

Sobre o curso Expressões regulares: Capturando textos de forma mágica

O curso Expressões regulares: Capturando textos de forma mágica possui 134 minutos de vídeos, em um total de 81 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda JavaScript acessando integralmente esse e outros cursos, comece hoje!

  • 1112 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1112 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1112 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1112 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana