Expressões Regulares em JavaScript

Uma visão geral do RegEx e dicas sobre como escrever expressões para iniciantes

TRAN FILHO HOANG em Level Up Your Code Seguir 12 de jul · 6 min ler Foto por Annie Spratt em Unsplash

Neste artigo, explicarei os fundamentos do que é uma expressão regular, regras básicas para criar uma simples e algumas dicas gerais da minha experiência. E, como resultado, você pode criar seus próprios sem precisar pesquisar no Google.

Como a maioria dos desenvolvedores, sempre que eu tiver uma tarefa que possa ser concluída por um RegEx simples, inicio a pesquisa do Google por padrões que correspondam às minhas necessidades. Então, conforme o projeto se desenvolve, a validação precisa ser atualizada e meu padrão anterior não funciona mais. Eu preciso procurar novamente e levar muito tempo para encontrar o caminho certo.

Este ciclo me fez perceber que eu preciso dominar isso para que eu possa gerar meu próprio RegEx sem precisar da ajuda do Google.

O que é uma expressão regular?

Regular Expressions é simplesmente uma maneira de descrever um padrão em dados de string.

Como criar um novo

Existem duas maneiras de criar um RegExp:

  1. Use o construtor RegExp: const sample = new RegExp('sample');
  2. Escrito como um valor literal ao incluir um padrão em caracteres de barra ( / ): const sample = /sample/;

Nota:

  1. Alguns caracteres, como pontos de interrogação ? e sinais de adição + têm significados especiais em expressões regulares e DEVEM ser precedidos por uma barra invertida ` se você quiser corresponder o caractere diretamente. A barra invertida escapa do personagem. Exemplo: const sample = /sample+/;
  2. Uma expressão regular é um tipo de objeto typeof sample // "object" .
  3. Uma expressão regular consiste em caracteres não especiais.

Como usar o RegEx

Use test() para testar a string: sample.test("sample project");

Esse método retornará um valor boolean que permite saber se a string corresponde ao padrão da expressão.

Outra função é o método exec() . Ele retornará null se nenhuma correspondência for encontrada e retornará um objeto com informações sobre a correspondência.

amostra de exec

Aqui está uma coisa estranha que eu notei quando uso exec com agrupamento e ponto de interrogação. ele retornará undefined no caso de não haver uma correspondência completa.

valor indefinido

Conjunto de regras

Existem algumas letras que têm um significado diferente quando vão atrás de uma barra invertida .

  d qualquer caractere de dígito 
w Um caractere alfanumérico (“caractere de palavra”)
s Qualquer caractere de espaço em branco (espaço, tabulação, nova linha)
Caractere DA que não é um dígito WA caracter não alfanumérico
SA caractere de espaço não branco
. Qualquer caractere, exceto para nova linha

Dicas para lembrar:

d para caractere de dígito numérico. w para qualquer caractere alfanumérico. s para um caractere de espaço em branco. Os caracteres maiúsculos são opostos ao dígito, à palavra e ao espaço – corresponde ao caso inverso.

Exemplo

const dateTime = /dd-dd-dddd dd:dd/;

Nota: w incluiu a – z e 0 – 9, que são alfanuméricos (letras e dígitos). significa que /w/.test("0") retorna true ;

Existem alguns caracteres especiais que têm significado quando dentro do colchete [] .

 - Faixa de caracteres 
^ Combine qualquer caractere, exceto os do conjunto

Exemplo

const shouldHaveDigit = /[0123456789]/;

const notContainZero = /[^0]/;

Nota

  1. Tenha cuidado com [] porque ele retornará true quando uma string tiver apenas um dígito e o restante for letras do alfabeto como shouldHaveDigit.test("ab2c") .
  2. Tenha cuidado com ^ porque ele retornará false somente quando uma string tiver zero apenas como notContainZero.test("0") . Para o resto, como notContainZero.test("01") retornará true .

As regras acima são todas sobre dígitos simples ou caracteres. Que tal combinar toda a sequência de um caractere ou um dígito ?

 + Repetido 1 -> n hora 
* Repetido 0 -> n hora
? Opcional. Bom ter
{} Número exato de tempo

Exemplo

Tomo um exemplo com {} porque é especial. Eu fiquei confuso sobre isso algumas vezes, e acho que outros desenvolvedores podem cometer o mesmo erro.

const atLeast4A = /a{1,4}/; Isso significa que o elemento deve ocorrer pelo menos uma vez e no máximo quatro vezes. atLeast4A.test("abcdef") e atLeast4A.test("abcdabcdabcd") retornam true .

const atLeast4A = /a{2,4}/; Isso significa que o elemento deve ocorrer pelo menos duas vezes e no máximo quatro vezes e deve ter aa na seqüência de caracteres. atLeast4A.test("abcdabcdabcd") retorna false enquanto atLeast4A.test("abcdaabcdabcd") retorna true .

const atLeast4A = /a{4,}/; significa mais quatro vezes e deve ter aaaa na string. atLeast4A.test("ababababab") retorna false . Mas atLeast4A.test("aaaab") retorna true .

Nota

  1. Você não pode colocar + , * e {} juntos. Isso causa erro Nothing to repeat .

Erro Nada a repetir

Use parênteses com um operador como + e * para corresponder a mais de um elemento por vez .

Exemplo

const appleTree = /(ap+le tree)+s+/;

O primeiro e terceiro + caracteres aplicam-se apenas ao p e s , respectivamente. O segundo + se aplica a todo o grupo (ap+le tree) , combinando uma ou mais seqüências como essa.

O padrão pode ter limites

Sim, podemos adicionar os marcadores ^ e $ . O cursor corresponde ao início da string de entrada, enquanto o sinal de dólar corresponde ao final.

Exemplo

const onlyabc = /^abc$/; está correspondendo apenas com exatamente a string "abc" , que é diferente com /abc/ que retornará true quando a string for composta de abc qualquer lugar dentro da string.

Nota

  1. Usar /^abc/ sem colchetes significa que corresponde a qualquer string que comece com abc .
  2. Usando b como limite para o padrão w . Exemplo: /bsampleb/ return true apenas para sample .

O personagem Pipe |

O caractere de pipe (|) indica uma escolha entre o padrão à esquerda ou o padrão à direita

Exemplo

const bio = /bI am (Java|Javascript|Php) developerb;/

Problema prático – valide um número de telefone

Valide um número de telefone seguindo o formato ANN-NNN-NNNN , onde A está entre 2 e 9 e N está entre 0 e 9.

Vamos criá-lo passo a passo.

  1. Primeiro inicialize um literal RegEx //
  2. Queremos combinar a string inteira, então usaremos caracteres de contorno /^$/
  3. O primeiro elemento tem um intervalo de 2 a 9. /^[2-9]$/
  4. N deve ser dígito e de 0 a 9. /^[2-9]d{2}-d{3}-d{4}$/

Pratique problema – valide um email

Valide o email da empresa seguindo o formato _._@companyname.com.my , em que “_” é alfanumérico e apenas numérico. “Companyname” deve ser “companya”, “companyb”

Aqui está o passo para fazer isso

  1. Inicializar //
  2. Adicione o limite /^$/
  3. "_" É o alfabeto e o número, que produz /^w.w$/
  4. Adicione + porque depois de w , pode ter mais de um. /^w+.w+$/
  5. “Companyname” só é aceito com “companya” e “companya”. Então nós usamos o caractere pipe. /^w+.w+@(companya|companyb).com.my$/ .

Resumo

Noções básicas sobre expressões regulares é a chave para sobreviver como um desenvolvedor. É melhor escrever o RegExp e entender completamente o que ele faz.

Espero que você tenha achado este artigo útil! Você pode me seguir no Medium. Eu também estou no Twitter. Sinta-se livre para deixar qualquer dúvida nos comentários abaixo. Eu ficarei feliz em ajudar!

Recursos / Referências

[1]: Expressões regulares https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions

[2]: Capítulo 9 – Livro Eloquent JavaScript https://eloquentjavascript.net/09_regexp.html

[3]: Biblioteca de Expressões Regulares http://regexlib.com/Search.aspx?k=phone