entender e usar regex com javascript

Utilizar regex em aplicações frontend para tratar strings em formulários e entender como usar e como criar para atender nossas necessidades específicas. Vamos pesquisar e entender.

O que é RegEx?

RegEx é a abreviação de Expressões Regulares. RegEx são strings de caracteres especiais que são usados ​​como padrões para combinar com strings.

Casos de uso de RegEx.

• Para validações (validação de e-mail, validação de telefone etc).
• Combine e substitua programas.
• Correspondência de padrão de senha etc.

Maneiras de definir RegEx em JavaScript.

Existem basicamente duas maneiras de definir RegEx em JavaScript.

1. Usando literais
2. Usando o objeto RegEx

Vamos dar uma olhada em como definir RegEx usando as duas maneiras.

1. Usando literais

let regPat = /ab/

2. Usando o objeto RegEx

let regPat = new RegExp('abc');

Para a parte do objeto RegEx, você não precisa importar/exigir nada para usá-lo. Desde então, é um objeto global que está disponível para você em todo o seu arquivo de código.

Folha de dicas do RegEx

Algumas bandeiras úteis.

1. i → É usado para ignorar a diferenciação entre maiúsculas e minúsculas.
2. g → É usado para realizar pesquisa global.
3. s → É usado para corresponder ao caractere de nova linha.
4. m → É usado para realizar pesquisa em várias linhas.

Você pode usar mais de um sinalizador em seu padrão RegEx, mas é importante escrever sinalizadores no final.

Por exemplo

/gold/i.test('GolD')

isso resultará em true porque i sinalizar no final ignorará a sensibilidade a maiúsculas e minúsculas.

Metacaracteres

Metacaracteres são usados ​​para corresponder ao caractere a seguir como o caractere especial ou os literais. Alguns dos metacaracteres estão escritos abaixo.

1. \d → para corresponder ao próximo caractere de [0–9]
2. \D → para corresponder ao caractere a seguir, exceto dígitos.
3. \s → para corresponder ao próximo caractere como espaço em branco/espaço.
4. \w → para combinar os alfabetos (maiúsculas e minúsculas).
5. \W → para corresponder a qualquer coisa, menos alfabetos.

Quantificadores.

Os quantificadores são usados ​​para informar quantos caracteres ou expressões você deseja corresponder.

Por exemplo: Se você quiser combinar 10 dígitos, você fará algo assim

let regPat = /\d{10}/

Alguns dos quantificadores são os seguintes

1. []? → Combinará a ocorrência de qualquer coisa entre colchetes por 0 ou 1 vezes.
2. []+ → Verifique se ocorre 1 ou mais vezes.
3. [] * → Ocorre 0 ou mais vezes.
4. []{n} → ocorre n vezes.
5. []{n,} → ocorre n ou mais vezes.
6. []{n,m} → ocorre pelo menos n vezes, mas deve ser menor que m vezes.

Projeto.

Estaremos construindo um mini projeto legal usando RegEx para validar o número de celular no formato dos EUA.

Ele retornará true para todos os formatos que respeitem o formato de número de celular dos EUA, caso contrário , false será retornado.

A seguir está o formato de número de telefone dos EUA válido

555–555–5555
(555)555–5555
(555) 555–5555
555 555 5555
5555555555
1 555 555 5555

Vamos a mais situações de expressões regulares para esclarer o que são e como utilizar em soluções em javascript.

Entender uma Regex assim

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

No link para download de uma aplicação que interpreta uma 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.

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 primeiro problema

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

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:

• [.-]* - ponto ou hífen zero, uma ou mais vezes.
• [.-]{1} - ponto ou hífen uma vez.

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 ?:

• [.-]?- ponto ou hífen zero ou uma vez.

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.

E para conferir na prática o comportamento de regex citei duas aplicações interessantes online que podemos ver na prática as regex atuando.

regex101: build, test, and debug regex

RegExr: Learn, Build, & Test RegEx

Idéia básica

Uma expressão regular é uma notação para representar padrões em strings. Serve para validar entradas de dados ou fazer busca e extração de informações em textos.

Por exemplo, para verificar se um dado fornecido é um número de 0,00 a 9,99 pode-se usar a expressão regular \d,\d\d, pois o símbolo \d é um curinga que casa com um dígito.

O verbo casar aqui está sendo usado tradução para match, no sentido de combinar, encaixar, parear. Dizemos que a expressão \d,\d\d casa com 1,23 mas não casa com 123 (falta a vírgula) nem com 1,2c (“c” não casa com \d, porque não é um dígito).

O termo em inglês é regular expression de onde vem as abreviações regex e re (o nome do módulo Python). Na ciência da computação, o termo tem um significado bem específico (veja expressão regular no Glossário).

Veja alguns exemplos com breves explicações para ter uma idéia geral:

\d{5}-\d{3}

O padrão de um CEP como 05432–001: 5 dígitos, um — (hífen) e mais 3 dígitos. A sequência \d é um metacaractere, um curinga que casa com um dígito (0 a 9). A sequência {5} é um quantificador: indica que o padrão precedente deve ser repetido 5 vezes, portanto \d{5} é o mesmo que \d\d\d\d\d.

[012]\d:[0–5]\d

Semelhante ao formato de horas e minutos, como 03:10 ou 23:59. A sequência entre colchetes [012] define um conjunto. Neste caso, o conjunto especifica que primeiro caractere deve ser 0, 1 ou 2. Dentro dos [] o hífen indica uma faixa de caracteres, ou seja, [0–5] é uma forma abreviada para o conjunto [012345]; o conjunto que representa todos os dígitos, [0–9] é o mesmo que \d. Note que esta expressão regular também aceita o texto 29:00 que não é uma hora válida (horas válidas serão o tema de um dos Exercícios).

[A-Z]{3}-\d{4}

É o padrão de uma placa de automóvel no Brasil: três letras de A a Z é seguidas de um — (hífen) seguido de quatro dígitos, como CKD-4592.

Sinais

Ao descrever de modo genérico alguma parte da sintaxe das expressões regulares usamos neste documento os símbolos «», para indicar uma parte que deve ser fornecida pelo usuário.

Por exemplo, a referência a um grupo tem a sintaxe \«n» onde «n» é o número do grupo a ser recuperado. Os sinais «» não fazem parte da sintaxe, então a referência ao terceiro grupo escreve-se como \3.

De modo semelhante, a sintaxe de quantificador moderado é «q»?, onde «q» é qualquer quantificador, como * em *? ou {1,3} no caso de {1,3}?.

Metacaracteres

Um metacaractere é um caractere ou sequência de caracteres com significado especial em expressões regulares. Os metacaracteres podem ser categorizados conforme seu uso.

Especificadores

Especificam o conjunto de caracteres a casar em uma posição.

Quantificadores

Definem o número permitido repetições da expressão regular precedente.

Veja o grupo de exercícios 1. Especificadores e quantificadores.

Âncoras

Estabelecem posições de referência para o casamento do restante da regex. Note que estes metacaracteres não casam com caracteres no texto, mas sim com posições antes, depois ou entre os caracteres.

Veja o grupo de exercícios 2. Âncoras.

Agrupamento

Definem ou grupos ou alternativas.

Guia × moderação

Por default, todos os quantificadores são gulosos: tentam casar a maior quantidade possível de caracteres.

Para entender o que isso significa, considere que desejamos capturar o nome do primeiro tag (h1) no fragmento de HTML abaixo:

>>> html = '<h1>Alan Turing: 100 anos</h1>'

Usando o quantificador guloso +, acabamos por capturar o elemento inteiro, e não apenas o tag:

>>> res = re.match('<.+>', html)
>>> res.group()
'<h1>Alan Turing: 100 anos</h1>'

O resultado acima ocorre porque o sinal > casa em duas posições no texto, e casando na segunda posição o curinga guloso .+ captura mais caracteres.

Se usamos o quantificador moderado +?, a expressão .+? fica satisfeita em capturar apenas os caracteres até o primeiro casamento de >:

>>> res = re.match('<.+?>', html)
>>> res.group()
'<h1>'

Para praticar mais o entendimento sobre regex e também aprender a construir regex que atendam a necessidades específicas, tem o link a seguir de tutorial.

Mini Tutorial RegEx - Mini Tutorial RegEx

Outro link muito completo sobre regex que explica o comportamento e exemplifica as regex na prática, também cita outras referências legais.

Regex: Um guia pratico para expressões regulares

O link guia para escrever esse artigo foi o citado a seguir da Alura.

RegEx: O que é, Como usar em Palavras e Números | Alura

Espero que tenha gostado. Deixe seu aplauso e até o próximo artigo.