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:
1
2
|
var regular_expression = new RegExp('valor');
|
Ou se preferir, utilize um literal com duas barras antes e depois da expressão regular (/expressão/):
1
2
3
|
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:
1
2
3
4
5
6
7
8
9
10
|
// 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 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 parteminha_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:
| MODIFICADOR | DESCRIÇÃO |
|---|---|
| i | Desconsidera letras maiúsculas e minúsculas |
| g | Verifica toda a string (global) |
| m | Checa todas as linhas da string (multiline) |
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:
1
2
3
4
|
// Expressão regular
var minha_expressao = new RegExp('Valor', 'ig');
|
Se criar o valor literalmente, deve passar os modificadores após a última barra:
1
2
3
4
|
// 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// 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.
1
2
3
4
5
6
7
8
9
10
|
// 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):
1
2
3
|
// 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.
1
2
3
4
5
6
|
// 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:
1
2
|
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:
1
2
3
4
5
|
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 esearch 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:
1
2
3
4
5
6
7
8
9
10
11
|
// 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).
1
2
3
4
5
6
7
|
// 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:
1
2
|
minha_string.replace(minha_expressao, 'VALOR')
|
Para substituir a expressão encontrada pela palavra "VALOR". O resultado será:
1
2
3
|
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:
1
2
3
4
5
6
7
8
9
10
|
// 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 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:
1
2
3
4
5
6
7
8
9
10
|
// 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:
1
2
3
4
5
6
7
8
9
|
// 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:
1
2
3
4
|
// 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:
1
2
3
4
5
6
7
8
9
|
// 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:
| CARACTERE | DESCRIÇÃO |
|---|---|
| w | Encontra um caractere alfanumérico. |
| W | Encontra um caractere não alfanumérico. |
| d | Um número |
| D | Qualquer caractere que não seja um número |
| s | Um espaço |
| S | Qualquer caractere que não seja um espaço |
| b | Encontra um caractere no começo ou fim da palavra |
| B | Encontra um caractere no meio da palavra |
| Caractere nulo | |
| n | Encontra uma nova linha |
| f | Encontra uma quebra de página |
| r | Encontra uma nova linha com CR |
| t | Encontra um tab |
| v | Encontra um tab vertical |
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 (?).
| CARACTERE | DESCRIÇÃO |
|---|---|
| Asterisco (*) | Um caractere precedente zero ou mais vezes |
| Sinal de mais (+) | Um caractere precedente um ou mais vezes |
| Ponto de interrogação (?) | Um ou nenhum caractere |
| Ponto (.) | Um caractere apenas |
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:
1
2
3
4
5
6
7
8
9
|
// 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:
1
2
3
4
5
6
7
8
9
|
// 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:
1
2
3
4
5
6
7
8
9
|
// 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:
1
2
3
4
|
// 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.
Referência
0 comentários:
Postar um comentário