entender Expressão Regular — Regex em Javascript

Vamos entender de uma vez por todas o objetivo da expressão regular na resolução de problemas na rotina de desenvolver códigos e como montar a sua para solucionar o problema que você estiver em questão.

As expressões regulares ou regex são formas simples de trocar elementos de um código-fonte e de aperfeiçoar a produtividade.

Nesse artigo, veremos

  • O que é expressão regular?
  • Principais conceitos
  • Como uma expressão regular é utilizada na prática?
  • O objeto RegExp
  • Problemas do dia a dia

O que é expressão regular?

As expressões regulares são padrões para selecionar caracteres (ou combinações de caracteres) em uma string. No caso do JavaScript, aliás, as expressões regulares são, também, objetos. Assim, a gestão do código-fonte de um programa pode ser feita com mais segurança e agilidade.

As expressões regulares permitem que extraiam ou troquem partes do texto do código-fonte. Além disso, podem ser utilizadas para modificar endereços, links de imagens e a formatação de conteúdos em uma página HTML. Se a pessoa desejar, elas podem ser empregadas até para a remoção de caracteres inválidos.

Principais conceitos

As expressões regulares são representações que facilitam a busca por padrões no texto e isso torna a manipulação do código-fonte mais ágil e robusta.

Classes

As classes ajudam a encontrar múltiplos caracteres ao mesmo tempo. As vezes você pode procurar apenas pelas variáveis que tenham a letra A. Mas, se a busca demandar conteúdos com as letras A e J, as classes necessárias.

Uma classe deve ser definida com o apoio de colchetes []. Isso indica ao seu sistema que você busca por um conjunto específico de caracteres. Há algumas configurações que facilitam esse trabalho, aliás, que são as seguintes:

  • [A-z] indica que todas as letras do alfabeto devem ser apontadas;
  • [0-9] indica que todos os números devem ser destacados, pode ser substituído por \d;
  • [a-z0-9] aponta ao sistema que você busca letras e números, pode ser substituído pela expressão \w;
  • [a-z] limita a busca a todas as letras minúsculas;
  • ^ dentro dos colchetes ignora todas as combinações da classe, por exemplo, [^as] ignora todas as combinações que tenham as;
  • [A-Z] limita a sua busca apenas às letras maiúsculas;
  • W reduz a busca apenas a caracteres que não sejam alfanuméricos, como espaços e símbolos.

Âncoras

São úteis quando você deseja recuperar as posições que estão entre os caracteres. Porém, esse trabalho será executado sem a exibição dos caracteres indicados. Ou seja, ela aponta o que está próximo do referencial que você indicar, sem apontar esse referencial.

As âncoras podem ser utilizadas de duas formas, que são as seguintes:

  • com um ^, que recupera todos os termos que estiverem no início da linha, por exemplo, ^bolo aponta todas as vezes em que a palavra bolo está no começo da linha;
  • com um $, para apontar as vezes em que a expressão está no fim da linha, por exemplo, bolo$ indica todos os casos em que a palavra bolo está no fim da linha.

Modos

Com o apoio de modos, você consegue ampliar o escopo das suas buscas. Por exemplo, para limitar a sua operação a itens como CaRrO, carro e CARRO, basta digitar (?i)carro. Assim, você não precisa digitar todas as formas de escrever um termo na sua expressão.

Buscas por múltiplos padrões

Quer empregar expressões regulares para encontrar dois ou mais padrões específicos. Para isso, basta utilizar |, que funciona como o termo OU/OR nas linguagens de programação. Assim, a expressão pode lidar com mais de um padrão facilmente.

Como uma expressão regular é utilizada na prática

Um cenário em que as expressões regulares são muito utilizadas é no preenchimento de formulários. Quem cria o sistema ou página web deve garantir que os usuários farão o preenchimento do documento dentro de um certo conjunto de padrões.

Para que isso seja possível, uma sequência de expressões regulares são implementadas. Assim, elas podem apontar para o programa que o usuário fez o uso de caracteres inválidos e exibir uma mensagem de erros. A expressão normalmente é moldada da seguinte maneira:

^\w*(\.\w*)?@\w*\.[a-z]+(\.[a-z]+)?$

  • a expressão ^ aponta para o sistema que uma nova linha ou string iniciou;
  • \w* filtra caracteres alfanuméricos, como já apontamos. O asterisco é utilizado para garantir que todos os caracteres compatíveis com essa regra sejam apontados;
  • (\.\w*)? os parênteses indicam o início e o fim de um agrupamento. A expressão \. é adotada para apontar a detecção de um ponto final. Já o \w* detecta caracteres alfanuméricos;
  • `.[a-z] aponta a existência de um ponto seguido de letras minúsculas (isso ajuda a identificar se o usuário digitou algo como .com, .org ou .net);
  • @ limita apenas a endereços com o símbolo @;
  • + indica que todos os itens que estiverem imediatamente após esse símbolo devem aparecer uma ou mais vezes no dado inserido pelo usuário;
  • (\.[a-z]+) aponta que a letras minúsculas seguidas de um ponto final devem aparecer pelo menos uma vez após o símbolo @;
  • ? indica que a regra que vier imediatamente antes do interrogação deve aparecer na expressão nenhuma ou apenas uma vez;
  • $ finaliza o fim da regra.

Inserido no seu código, essa expressão regular consegue filtrar qualquer endereço compatível que não esteja dentro do padrão utilizado pelos provedores de e-mail.

Opções como “[]@[].org” ou “@com.@” serão apontadas como inválidas. Assim, o seu formulário terá apenas respostas válidas.

Expressões regulares são um grande ativo para que evitam erros na filtragem de conteúdos que pode diminuir o tempo necessário para lidar com expressões, modificar o código com mais rapidez e até mesmo garantir que formulários sejam preenchidos corretamente.

Para construir esse artigo, fiz algumas leituras, entre elas, esse artigo da betrybe

Continuar pesquisando sobre regexp.

O objeto RegExp

Uma expressão regular é um objeto que descreve um padrão de caracteres.

Expressões regulares são usadas para executar funções de correspondência de padrões e “pesquisar e substituir” no texto.

var patt = /w3schools/i

Exemplo explicado:

  • / w3schools / i é uma expressão regular.
  • w3schools é um padrão (para ser usado em uma pesquisa).
  • i é um modificador (modifica a pesquisa para não fazer distinção entre maiúsculas e minúsculas).

Vamos ver algumas definições para construir a expressão regular que melhor solucione o problema:

Modificadores

Os modificadores são usados ​​para realizar pesquisas globais e que não diferenciam maiúsculas de minúsculas:

g: Execute uma correspondência global (encontre todas as correspondências em vez de parar após a primeira correspondência)

i: Executar correspondência que não diferencia maiúsculas de minúsculas

m: Executar correspondência multilinha

Colchetes

Os colchetes são usados ​​para encontrar uma variedade de caracteres:

[abc]: Encontre qualquer caractere entre os colchetes
[^abc]: Encontre qualquer caractere NÃO entre os colchetes
[0–9]: Encontre qualquer caractere entre os colchetes (qualquer dígito)
[⁰-9]: Encontre qualquer caractere NÃO entre os colchetes (qualquer não dígito)
(x|y): Encontre qualquer uma das alternativas especificadas

Metacaracteres

Metacaracteres são caracteres com um significado especial:

. Encontre um único caractere, exceto nova linha ou terminador de linha
\w Encontre um caractere de palavra
\W Encontre um caractere não verbal
\d Encontre um dígito
\D Encontre um caractere sem dígito
\s Encontre um caractere de espaço em branco
\S Encontre um caractere sem espaço em branco
\b Encontre uma correspondência no início / final de uma palavra, começando assim: \ bHI, terminando assim: HI \ b
\B Encontre uma correspondência, mas não no início / final de uma palavra
\0 Encontre um caractere NULL
\n Encontre um novo caractere de linha
\f Encontre um caractere de feed de formulário
\r Encontre um caractere de retorno de carro
\t Encontre um caractere de tabulação
\v Encontre um caractere de tabulação vertical
\xxx Encontre o caractere especificado por um número octal xxx
\xdd Encontre o caractere especificado por um número hexadecimal dd
\udddd Encontre o caractere Unicode especificado por um número hexadecimal dddd

Quantificadores

n+ Corresponde a qualquer string que contenha pelo menos um n
n* Corresponde a qualquer string que contenha zero ou mais ocorrências de n
n? Corresponde a qualquer string que contenha zero ou uma ocorrência de n
n{X} Corresponde a qualquer string que contenha uma sequência de X n’s
n{X,Y} Corresponde a qualquer string que contenha uma sequência de X a Y n’s
n{X,} Corresponde a qualquer string que contenha uma sequência de pelo menos X n’s
n$ Corresponde a qualquer string com n no final dela
^n Corresponde a qualquer string com n no início dela
?=n Corresponde a qualquer string seguida por uma string específica n
?!n Corresponde a qualquer string que não seja seguida por uma string específica n

Propriedades do objeto RegExp

constructor Retorna a função que criou o protótipo do objeto RegExp
global Verifica se o modificador “g” está definido
ignoreCase Verifica se o modificador “i” está configurado
lastIndex Especifica o índice no qual iniciar a próxima partida
multiline Verifica se o modificador “m” está definido
source Retorna o texto do padrão RegExp

Métodos de objeto RegExp

exec() Testa uma correspondência em uma string. Retorna a primeira correspondência
test() Testa uma correspondência em uma string. Retorna verdadeiro ou falso
toString() Retorna o valor da string da expressão regular

Problemas do dia a dia

Encontrei uma extensa lista de diversos problemas resolvidos com regex:

Ainda podemos testar as regex de forma mais visual pelos sites:

Referências

Para escrever esse artigo, estudei alguns textos bem interessantes

Além da documentação javascript para Regex.

Esse artigo ficou mais longo, pois trata-se de um assunto mais complexo que precisamos de mais detalhes e exemplos para compreendermos o que estamos fazendo. Tomara que tenha gostado, aplauda o artigo! Até o próximo artigo e ótimos códigos.

--

--

--

Developer Frontend Web — Javascript | ReactJS https://linktr.ee/douglasabnovato

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
douglasabnovato

douglasabnovato

Developer Frontend Web — Javascript | ReactJS https://linktr.ee/douglasabnovato

More from Medium

JavaScript: Deep Dive into Functions - Part 4

How to Fix JavaScript Runtime issues — Lazy Loading

Asynchronous JavaScript: Promises and async-await

Essential JavaScript Functional Programming Concepts for React