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

Sím­bolo	Descrição	Exem­plo
^	Busca somente no iní­cio da string	/^The/ encon­tra “The” em “The night” mas não em “In The Night”
$	Busca somente no fim da string	/and$/ encon­tra “and” em “Land” mas não em “landing”
\b	Encon­tra em qual­quer parte da string	/ly\b/ encon­tra “ly” em “This is really cool.”
\B	Encon­tra qual­quer parte que não esteja limitada	/\Bor/ encon­tra “or” em “nor­mal” mas não em “origami.”

Lit­erais

Sím­bolo	Descrição
Alfanu­mer­ica	Todos os car­ac­teres alfabéti­cos e numerais se encon­tram lit­eral­mente. Então /2 dias/ encon­trarão “2 days” den­tro da string
\n	Encon­tra o car­ac­tere de nova linha
\f	Encon­tra o car­ac­tere de nova página
\r	Encon­tra o car­ac­tere de retorno de carro
\t	Encon­tra o car­ac­tere de tab­u­lação horizontal
\v	Encon­tra o car­ac­tere de tab­u­lação vertical
\xxx	Encon­tra o car­ac­tere ASCII expresso por um número octal xxx. “\50″ encon­tra o car­ac­tere parên­te­ses esquerdo “(“
\xdd	Encon­tra o car­ac­tere ASCII expresso por um número hexa­dec­i­mal dd. “\x28″ encon­tra o car­ac­tere parên­te­ses esquerdo “(“
\uxxxx	Encon­tra o car­ac­tere ASCII expresso por UNICODE xxxx. “\u00A3″ encontra “£”.

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

Sím­bolo	Descrição	Exem­plo
[xyz]	Encon­tra qual­quer car­ac­tere que estiver den­tro do grupo. Você pode usar hífen para deno­tar escala. Por Exem­plo. /[a-z]/ encon­tra qual­quer letra do alfa­beto alpha­bet, /[0–9]/ encon­tra qual­quer dígito	/[AN]BC/ encon­tra “ABC” e “NBC” mas nao “BBC” desde que a letra “B” nao estao nogrupo.
[^xyz]	Encon­tra qual­quer car­ac­tere que não estiver den­tro do grupo. O cir­cun­flexo indica que nen­huma car­ac­tere deve estar na string. NOTA: O cir­cun­flexo usado den­tro da classe de car­ac­tere é difer­ente do que denota o iní­cio da string, não se con­fun­dam. A negação aqui só é per­mi­tida den­tro dos sinais	/[^AN]BC/ encon­tra “BBC” mas nao “ABC” ou “NBC”.
.	(Ponto). Encon­tra qual­quer car­ac­tere exceto o car­ac­tere de nova linha ou ter­mi­nador de linha Unicode	/b.t/ encon­tra “bat”, “bit”, “bet” e assim por diante
\w	Enconta qual­quer car­ac­tere alfanumérico incluindo under­score. Equiv­a­lente a [a-zA-Z0-9_]	/\w/ encon­tra “200″ em “200%”
\W	Encon­tra qual­quer car­ac­tere que não se encon­tra na classe dos alfanuméri­cos. Equiv­a­lente a [^a-zA-Z0-9_]	/\W/ encon­tra “%” em “200%”
\d	Encon­tra qual­quer dígito. Equiv­a­lente a [0–9]
\D	Encon­tra qual­quer car­ac­tere que não seja um dig­ito. Equiv­a­lente a [^0–9]	/\D/ matches “No” in “No 342222″
\s	Encon­tra qual­quer car­ac­tere que equiv­ale a um espaço. Equiv­a­lente a [ \t\r\n\v\f]
\S	Encon­tra qual­quer car­ac­tere que não equiv­ale a um espaço. Equiv­a­lent to [^ \t\r\n\v\f]

Repetição

Sím­bolo	Descrição	Exem­plo
{x}	Encon­tra exata­mente x ocor­rên­cias na reg­u­lar expression	/\d{5}/ encon­tra 5 digitos
{x,}	Encon­tra x ou mais ocor­rên­cias na reg­u­lar expression	/\s{2,}/ encon­tra no min­imo 2 car­ac­teres de espaço em branco
{x,y}	Encon­tra x para y numero de ocor­rên­cias na reg­u­lar expression	/\d{2,4}/ encon­tra no min­imo 2 mas nao mais que 4 digitos
?	Encon­tra zero ou nen­huma ocor­rên­cia. Equiv­a­lente a {0,1}	/a\s?b/ encon­tra “ab” ou “a b”.
*	Encon­tra zero ou mais ocor­rên­cias. Equiv­a­lente a {0,}	/we*/ encon­tra “w” em “why” e “wee” em “between”, mas nao em “bad”
+	Encon­tra uma ou mais ocor­rên­cias. Equiv­a­lente a {1,}	/fe+d/ encon­tra tanto em “fed” quanto em “feed”

Alter­nação & Agrupamento

Sím­bolo	Descrição	Exem­plo
( )	Agru­pa­mento de car­ac­teres para criar uma cláusula de condição. Pode estar aninhado	/(abc)+(def)/ encon­tra um ou mais ocor­ren­cias de “abc” seguido por uma ocor­ren­cia de “def”
|	Com­bina cláusu­las de condições den­tro de uma reg­u­lar expres­sion e então encon­tra qual­quer uma das cláusu­las. Sim­i­lar à expressão “OR”	/(ab)|(cd)|(ef)/ encon­tra “ab” ou “cd” ou “ef”.

Back­ref­er­ences

Sím­bolo	Descrição	Exem­plo
( )\n	Encon­tra uma cláusula entre parên­te­ses. n é o número de cláusu­las para a esquerda da backreference	(\w+)\s+\1 encon­tra quais­quer palavras que ocorra duas vezes na mesma linha, como “hubba hubba.” O \1 denota que a prime­ria palavra depois do espaço deve encon­trar a porção da string que foi encon­trada no último com­mando den­tro de parên­te­ses. Se exis­tisse mais de um comando den­tro de parên­te­ses, você deve usar \2 ou \3 para encon­trar o apro­pri­ado agru­pa­mento da esquerda da back­ref­er­ence. Até 9 back­ref­er­ences podem ser usadas no padrão da string

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.

Pro­priedade	Descrição	Exem­plo
i	Ignora se é minús­cula ou maiúscula	/The/i encon­tra “the” e “The” e “tHe”
g	Pesquisa Global para todas as ocor­rên­cias do padrão	/ain/g encon­tra os dois “ain” em “No pain no gain”, ao inves de ape­nas o primeiro
gi	Pesquisa Global, e igno­rar caso	/it/gi encon­tra todos “it” em “It is our IT depart­ment” lastIndex
lastIn­dex	Armazena a posição da última pesquisa bem suces­sida real­izada na string. Se nada for encon­trado, a pro­priedade lastIn­dex será colo­cada como –1
$n	n rep­re­senta o numero de 1 a 9 Armazena os nove mais recentes pesquisa den­tro de parên­te­ses encon­tradas. Por exem­plo, se o padrão usado por uma reg­u­lar expres­sion para a última pesquisa foi /(Hello)(\s+)(world)/ e a string pesquisada foi “Hello world” o con­teúdo de RegExp.$2 pode­ria ser qual­quer car­ac­tere entro “Hello” e “world”
source	Armazena a copia do padrão da reg­u­lar expression

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

Método	Descrição
exec	Um método Reg­Exp que exe­cuta pesquisas em uma string. O mesmo retorna um array das infor­mações obtidas
test	Um método Reg­Exp que testa uma pesquisa em uma string. O mesmo retorna true ou false
match	Um método de String que exe­cuta uma pesquisa em uma string. O mesmo retorna um array das infor­mações obti­das 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 resul­tado, ou –1 se a pesquisa falir
replace	Um método de String que exe­cuta uma pesquisa em uma string, e sub­sti­tui o resul­tado encon­trado por uma substring
split	Um método de String que usa uma reg­u­lar expres­sion ou uma string para que­brar uma string em uma array de substrings

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