Trabalhando com expressões regulares em Javascript

Nenhum produto encontrado nessa seleção.

Expressões regulares em Javascript (ou em qualquer linguagem de programação) são uma forma para encontrar e/ou substituir valores de uma determinada string.

Pessoalmente, acho uma das partes mais "divertidas" da programação, e o que mais me ajuda quando preciso alterar dados on-the-fly de partes do meu código ou de texto que alguém escreve em uma página HTML.

Em Javascript, especificamente, podemos utilizar três propriedades do objeto String para trabalhar com o objeto RegExp (de expressão regular): replace(), match() e search().

Veremos mais sobre o objeto RegExp e sobre as propriedades replace(), match() e search() abaixo.

RegExp e Expressões regulares em Javascript

Você pode criar uma expressão regular explicitamente em Javascript utilizando o objeto RegExp, porém, também pode criá-la utilizando uma expressão literal.

Para criar uma expressão regular utilizando o objeto RegExp, utilize o seguinte código:

var regular_expression = new RegExp('valor');

Ou se preferir, utilize um literal com duas barras antes e depois da expressão regular (/expressão/):

var regular_expression = /valor/;

O método literal é o método que eu sempre utilizo.

Em ambos os métodos, eu estaria procurando pela palavra "valor" em uma string, por exemplo:

// Expressão regular
var regular_expression = /valor/;

// Variável do tipo string
var variable = 'Oi, sou uma variável. n ' + 
'Sei que tenho um valor';

// Retorna true, pois existe a palavra valor na string
alert( regular_expression.test( variable ) );

Métodos test e exec do objeto RegExp

O objeto RegExp contém apenas dois métodos para serem utilizados, exec() e test(), cada um para uma função diferente.

test()

O método test() verifica se o valor foi encontrado na string e retorna um valor booleano (true ou false) para testes condicionais, por exemplo:

// Expressão regular
var minha_expressao = /valor/;

// Variável do tipo string
var minha_string = 'Oi, sou uma variável do tipo string. n ' + 
'Sei que tenho um valor';

// Verifica se a palavra existe na string
if ( minha_expressao.test( minha_string ) ) {
	// Alerta se existir
	alert('Existe a palavra valor na string.');
} else {
	// Alerta se não existir
	alert('Não encontrei a palavra valor na string.');
}

No trecho acima, "testei" para ver se a palavra "valor" (com letras minúsculas) existe na string, como existe, a parte minha_expressao.test( minha_string ) irá retornar um valor booleano "true" e o alerta falando que a palavra existe será exibido.

As expressões regulares diferenciam letras maiúsculas de letras minúsculas, ou seja, "valor" é totalmente diferente de "Valor". Porém, você pode utilizar modificadores para determinar que a expressão regular não deve diferenciar letras maiúsculas de minúsculas.

Dentre os modificadores que podemos utilizar, temos os seguintes:

Os modificadores são extremamente importantes para que sua expressão regular funcione de maneira adequada, e você sempre vai utilizá-los, por isso, vou detalhar os três mais um pouco para que você entenda.

O modificador i força o processo da expressão regular a desconsidera letras maiúsculas e minúsculas, assim, "Valor" e "valor" serão a mesma coisa.

O modificador g faz com que o processo da expressão regular seja global, ou seja, encontra todas as ocorrências do valor determinado na string. Se você não utilizar este modificador, o processo irá parar quando encontrar o primeiro valor correspondente à sua expressão regular.

O modificador m (multiline) permite que você utilize outros caracteres específicos de início (^) e fim ($) de linha. Vou falar sobre eles mais adiante neste artigo.

Se você criar o objeto RegExp explicitamente, deve passar os modificadores como o segundo parâmetro da função, por exemplo:

// Expressão regular
var minha_expressao = new RegExp('Valor', 'ig');

Se criar o valor literalmente, deve passar os modificadores após a última barra:

// Expressão regular
var minha_expressao = /Valor/ig;

exec()

Um pouco diferente de test(), exec() retorna o valor pesquisado na posição 0 de um array, além disso, ainda retorna uma propriedade "index" ou "lastIndex" com a última posição onde o valor foi encontrado. Você pode utilizar um laço while para exibir a última posição onde o valor foi encontrado.

// Expressão regular
var minha_expressao = /a/ig;

// Variável do tipo string
var minha_string = 'Oi, sou uma variável do tipo string. n ' + 
'Sei que tenho um valor';

// Variável para receber os valores
var resultado = minha_expressao.exec( minha_string );

// Valor pesquisado
document.write('Encontrei o valor: ' + resultado[0] + '<br>');

// Laço para exibir as posições
while ( resultado ) {
	document.write( 'Posição: ' + resultado.index + '<br>' );
	resultado = minha_expressao.exec( minha_string );
}

No trecho de código acima, estamos pesquisando por todas as ocorrências (g) do caractere a maiúsculo ou minúsculo (i) dentro da variável minha_string.

// Expressão regular
var minha_expressao = /a/ig;

// Variável do tipo string
var minha_string = 'Oi, sou uma variável do tipo string. n ' + 
'Sei que tenho um valor';

// Variável para receber os valores
var resultado = minha_expressao.exec( minha_string );

Em seguida, exibimos o resultado encontrado (que se encontra na chave 0 do array gerado):

// Valor pesquisado
document.write('Encontrei o valor: ' + resultado[0] + '<br>');

Por fim, utilizamos um laço while para exibir as posições em que o valor foi encontrado.

// Laço para exibir as posições
while ( resultado ) {
	document.write( 'Posição: ' + resultado.index + '<br>' );
	resultado = minha_expressao.exec( minha_string );
}

Como estamos testando novamente o resultado a cada volta do laço:

resultado = minha_expressao.exec( minha_string );

Ele será atualizado para a última posição em que o valor foi encontrado. Quando as posições acabarem, um valor nulo é atribuído ao array "resultado" para que o laço termine.

Como resultado, teremos o seguinte:

Encontrei o valor: a
Posição: 10
Posição: 13
Posição: 57

Métodos replace, match e search

Apesar dos métodos do objeto RegExp serem bastante úteis, podemos utilizar os métodos do objeto string replace, match e search para substituir, encontrar valores e encontrar posições de valores em uma string utilizando expressões regulares.

Replace()

O método replace() pode ser utilizado para substituir as ocorrências de uma expressão regular em uma variável, por exemplo:

// Expressão regular
var minha_expressao = /valor/ig;

// Variável do tipo string
var minha_string = 'Oi, sou uma variável do tipo string. n ' + 
'Sei que tenho um valor';

document.writeln( minha_string.replace(minha_expressao, 'VALOR') );
// Resultado: Oi, sou uma variável do tipo string. 
// Sei que tenho um VALOR 

No trecho acima, estou pesquisando pela palavra "valor" em toda a variável (g), com letras maiúsculas ou minúsculas (i).

// Expressão regular
var minha_expressao = /valor/ig;

// Variável do tipo string
var minha_string = 'Oi, sou uma variável do tipo string. n ' + 
'Sei que tenho um valor';

Em seguida, utilizo o trecho a seguir:

minha_string.replace(minha_expressao, 'VALOR')

Para substituir a expressão encontrada pela palavra "VALOR". O resultado será:

Oi, sou uma variável do tipo string. 
Sei que tenho um VALOR 

Match()

Match simplesmente encontra as ocorrências dependendo da sua expressão regular, por exemplo:

// Expressão regular
var minha_expressao = /a/ig;

// Variável do tipo string
var minha_string = 'Oi, sou uma variável do tipo string. n ' + 
'Sei que tenho um valor';

document.writeln( minha_string.match(minha_expressao) );
// Resultado: a,a,a (um array) 

É importante lembrar que match() retorna um array com todas as ocorrências da expressão regular, e você pode utilizar este array como quiser.

// Expressão regular
var minha_expressao = /a/ig;

// Variável do tipo string
var minha_string = 'Oi, sou uma variável do tipo string. n ' + 
'Sei que tenho um valor';

// Configura uma variável para receber o valor
var resultado = minha_string.match( minha_expressao );

alert( 'Encontrei ' + resultado.length + ' valores' );
// Resultado: Encontrei 3 valores

Search()

Search() procura por um valor dentro de uma string e retorna o valor da posição em que ela foi encontrada. Se nada for encontrado, retorna -1.

Exemplo:

// Expressão regular
var minha_expressao = /a/ig;

// Variável do tipo string
var minha_string = 'Oi, sou uma variável do tipo string. n ' + 
'Sei que tenho um valor';

alert( minha_string.search( minha_expressao ) );
// Resultado: 10

O resultado sendo 10, indica que a primeira ocorrência da nossa expressão regular foi encontrada na posição 10 da string.

Aprendendo expressões regulares

Até agora, passei vários tipos de expressões regulares onde você sabe exatamente qual é o valor que você está procurando, porém, pode acontecer casos em que você não sabe exatamente o valor que você quer encontrar, assim podemos utilizar uma espécie de máscara para encontrar o que desejamos.

Para isso, podemos utilizar vários caracteres programados exatamente para encontrar o que desejamos.

Nos exemplos a seguir, vamos utilizar replace() para substituir os caracteres que estamos procurando para "#".

Chaves [ e ]

As chaves podem ser utilizadas para especificar um range de caracteres, por exemplo, de A a Z, de 0 a 9 e assim por diante, por exemplo:

// Expressão regular
var minha_expressao = /[a-z]/ig;

// Variável do tipo string
var minha_string = 'ABCD 0123456789';

alert( minha_string.replace( minha_expressao, '#' ) );
// Resultado: #### 0123456789

A expressão regular /[a-z]/ig encontra todas as ocorrências de letras de A até Z em uma string.

O mesmo poderia ser atingido com o seguinte:

// Expressão regular
var minha_expressao = /D/g;

O D representa qualquer caractere que não seja um número, porém, o espaço também seria substituído para #.

Se você quiser encontrar todos os números, pode utilizar:

// Expressão regular
var minha_expressao = /d/g;

// Variável do tipo string
var minha_string = 'ABCD 0123456789';

alert( minha_string.replace( minha_expressao, '#' ) );
// Resultado: ABCD ##########

O caractere d significa todos os números. Ou o mesmo que [0-9].

Letras com

Veja a lista de letras que podem ser utilizadas com a barra invertida () na tabela abaixo:

Caracteres ., +, * e ?

Quatro dos caracteres de expressões regulares são utilizados para encontrar ocorrências específicas de caracteres em uma string: o ponto (.), o asterisco (*), o sinal de + (+) e o ponto de interrogação (?).

Com isso podemos utilizar duas combinações de caracteres interessantes, a greedy match (.*) e a lazy star (.*?).

Em greedy match (.*), devido a um ponto (.) poder representar qualquer caractere, o asterisco encontra as correspondências até a última ocorrência de um padrão. Por exemplo:

// Expressão regular
var minha_expressao = /<p>.*</p>/;

// Variável do tipo string
var minha_string = '<h1>Meu texto HTML</h1><p>parágrafo</p><p>parágrafo</p>';

alert( minha_string.replace( minha_expressao, '#' ) );
// Resultado: <h1>Meu texto HTML</h1>#

Neste caso, utilizei o .* para substituir qualquer <p>qualquer coisa</p>.

O padrão lazy star (.*?), faz com que a pesquisa termine na segunda ocorrência:

// Expressão regular
var minha_expressao = /<p>.*?</p>/;

// Variável do tipo string
var minha_string = '<h1>Meu texto HTML</h1><p>parágrafo</p><p>parágrafo</p>';

alert( minha_string.replace( minha_expressao, '#' ) );
// Resultado: <h1>Meu texto HTML</h1>#<p>parágrafo</p>

Ambos são padrões bastante úteis de se utilizar.

Você pode encontrar mais exemplos em JavaScript RegExp Object.

Exemplos avançados e mais detalhes

Veja abaixo alguns exemplos mais avançados sobre expressões regulares:

// Expressão regular
var minha_expressao = /d{2}/d{2}/d{4}/g;

// Variável do tipo string
var minha_string = 'Hoje é 20/04/2014. Mas ontem foi 19/04/2014.';

alert( minha_string.match( minha_expressao ) );
// Resultado: Array('20/04/2014', '19/04/2014');

Perceba o formato de data que utilizamos no Brasil (20/04/2014). Este formato é constituído de um número de dois números, uma barra, mais dois números, outra barra, quatro números. Podemos converter isso na seguinte expressão regular: /d{2}/d{2}/d{4}/g.

• d – Qualquer número
• {2} De dois caracteres
• / – Uma barra literal
• d – Qualquer número
• {2} – De dois caracteres
• / – Uma barra literal
• d – Qualquer número
• {4} – De quatro caracteres

Você pode especificar a quantidade de caracteres que deseja utilizando colchetes (exemplo: {2}). A barra invertida serve como caractere de escape para qualquer caractere que não poderia ser utilizado como literal em uma expressão regular.

Este exemplo é falho porque uma pessoa poderia utilizar uma data 99/99/9999 e sua expressão regular aceitaria, para corrigir isso, eu faria o seguinte:

// Expressão regular
var minha_expressao = /[0-3]{1}[0-9]{1}/[0-1]{1}[0-9]{1}/d{4}/g;

Neste caso limitamos bastante nossos números.

• [0-3]{1} – Qualquer número de 0 a 3 (apenas um número)
• [0-9]{1} – Qualquer número de 0 a 9 (apenas um número)
• / – Uma barra literal
• [0-1]{1} – Qualquer número de 0 a 1 (Apenas um número)
• [0-9]{1} – Qualquer número de 0 a 9 (apenas um número)
• / – Uma barra literal
• d{4} – Qualquer número de quatro dígitos

Apesar de a data 39/19/2014 ainda ser considerada correta por esta expressão regular, já reduzimos bastante o risco da data 99/99/9999 ser válida.

Concluindo

Expressões regulares podem ser bastante confusas no início, porém, você vai aprendendo enquanto vai as utilizando.

Minha recomendação é que você faça testes com vários tipos de strings para encontrar determinados valores. Se tiver dúvidas, basta perguntar nos comentários.

Veja mais um link útil que ajudou a construir este artigo:

• Regular Expressions – MDN

Espero que ajude você também.

Outras aulas

Caso tenha perdido a aula anterior, segue o link:

• Objetos nativos Javascript (String, Number e Boolean)

Próxima aula:

• Objeto Date em Javascript (Datas)

Caso queira visualizar todas as aulas dessa sessão em ordem cronológica invertida:

• Curso de Javascript