Regex

Olá! (◠‿◠✿)

Este é um post que irá conter uma explicação do básico ao avançado sobre Regex, conhecido também como Expressões Regulares.

Para fazermos a seleção e validar nossa regex, iremos utilizar este site: https://regexr.com/. O mesmo código que iremos utilizar neste site para testar será o mesmo que iremos usar no nosso javascript!

O que é Regular Expression?

Regexp ou Regex são expressões utilizadas para realizarmos buscas ou substituições de padrões em strings. Os padrões devem ser colocados entre //. Geralmente vamos utilizá-las nos métodos .replace() e .split()

const frase = 'JavaScript'
const regexp = /a/
const novaFrase = frase.replace(regexp, 'b')
// JbvaScript

Praticamente todas as linguagens possuem uma implementação de regexp

Iniciando nossas buscas...

Entre naquele site e adicione algum trecho para começarmos os testes. O que coloquei foi este daqui:

Dizem que no início os anões foram feitos por Aulë na escuridão da Terra-média. Pois, tão grande era o desejo de Aulë pela vinda dos Filhos, para ter aprendizes a quem ensinar suas habilidades e seus conhecimentos, que não se dispôs a aguardar a realização dos desígnios de Ilúvatar. E Aulë criou os anões, exatamente como ainda são, porque as formas dos Filhos que estavam por vir não estavam nítidas em sua mente e, como o poder de Melkor ainda dominasse a Terra, desejou que eles fossem fortes e obstinados. Temendo, porém, que os outros Vallar pudessem condenar sua obra, trabalhou em segredo e fez em primeiro lugar os Sete Pais dos Anões num palácio sob as montanhas na Terra-média.

É abaixo da barra de Expression onde você digitará suas expressões pelo o que você deseja procurar. Note neste exemplo que eu digitei a palavra Terra

Ele selecionou todas as palavras do meu trecho que continham Terra. Só que na verdade ele não está selecionando a palavra Terra em si, ele tá selecionando um T maiusculo, que seguido dele tenha exatamente a letra a, depois r, r de novo e a letra a novamente. Um item seguido do outro!

Literal

Utilizar um caracter literal irá realizar uma busca especifica deste caracter

// Procura: J seguido de a, v e a
const regexp = /Java/

'JavaScript'.replace(regexp, 'Type')
// TypeScript

Flag: g

Lembra na imagem do primeiro exemplo que ele me retornou todas as seleções que continham Terra? Então, isso aconteceu porque se você ver novamente, há uma flag g depois do regexp.

As flags irão modificar como a expressão é interpretada. Uma das mais utilizadas é a g, que significa global, ou seja, retorna todos os resultados que estiverem dentro do padrão e não apenas o primeiro. A flag deve ser colocada no final da expressão

// Procura toda letra a
const regexp = /a/g

'JavaScript'.replace(regexp, 'i')
// JiviScript

Veja que com essa flag ele selecionou todas as letras a e não apenas a primeira!

Flag: i

Com o i informamos que devem ser ignoradas as diferenças entre maiúsculas e minúsculas. Isso significa que /a/ irá buscar por a e A

// Procura todo PE, Pe, pE e pe
const regexp = /Pe/gi

'Perdeu perdido'.replace(regexp, 'Ba')
// Bardeu Bardido

Para adicionar mais flags naquele site em que estamos testando nossas expressões, é só clicar no menu ao lado e marcar as opções que desejar.

Observe abaixo que foram selecionadas todas as letras t seguidas de e, sejam maiúsculas ou minusculas! :)

Flag: m

Com a flag m de multiline podemos informar que as buscas devem ocorrer em todas as linhas disponiveis

Character Class

Se colocarmos os caracteres entre colchetes, estamos definindo uma classe.

/[ab]/ irá procurar por a ou por b

// Procura todo a, A, i, I
const regexp = /[ai]/gi

'JavaScript'.replace(regexp, 'u')
// JuvuScrupt

Veja que está selecionado abaixo todo t e todo a que tiver, e não a palavra inteira.

Character Class e Especiais

Podemos utilizar caracteres que não são alfanuméricos dentro da classe. Mas fique atento, pois existem diversos casos especiais para os mesmos.

// Procura por - ou .
const regexp = /[-.]/g

'111.222-333-44'.replace(regexp, '')
// 11122233344

O ponto por exemplo é um carácter especial que vai selecionar TUDO na string!

Por isso que na classe ele se torna literal.

Outra forma de escapar o ponto é utilizando a barra desta maneira:

/\./gi

Ou seja, eu não quero que use o que ele faz de especial (que é selecionar tudo), eu quero que ele selecione só mesmo os pontos.

Você pode utilizar para outros caracteres por exemplo virgulas, colchetes, ponto e virgula...

Um ou Outro

Combine caracteres literais com uma classe para buscarmos variações: Ju[nl]ho busca Julho ou Junho

// Procura por B, seguido de r, a, seguido de s ou z, seguido de i, l
cont regexp = /Bra[sz]il/g

'Brasil é com z: Brazil'.replace(regexp, 'Prazer')
// Prazer é com z: Prazer

De A à Z

O traço - dentro de [ ] pode servir para definirmos um alcance.

[A-Z] irá buscar os caracteres de A à Z.

[0-9] busca de 0 à 9.

A tabela UNICODE é utilizada como referência para definir os caracteres dentro do alcance.

// Busca por itens de a à z
const regexp = /[a-z]/g
'JavaScript é a linguagem.'.replace(regexp, '0')
// J000S00000 é 0 000000000.

// Busca por itens de a à z e A à Z
const regexp = /[a-zA-Z]/g
'JavaScript é a linguagem.'.replace(regexp, '1')
// 1111111111 é 1 111111111.

// Busca por números de 0 à 9
const regexpNumero = /[0-9]/g
'123.333.333-33'.replace(regexpNumero 'X')
// XXX.XXX.XXX-XX

Negar

Utilizando o acento circunflexo podemos negar caracteres. Ou seja, pegue tudo que não seja [^a]

// Procura tudo que não estiver entre a e z
// note que estou usando essa regra para as letras minúsculas
const regexp = /[^a-z]/g

'Brasil é com z: Brazil'.replace(regexp, 'P')
// Prasil P com z: Prazil

Ponto .

O ponto . irá selecionar qualquer caracter, menos quebras de linha

// Procura todos os caracteres, menos quebras de linha
const regexp = /./g

'JavaScript é a linguagem.'.replace(regexp, '0')
// 000000000000000000000000

Escapar especiais

Caracteres especiais como o ponto . podem ser escapados utilizando a barra \

Assim este não terá mais a sua função especial e será tratado como literal. Lista de caracteres especiais:

+*?^$.[]{}()|/

// Procura todos os pontos
const regexp = /\./g
const regexpAlternativa = /[.]/g

'999.222.222.11'.replace(regexp, '-')
// 999-222-222-11

Word

O \w irá selecionar qualquer carácter alfanumérico e o underline.

É a mesma coisa que [A-Za-z0-9_]

// Procura todos os alfanuméricos
const regexp = /\w/g

'Guarda-chuva R$ 23,00.'.replace(regexp, '-')
// ------------ -$ --,--.

Também temos o \d que seleciona tudo que for digito

e o \D que seleciona tudo que NÃO for digito

O \s seleciona tudo que for espaço, quebra de linha e tab ^-^

e o \S nega tudo que for espaço, tab e quebra de linha.

Tem um macetinho que você consegue selecionar tudo sem ser com o ponto. Neste caso abaixo eu to selecionando tudo que não for espaço e tudo que for espaço

Quantificador

É possível selecionar caracteres seguidos, como por exemplo, /bbb/g irá selecionar apenas bbb. Com as chaves podemos indicar a repetição /b{3}/g. Agora ele está fazendo uma seleção completa, e não caracter por caracter.

// Procura por 4 letras a seguidas
const regexp = /aaaa/g
const regexpAlternativo = /a{4}/g

'Vaaaai ali por favor.'.replace(regexp, 'a')
// Vai ali por favor.

Podemos informar o Min e o Max do quantificador.

/a{2,4}/g vai selecionar quando aparecer a duas vezes ou até 4 vezes.

/a{2,}/g irá selecionar quando repetir duas ou mais vezes

// Procura digitos seguidos de 2 á 3
const regexp = /\d{2,3}/g
'222.333.222.42'.replace(regexp, 'X')
// X.X.X.X

// Procura letras seguidas com 1 caracter ou mais
const regexpLetras = /\w{1,}/g
'A melhor linguagem é JavaScript'.replace(regexpLetras, 'X')
// X X X é X

Mais +

O sinal de + significa que devemos selecionar quando existir pelo menos uma ou mais ocorrências.

// Procura digitos em ocorrência de 1 ou mais
const regexp = /\d+/g
'222.333.222.42'.replace(regexp, 'X')
// X.X.X.X

// Procura palavra que começa com a letra d, seguido por uma ou mais letras
const regexpLetras = /d\w+/g
'Dígitos, dados, desenho, Dito, d'.replace(regexpLetras, 'X')
// Dígitos, X, X, Dito, d

Asterisco *

O sinal * significa que devemos selecionar quando existir zero ou mais ocorrências

// Procura toda palavra que começa com a letra d, seguido por zero ou 
// mais letras
const regexp = /d\w*/g
'Dígitos, dados, desenho, Dito, d'.replace(regexp, 'X')
// Dígitos, X, X, Dito, X

Opcional ?

O sinal ? significa que o caracter é opcional, pode ou não existir

// Procura por regex com p opcional
const regex = /regexp?/g
'Qual é o certo, regex ou regexp?'.replace(regex, 'Regular Expression')
// Qual é o certo, Regular Expression ou Regular Expression?

Alternado |

O sinal | irá selecionar um ou outro

// Procura por java ou php (case insensitive)
const regexp = /java|php/gi

'PHP e Java são linguagens diferentes'.replace(regexp, 'X')
// X e X são linguagens diferentes

Word Boundary \b

O sinal \b irá indicar que pretendemos fazer uma seleção que deve ter inicio e fim de não caracteres \w

// Procura por java (case insensitive)
const regexp = /java/gi
'Java não é JavaScript'.replace(regexp, 'X')
// X não é XScript

// Procura por java (case insensitive)
const regexpBoundary = /\bjava\b/gi
'Java não é JavaScript'.replace(regexpBoundary, 'X')
// X não é JavaScript

// Procura digitos em sequencia quem estejam isolados
const regexDigito = /\b\d+\b/gi
'O Restaurante25 na rua 3 custa R$ 25,00'.replace(regexpDigito, 'X')
// O Restaurante25 na rua X custa R$ X,X

Not Word Boundary \B

É o contrário do \b

const regexpDigito = /\B\d+\B/gi

'11_22 33-44 55é66 77e88'.replace(regexpDigito, 'X')
// 1X_X2 33-44 55é66 7XeX8

Anchor beginning

Com o ^ é possível informar que a busca deve ser iniciada no inicio da linha

// Procura sequencia de alfanumericos no inicio da linha
const regexp = /^\w+/g

`amanda@gmail.com
allonsmandy@gmail.com`.replace(regexp, 'X')
// X@gmail.com
// allonsmandy@gmail.com

Anchor end

Com o $ é possível informar que a busca deve ser iniciada no final da linha

// Procura sequência de alfanumericos no final da linha
const regexp = /\w+$/g

`amanda@gmail.com
allonsmandy@gmail.com`.replace(regexp, 'X')
// amanda@gmail.com
// allonsmandy@gmail.X

Line feed \n

O \n irá selecionar o final de uma linha quando criamos uma nova

const regexp = /\n/g
`amanda@gmail.com\nallonsmandy@gmail.com`.replace(regexp, '---')
// amanda@gmail.com---allonsmandy@gmail.com

`amanda@gmail.com
allonsmandy@gmail.com`.replace(regexp, 'X')
// amanda@gmail.comXallonsmandy@gmail.com

\t seleciona tabs

Unicode \u

O \u irá selecionar o respectivo caracter unicode, de acordo com o código passado em \uXXXX. Ex: \u0040 seleciona o @

// Procura @ ou ©
const regexp = /\u0040|\u00A9/g

'amanda@gmail.com ©'.replace(regexp, '---')
// amanda@gmail.com ---

Fazendo substituições

Referência da seleção

É possível utilizarmos o $& durante o momento da substituição para fazermos uma referência à seleção

// Procura por Java
const regexp = /Java/g

'PHP e Java são linguagens diferentes'.replace(regexp, '--$&Script')
// PHP e --JavaScript são linguagens diferentes
// &$ erá igual a Java

Grupo de captura

É possivel definirmos diferente grupos de captura, que poderaõ ser referenciados durante a substituição. Basta envolvermos um grupo entre ( ) parentêses. A referência se cada grupo será feita com $n, sendo o primeiro $1

// Procura pela sequencia alfanumerica, seguida de @, seguido de 
// alfanumerico ou .

const regexp = /(\w+)@[\w.]+/g
'amanda@email.com'.replace(regexp, '$1@gmail.com')
// amanda@gmail.com

Não use este regex para emails! Ele falha em alguns casos.

Mais de um grupo

Podemos definir quantos grupos de captura quisermos

// Procura pela sequencia alfanumerica, seguida de , seguido espaço de 
// sequencia alfanumerica
const regexp = /(\w+),\s(\w+)/g
'Almeida, Amanda'.replace(regexp, '$2 $1')
// Amanda Almeida

Mais do que apenas captura

Um grupo também serve para agruparmos uma sequencia de caracteres que queremos em repetição

// Procura por qualquer sequencia de ta
const regexp = /(ta)+/gi
'Tatata, tata, ta'.replace(regexp, 'Pá')
// Pá, Pá, Pá

Positive Lookahead

Faz a seleção dos itens que possuírem o padrão dentro de (?=) à sua frente. Apesar de utilizar ( ) parenteses lookahead não captura grupo!

// Procura digitos em sequencia, que possuirem px, sem selecionar o px
const regexp = /\d(?=px)/g
'2em, 4px, 5%, 2px, 1px'.replace(regexp, 'X')
// 2rem, Xpx, 5%, Xpx, Xpx

Negative lookahead

Faz a seleção dos itens que não possuírem o padrão dentro de (?!) à sua frente

// Procura os digitos que não possuirem px sem selecionar o restante
const regexp = /\d(?!px)/g
'2em, 4px, 5%, 5px 1px)'.replace(regexp, 'X')
// Xem, 4px, X%, 5px, 1px

Positive Lookbehind

Faz a seleção dos itens que possuírem o padrão dentro de (?<=) atrás dos mesmos

// Procura por digitos que possuirem R$ na frente dos mesmos
const regexp = /(?<=R\$)[\d]+/g
'R$99, 100, 200, R$20'.replace(regexp, 'X')
// R$X, 100, 200, R$X