Javascript: Regular Expression

Neste artigo eu vou usar tanto a palavra expressões reg­u­lares como Reg­u­lar Expres­sion (inglês). Eu vou usar em por­tuguês para facil­i­tar, mas esse nome não existe em português.

As expressões reg­u­lares são padrões uti­liza­dos para encon­trar com­bi­nações de car­ac­teres em Strings. É uma fer­ra­menta muito poderosa porque con­segue resumi em algu­mas lin­has de código pesquisas alta­mente com­plexas. O prin­ci­pal uso de expressões reg­u­lares em Javascript seria na val­i­dação de dados.

Em JavaScript, expressões reg­u­lares tam­bém podem ser tratadas como um objeto. Esses padrões são usa­dos com os méto­dos exec e test do objeto Reg­Exp, e com os méto­dos match, replace, search, e split do objeto String.

Algu­mas das traduções deste artigo não são total­mente fieis. Espero que con­sigam enten­der o que a men­sagem está passando.

Enten­dendo as Expressões Regulares

As expressões reg­u­lares podem ser cri­adas de duas formas:

- Escrevendo uma expressão regular:

seek = /padrao/

padrao é a string padrão para ser usada na pesquisa.

- Criando uma instan­cia do objeto RegExp:

seek = new RegExp(“padrao”);

padrao é a string padrão para ser usada na pesquisa.

Reg­u­lar Expres­sion é um padrão de texto que con­siste de sim­ples car­ac­teres (da letra a até z, ou de 1 até 9) e de uma com­bi­nação de car­ac­teres sim­ples e especiais.

Os padrões para a pesquisa de car­ac­teres estão divi­di­dos em cat­e­go­rias. Segue abaixo uma lista dos gru­pos e respec­tivos car­ac­teres especiais.

Busca posi­cionada

Lit­erais

A barra inver­tida (\) é tam­bém usada quando você deseja encon­trar um car­ac­tere espe­cial lit­eral­mente. Por Exem­plo, se você deseja encon­trar o sím­bolo “$” ao invés de ter um sinal no final da string, use a barra invertida: /\$/

Classes de Caracteres

Repetição

Alter­nação & Agrupamento

Back­ref­er­ences

Mod­i­fi­cadores de Padrões

Em adição aos car­ac­teres padrões para bus­car, você pode usar switches para fazer uma pesquisa global, case– insen­si­tive (ignora minús­cu­las e maiús­cu­las) ou ambas.

Enten­dendo os méto­dos usa­dos pelas expressões regulares

Quando você quer saber se o padrão foi encon­trado na string, use o método test ou search; para maiores infor­mações (mas com exe­cução mais lenta) use o método exec ou match. Se você usar exec ou match e se obter sucesso, esses méto­dos retornaram um array e atu­alizaram as pro­priedades do objeto reg­u­lar expres­sion asso­ci­ado e tam­bém de obje­tos pré-definidos, Reg­Exp. Se a pesquisa falir, o método exec retornará nulo (no qual con­vert­erá para false).

Pro­gra­mando Expressões Regulares

A par­tir do momento que sabe­mos quais car­ac­ters dese­jamos deve­mos par­tir para a cri­ação do padrão que sera uti­lizado para pesquisar a String.

Vamos, a par­tir de agora, criar alguns exem­p­los práti­cos de como uti­lizar Expressões Regulares.

No nosso primeiro exem­plo vamos pesquisar na string um padrão que é com­posto da palavra “de”. O O resul­tado obtido nos mostrará onde se encon­tra a primeira e a ultima ocor­rên­cia das pesquisas.

Exem­plo:

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 doc­u­ment.write(“<b>padrao » </b>” + padrao + “<br>”);
6 doc­u­ment.write(“<b>Texto uti­lizado » </b>” + texto + “<br>”);
7 doc­u­ment.write(“O padrao uti­lizado foi encon­trado no <b>” + texto.search(padrao) + “º </b>caractere.<br>”)
8 padrao.exec(texto);
9 doc­u­ment.write(“O ultimo valor encon­trado e” o caractere<b> ” + padrao.lastIndex + “º </b>.”);
10 </SCRIPT>

Linha 2 – Declar­ação da var­iável padrão com a seqüên­cia de car­ac­teres a serem uti­liza­dos nas pesquisas.

Linha 3 – Tem o mesmo fun­ciona­mento da linha 2, porém vai criar uma instân­cia do objeto Reg­Exp com a seqüên­cia de caracteres.

Linha 7 – Uti­liza­ção do método search() para encon­trar o padrao na var­iável texto.

Linha 8 – Uti­liza­ção do método exec para pesquisar a seqüên­cia padrão na var­iável texto.

Linha 9 – Uti­liza­ção da pro­priedade lastIn­dex para retornar a última vez que a seqüên­cia de car­ac­teres foi encon­trada na var­iável texto.

Clique aqui para ver o exem­plo 01.

Exem­plo 02

Este exem­plo é um pouco mais com­plexo. Ele val­ida a entrada de dados por parte do usuário. O usuário vai dig­i­tar um número de tele­fone como pro­posto no exemplo.

1 <SCRIPT LANGUAGE = “JavaScript”>
2 padrao = /\(?\d{3}\)?\d{3}-\d{4}/;
3 func­tion testInfo(x) {
4 a = x.Phone.value;
5 OK = padrao.exec(a);
6 if (!OK){
7 window.alert (“Este numero de tele­fone esta incor­reto!”);
8 x.Phone.focus();
9 } else {
10 window.alert (“Obri­gado, seu numero de tele­fone e” » ” + OK[0]);
11 }
12 }
13 </SCRIPT>

Linha 2 – Declar­ação da var­iável padrao com a seqüên­cia de car­ac­teres a serem uti­liza­dos nas pesquisas.

Linha 3 – Declar­ação da função testInfo() que recebe um parâmetro com o objeto form a ser utilizado

Linha 4 – Declar­ação da var­iável a que armazena o valor do parâ­men­tro x (o for­mulário) seguido do nome do campo e respec­tivo valor

Linha 5 – Declar­ação da var­iável OK que recebe o valor da ver­i­fi­cação se o padrão re está con­tido na var­iável a

Linha 6 a 11 – Ver­i­fi­cação da negação da var­iável OK. Se retornar true, uma caixa de men­sagem será mostrada com uma men­sagem de erro e o campo em questão rece­berá o foco. Se retornar false uma caixa de men­sagem será mostrada com uma men­sagem e o número do telefone.

Com todo o código Javascript cri­ado, vamos à cri­ação do código HTML.

1 Dig­ite um número de tele­fone, como por exem­plo » (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 onSub­mit retorna false para o for­mulá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 exem­plo 02.

Exem­plo 03

Neste exem­plo vamos tra­bal­har com mais méto­dos e enten­der onde podemos chegar com ape­nas algu­mas lin­has de código. Aqui nos dividi­mos uma string, colo­camos seu resul­tado em uma matriz e ainda orde­n­amos a mesma.

1 <SCRIPT LANGUAGE=”JavaScript1.2″>
2 nomes = new String (“Thi­ago Prado ; Bill Gates ; Steve Jobs; Michael Dell ; Chris Hand “);
3 doc­u­ment.write (“<b>String Original</b>” + “<br>” + “<br>”);
4 doc­u­ment.write (nomes + “<br>” + “<br>”);
5 padrao = /\s*;\s*/;
6 lis­taNomes = nomes.split (padrao);
7
8 padrao = /(\w+)\s+(\w+)/;
9 noval­is­taNomes = new Array;
10 doc­u­ment.write (“<b>Apos ter sido divi­dido pela Expres­sao Reg­u­lar </b>” + “<br><br>”);
11 for ( i = 0; i < listaNomes.length; i++) {
12 doc­u­ment.write (listaNomes[i] + “<br>”);
13 novalistaNomes[i] = listaNomes[i].replace (padrao, “$2, $1″)
14 }
15 doc­u­ment.write (“<br><b>Nomes revertidos</b>” + “<br><br>”);
16 for ( i = 0; i < novalistaNomes.length; i++) {
17 doc­u­ment.write (novalistaNomes[i] + “<br>”)
18 }
19 novalistaNomes.sort();
20 doc­u­ment.write (“<br> <b>Ordenados</b>” + “<br><br>”);
21 for ( i = 0; i < novalistaNomes.length; i++) {
22 doc­u­ment.write (novalistaNomes[i] + “<br>”)
23 }
24 </SCRIPT>

Linha 2 – Declar­ação da var­iável nomes com alguns nomes a serem uti­liza­dos no código

Linha 3 a 4 – Mostra na tela a var­iável nomes sem nen­huma alteração

Linha 5 – Declar­ação da var­iável padrao com a seqüên­cia de car­ac­teres a serem uti­liza­dos nas pesquisas.

Linha 6 – Cri­ação da matriz lis­taNomes com a divisão da string nomes a par­tir do padrão utilizado.

Linha 8 – A var­iável padrão recebe nova seqüên­cia de car­ac­teres a serem uti­liza­dos nas pesquisas.

Linha 10 a 14 – Mostra na tela a lista de Nomes depois da divisão

Linha 13 – A matriz novalistaNomes(indexada da var­iável do loop) recebe o valor da matriz lis­taNomes (index­ada da var­iável do loop) que uti­liza o método replace para tro­car o primeiro nome pelo segundo. Isso é pos­sível por causa do uso da expressão regular.

Linha 15 a 18 – Mostra na tela a lista de Nomes revertidos

Linha 19 – Uti­liza­çã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 exem­plo 03.

Reg­u­lar Expres­sion é um assunto muito amplo, e não é pos­sível abordá-lo em ape­nas alguns exem­p­los. Mas para o futuro eu vou preparar uma outra matéria com códi­gos mais poderosos para mostrar o que real­mente quero dizer com “resumi em algu­mas lin­has de código pesquisas alta­mente complexas”.

Fonte: Thi­ago Prado