Na coluna desta semana vamos abordar um assunto muito procurado pelos usuários de Javascript: as expressões regulares (conhecida como Regular Expression), que são muito usadas para a validação de entrada de dados por parte do usuário. Vamos aprender como criá-las e usá-las em Javascript.
Neste artigo eu vou usar tanto a palavra expressões regulares como Regular Expression (inglês). Eu vou usar em português para facilitar, mas esse nome não existe em português.
As expressões regulares são padrões utilizados para encontrar combinações de caracteres em Strings. É uma ferramenta muito poderosa porque consegue resumi em algumas linhas de código pesquisas altamente complexas. O principal uso de expressões regulares em Javascript seria na validação de dados.
Em JavaScript, expressões regulares também podem ser tratadas como um objeto. Esses padrões são usados com os métodos exec e test do objeto RegExp, e com os métodos match, replace, search, e split do objeto String.
Algumas das traduções deste artigo não são totalmente fieis. Espero que consigam entender o que a mensagem está passando.
Entendendo as Expressões Regulares
As expressões regulares podem ser criadas de duas formas:
- Escrevendo uma expressão regular:
seek = /padrao/
padrao é a string padrão para ser usada na pesquisa.
- Criando uma instancia do objeto RegExp:
seek = new RegExp("padrao");
padrao é a string padrão para ser usada na pesquisa.
Regular Expression é um padrão de texto que consiste de simples caracteres (da letra a até z, ou de 1 até 9) e de uma combinação de caracteres simples e especiais.
Os padrões para a pesquisa de caracteres estão divididos em categorias. Segue abaixo uma lista dos grupos e respectivos caracteres especiais.
Busca posicionada
Símbolo |
Descrição |
Exemplo |
^ |
Busca somente no início da string |
/^The/ encontra "The" em "The night" mas não em "In The Night" |
$ |
Busca somente no fim da string |
/and$/ encontra "and" em "Land" mas não em "landing" |
\b |
Encontra em qualquer parte da string |
/ly\b/ encontra "ly" em "This is really cool." |
\B |
Encontra qualquer parte que não esteja limitada |
/\Bor/ encontra “or” em "normal" mas não em "origami." |
Literais
Símbolo |
Descrição |
Alfanumerica |
Todos os caracteres alfabéticos e numerais se encontram literalmente. Então /2 dias/ encontrarão "2 days" dentro da string |
\n |
Encontra o caractere de nova linha |
\f |
Encontra o caractere de nova página |
\r |
Encontra o caractere de retorno de carro |
\t |
Encontra o caractere de tabulação horizontal |
\v |
Encontra o caractere de tabulação vertical |
\xxx |
Encontra o caractere ASCII expresso por
um número octal xxx. |
\xdd |
Encontra o caractere ASCII expresso por
um número hexadecimal dd. |
\uxxxx |
Encontra o caractere ASCII expresso por
UNICODE xxxx. |
A barra invertida (\) é também usada quando você deseja encontrar um caractere especial literalmente. Por Exemplo, se você deseja encontrar o símbolo "$" ao invés de ter um sinal no final da string, use a barra invertida: /\$/
Classes de Caracteres
Símbolo |
Descrição |
Exemplo |
[xyz] |
Encontra qualquer caractere que estiver dentro do grupo. Você pode usar hífen para denotar escala. Por Exemplo. /[a-z]/ encontra qualquer letra do alfabeto alphabet, /[0-9]/ encontra qualquer dígito |
/[AN]BC/ encontra "ABC" e "NBC" mas nao “BBC" desde que a letra “B” nao estao nogrupo. |
[^xyz] |
Encontra qualquer caractere que não
estiver dentro do grupo. O circunflexo indica que nenhuma
caractere deve estar na string. |
/[^AN]BC/ encontra "BBC" mas nao "ABC" ou "NBC". |
. |
(Ponto). Encontra qualquer caractere exceto o caractere de nova linha ou terminador de linha Unicode |
/b.t/ encontra "bat", "bit", "bet" e assim por diante |
\w |
Enconta qualquer caractere alfanumérico incluindo underscore. Equivalente a [a-zA-Z0-9_] |
/\w/ encontra "200" em "200%" |
\W |
Encontra qualquer caractere que não se encontra na classe dos alfanuméricos. Equivalente a [^a-zA-Z0-9_] |
/\W/ encontra "%" em "200%" |
\d |
Encontra qualquer dígito. Equivalente a [0-9] |
|
\D |
Encontra qualquer caractere que não seja um digito. Equivalente a [^0-9] |
/\D/ matches "No" in "No 342222" |
\s |
Encontra qualquer caractere que equivale a um espaço. Equivalente a [ \t\r\n\v\f] |
|
\S |
Encontra qualquer caractere que não equivale a um espaço. Equivalent to [^ \t\r\n\v\f] |
|
Repetição
Símbolo |
Descrição |
Exemplo |
{x} |
Encontra exatamente x ocorrências na regular expression |
/\d{5}/ encontra 5 digitos |
{x,} |
Encontra x ou mais ocorrências na regular expression |
/\s{2,}/ encontra no minimo 2 caracteres de espaço em branco |
{x,y} |
Encontra x para y numero de ocorrências na regular expression |
/\d{2,4}/ encontra no minimo 2 mas nao mais que 4 digitos |
? |
Encontra zero ou nenhuma ocorrência. Equivalente a {0,1} |
/a\s?b/ encontra "ab" ou "a b". |
* |
Encontra zero ou mais ocorrências. Equivalente a {0,} |
/we*/ encontra "w" em "why" e "wee" em "between", mas nao em "bad" |
+ |
Encontra uma ou mais ocorrências. Equivalente a {1,} |
/fe+d/ encontra tanto em "fed" quanto em "feed" |
Alternação & Agrupamento
Símbolo |
Descrição |
Exemplo |
( ) |
Agrupamento de caracteres para criar uma cláusula de condição. Pode estar aninhado |
/(abc)+(def)/ encontra um ou mais ocorrencias de "abc" seguido por uma ocorrencia de "def" |
| |
Combina cláusulas de condições dentro de uma regular expression e então encontra qualquer uma das cláusulas. Similar à expressão "OR" |
/(ab)|(cd)|(ef)/ encontra "ab" ou "cd" ou "ef". |
Backreferences
Símbolo |
Descrição |
Exemplo |
( )\n |
Encontra uma cláusula entre parênteses. n é o número de cláusulas para a esquerda da backreference |
(\w+)\s+\1 encontra quaisquer palavras que ocorra duas vezes na mesma linha, como "hubba hubba." O \1 denota que a primeria palavra depois do espaço deve encontrar a porção da string que foi encontrada no último commando dentro de parênteses. Se existisse mais de um comando dentro de parênteses, você deve usar \2 ou \3 para encontrar o apropriado agrupamento da esquerda da backreference. Até 9 backreferences podem ser usadas no padrão da string |
Modificadores de Padrões
Em adição aos caracteres padrões para buscar, você pode usar switches para fazer uma pesquisa global, case- insensitive (ignora minúsculas e maiúsculas) ou ambas.
Propriedade |
Descrição |
Exemplo |
i |
Ignora se é minúscula ou maiúscula |
/The/i encontra "the" e "The" e "tHe" |
g |
Pesquisa Global para todas as ocorrências do padrão |
/ain/g encontra os dois "ain" em "No pain no gain", ao inves de apenas o primeiro |
gi |
Pesquisa Global, e ignorar caso |
/it/gi encontra todos "it" em
"It is our IT department" |
lastIndex |
Armazena a posição da última pesquisa bem sucessida realizada na string. Se nada for encontrado, a propriedade lastIndex será colocada como –1 |
|
$n |
n representa o numero de 1 a 9 |
|
source |
Armazena a copia do padrão da regular expression |
|
Entendendo os métodos usados pelas expressões regulares
Método |
Descrição |
exec |
Um método RegExp que executa pesquisas em uma string. O mesmo retorna um array das informações obtidas |
test |
Um método RegExp que testa uma pesquisa em uma string. O mesmo retorna true ou false |
match |
Um método de String que executa uma pesquisa em uma string. O mesmo retorna um array das informações obtidas ou nulo se nada for encontrado |
search |
Um método de String que testa uma pesquisa em uma string. O mesmo retorna o índice do resultado, ou -1 se a pesquisa falir |
replace |
Um método de String que executa uma pesquisa em uma string, e substitui o resultado encontrado por uma substring |
split |
Um método de String que usa uma regular expression ou uma string para quebrar uma string em uma array de substrings |
Quando você quer saber se o padrão foi encontrado na string, use o método test ou search; para maiores informações (mas com execução mais lenta) use o método exec ou match. Se você usar exec ou match e se obter sucesso, esses métodos retornaram um array e atualizaram as propriedades do objeto regular expression associado e também de objetos pré-definidos, RegExp. Se a pesquisa falir, o método exec retornará nulo (no qual converterá para false).
Programando Expressões Regulares
A partir do momento que sabemos quais caracters desejamos devemos partir para a criação do padrão que sera utilizado para pesquisar a String.
Vamos, a partir de agora, criar alguns exemplos práticos de como utilizar Expressões Regulares.
No nosso primeiro exemplo vamos pesquisar na string um padrão que é composto da palavra “de”. O O resultado obtido nos mostrará onde se encontra a primeira e a ultima ocorrência das pesquisas.
Exemplo:
1 <SCRIPT
LANGUAGE="JavaScript">
2 padrao=/de/g;
3 //
padrao = new RegExp("de","g");
4 texto
= "Brasil ganha a medalha de ouro no volei de praia.";
5 document.write("<b>padrao
» </b>" + padrao + "<br>");
6 document.write("<b>Texto
utilizado » </b>" + texto + "<br>");
7 document.write("O
padrao utilizado foi encontrado no <b>" + texto.search(padrao)
+ "º </b>caractere.<br>")
8 padrao.exec(texto);
9 document.write("O
ultimo valor encontrado e" o caractere<b> " + padrao.lastIndex
+ "º </b>.");
10 </SCRIPT>
Linha 2 – Declaração da variável padrão com a seqüência de caracteres a serem utilizados nas pesquisas.
Linha 3 – Tem o mesmo funcionamento da linha 2, porém vai criar uma instância do objeto RegExp com a seqüência de caracteres.
Linha 7 – Utilização do método search() para encontrar o padrao na variável texto.
Linha 8 – Utilização do método exec para pesquisar a seqüência padrão na variável texto.
Linha 9 – Utilização da propriedade lastIndex para retornar a última vez que a seqüência de caracteres foi encontrada na variável texto.
Clique aqui para ver o exemplo 01.
Exemplo 02
Este exemplo é um pouco mais complexo. Ele valida a entrada de dados por parte do usuário. O usuário vai digitar um número de telefone como proposto no exemplo.
1 <SCRIPT
LANGUAGE = "JavaScript">
2 padrao
= /\(?\d{3}\)?\d{3}-\d{4}/;
3 function
testInfo(x) {
4 a
= x.Phone.value;
5 OK
= padrao.exec(a);
6 if
(!OK){
7 window.alert
("Este numero de telefone esta incorreto!");
8 x.Phone.focus();
9 }
else {
10 window.alert
("Obrigado, seu numero de telefone e" » " + OK[0]);
11 }
12 }
13 </SCRIPT>
Linha 2 – Declaração da variável padrao com a seqüência de caracteres a serem utilizados nas pesquisas.
Linha 3 – Declaração da função testInfo() que recebe um parâmetro com o objeto form a ser utilizado
Linha 4 – Declaração da variável a que armazena o valor do parâmentro x (o formulário) seguido do nome do campo e respectivo valor
Linha 5 – Declaração da variável OK que recebe o valor da verificação se o padrão re está contido na variável a
Linha 6 a 11 – Verificação da negação da variável OK. Se retornar true, uma caixa de mensagem será mostrada com uma mensagem de erro e o campo em questão receberá o foco. Se retornar false uma caixa de mensagem será mostrada com uma mensagem e o número do telefone.
Com todo o código Javascript criado, vamos à criação do código HTML.
1 Digite um número de telefone,
como por exemplo » (201)465-7899.
2 <FORM onSubmit="return false;">
3 <INPUT TYPE="text" NAME="Phone"
onChange="testInfo(this.form);">
4 <input type="button" value="valida"
onClick="testInfo(this.form);">
5 </FORM>
Linha 2 – O evento onSubmit retorna false para o formulário não seja enviado.
Linha 3 – O evento onChange da caixa de texto chama a função testInfo() e envia como parâmetro o objeto form.
Linha 4 – O evento onClick do botão chama a função testInfo() e envia como parâmetro o objeto form.
Clique aqui para ver o exemplo 02.
Exemplo 03
Neste exemplo vamos trabalhar com mais métodos e entender onde podemos chegar com apenas algumas linhas de código. Aqui nos dividimos uma string, colocamos seu resultado em uma matriz e ainda ordenamos a mesma.
1 <SCRIPT
LANGUAGE="JavaScript1.2">
2 nomes
= new String ("Thiago Prado
; Bill Gates ; Steve Jobs; Michael Dell ; Chris Hand ");
3 document.write
("<b>String Original</b>" + "<br>"
+ "<br>");
4 document.write
(nomes + "<br>" + "<br>");
5 padrao
= /\s*;\s*/;
6 listaNomes
= nomes.split (padrao);
7
8 padrao
= /(\w+)\s+(\w+)/;
9 novalistaNomes
= new Array;
10 document.write
("<b>Apos ter sido dividido pela Expressao Regular
</b>" + "<br><br>");
11 for
( i = 0; i < listaNomes.length; i++) {
12 document.write
(listaNomes[i] + "<br>");
13 novalistaNomes[i]
= listaNomes[i].replace (padrao, "$2, $1")
14 }
15 document.write
("<br><b>Nomes revertidos</b>" + "<br><br>");
16 for
( i = 0; i < novalistaNomes.length; i++) {
17 document.write
(novalistaNomes[i] + "<br>")
18 }
19 novalistaNomes.sort();
20 document.write
("<br> <b>Ordenados</b>" + "<br><br>");
21 for
( i = 0; i < novalistaNomes.length; i++) {
22 document.write
(novalistaNomes[i] + "<br>")
23 }
24 </SCRIPT>
Linha 2 – Declaração da variável nomes com alguns nomes a serem utilizados no código
Linha 3 a 4 – Mostra na tela a variável nomes sem nenhuma alteração
Linha 5 – Declaração da variável padrao com a seqüência de caracteres a serem utilizados nas pesquisas.
Linha 6 – Criação da matriz listaNomes com a divisão da string nomes a partir do padrão utilizado.
Linha 8 – A variável padrão recebe nova seqüência de caracteres a serem utilizados nas pesquisas.
Linha 10 a 14 – Mostra na tela a lista de Nomes depois da divisão
Linha 13 – A matriz novalistaNomes(indexada da variável do loop) recebe o valor da matriz listaNomes (indexada da variável do loop) que utiliza o método replace para trocar o primeiro nome pelo segundo. Isso é possível por causa do uso da expressão regular.
Linha 15 a 18 – Mostra na tela a lista de Nomes revertidos
Linha 19 – Utilização do método sort para ordernar a matriz novalistaNomes
Linha 20 a 23 – Mostra na tela a lista de Nomes Ordenados
Clique aqui para ver o exemplo 03.
Regular Expression é um assunto muito amplo, e não é possível abordá-lo em apenas alguns exemplos. Mas para o futuro eu vou preparar uma outra matéria com códigos mais poderosos para mostrar o que realmente quero dizer com “resumi em algumas linhas de código pesquisas altamente complexas”.
Valeu galera e até a próxima semana!
Créditos: Parte deste artigo
foi retirado do site de Devedge, MSDN e JavascriptKit com alterações,
traduções e informações adicionadas
por mim.
18 Comentários
Qual a sua opinião?