Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

klonder

Expressões Regulares em Javascript

Por , em Javascript

Recommended Posts

klonder    14

klonder
Postado

Olá a todos!

 

Bom pessoal, estarei postando a partir de agora, uma série de exemplos de uso de Expressões Regulares (ER) em JavaScript, com explicações objetivas sobre cada método e códigos-fonte comentados. Como já existem ótimas fontes on-line para o estudo em ER, o escopo desse tópico não é explicar os símbolos utilizados, mas colocar em ação tudo o que os métodos e os símbolos são capazes de fazer!

 

Referência para estudo:

http://guia-er.sourceforge.net/ : É o bê-a-bá para qualquer um aprender ER rapidamente, com uma leitura super agradável e exemplos práticos.

 

Pequena introdução

Qual a importância do uso de expressões regulares?

Bem, com ER você é capaz de encontrar termos, expressões ou validar campos de formulário (CEP, CPF, CNPJ, telefone, data) em uma velocidade incrível. Além disso, é possível formatar, em poucas linhas de código, as entradas inseridas pelos usuários do seu site ou sistema. Ex: O usuário digita o CPF no formato #########-##, e você posteriormente o corrige para: ###.###.###-## antes de o mesmo ser enviado padronizado para o Banco de Dados.

 

Enfim, são muitas utilidades, que tentaremos abordar a partir de agora.

 

 

Considerações

Para facilitar, iremos definir as expressões regulares em uma variável denominada RegExp, que é a mais utilizada e conhecida na internet.

Exemplo:

var RegExp = /[0-9]/;
Note: a expressão fica entre as barras: / /.

 

 

 

1. Método search

O método search é o método de uma string e serve para localizar termos em uma determinada expressão. Caso o termo seja encontrado, retorna a posição do termo na string. Caso não seja encontrado, retorna -1.

 

Sintaxe: texto.search(RegExp)

 

Exemplo 1 - Exemplo simples:

Para localizar um determinado termo em uma frase, basta digitar o termo em questão.

<script type="text/javascript">

var texto = "Expressões regulares em Javascript para iniciantes!";

//Verificar se no texto recebido existe a expressão: java script:
var RegExp = /Javascript/;

if (texto.search(RegExp) != -1) {
		document.write("Encontrado na posição: "+ texto.search(RegExp));
} else {
		document.write("Não encontrado!");
}
</script>

 

Exemplo 2 - Procura de termos em uma string (e-mail):

Suponha que um usuário digitou uma pequena frase em campo texto ou em textarea e você quer verificar se há nesse texto, um e-mail. Ora, existem e-mails no formato ".com.br" (para o Brasil, por exemplo), outros apenas ".com" , por isso, não devemos exigir que tenha necessariamente o ".br".

 

O código abaixo tenta localizar, em uma expressão qualquer, se existe algo com formato de e-mail.

<script type="text/javascript">

var texto = "O meu e-mail é: klonder@klonder.com.br";

//Procura por uma palavra que contenha uma ou mais sequências de algarismos (letras ou números) (\b[\w]+);
//Seguidos de um arroba (@);
//Seguido de outra sequência de um ou mais algarismos ([\w]+);
//Seguidos de um ponto (\.);
//Seguido de outra sequência de um ou mais algarismos ([\w]+).
var RegExp = /\b[\w]+@[\w]+\.[\w]+/;

if (texto.search(RegExp) != -1) {
		document.write("E-mail localizado na posição: " + texto.search(RegExp));
} else {
		document.write("E-mail não encontrado!");
}
</script>

Em breve, mais exemplos sobre Expressões Regulares.

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

2. Método test

É o método de uma Expressão Regular e é muito utilizado para validação de formulários (CEP, e-mail, datas, formatos monetários, CPF, CNPJ, placas de veículos, dentre outros). Caso a Expressão seja encontrada, retorna "true", caso contrário retorna "false".

 

Sintaxe: RegExp.test(texto);

 

 

Exemplo 1 - Validando e-mails

Suponha que no seu formulário existe um campo texto para o usuário entrar com um e-mail. Vamos então vericar com o método "test" se o que ele digitou é um formato válido de e-mail.

 

<script type="text/javascript">

var texto = "klonder@klonder.com.br";

/* Verificando se o texto recebido é iniciado por um ou mais algarismos (^[\w]+);
seguidos de arroba (@);
Seguido de um ou mais algarismos ([\w]+);
Seguido(s) de um ponto (\.);
Seguido (e finalizado) por um ou mais algarismos ou pontos ([\w|\.]+$);
*/
var RegExp = /^[\w]+@[\w]+\.[\w|\.]+$/;

if (RegExp.test(texto) == true) {
		document.write("Formato válido!");
} else {
		document.write("Formato inválido!");
}
</script>

 

Exemplo 2 - Validando CPF

O formato padrão do CPF é: ###.###.###-##

<script type="text/javascript">

var texto = "000.000.000-00";

/* Verificando se o texto recebido é iniciado por três números (^[\d]{3});
seguidos de ponto (\.);
seguido de três números ([\d]{3});
seguidos de ponto (\.);
seguido de três números ([\d]{3});
seguidos de hífen (\-);
seguido (e finalizado) por dois números ([\d]{2}$);
*/
var RegExp = /^[\d]{3}\.[\d]{3}\.[\d]{3}\-[\d]{2}$/;

if (RegExp.test(texto) == true) {
		document.write("Formato válido!");
} else {
		document.write("Formato inválido!");
}
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mário Monteiro    179

Mário Monteiro
Postado

otima iniciação mesmo

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

otima materia klonder!

otima iniciação mesmo

Muito obrigado pela motivação pessoal! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif Tentarei continuar postando as dicas da maneira mais simples e didática possível!

 

 

3. Método match

É o método de uma string e é capaz de armazenar em um array algumas propriedades da ER que forem localizadas na string. Em caso positivo, retorna cada termo localizado em um array associativo. Caso contrário, retorna null.

 

Sintaxe: texto.match(RegExp)[propriedades ou índices]

 

As suas propriedades são:

3.1 - input -> String de entrada;

3.2 - index -> Posição do primeiro caractere do segmento da string que atende à ER;

3.3 - lastIndex -> Posição do último caractere do segmento da string que atende à ER;

 

E os seus índices são:

3.4 - [0] -> Retorna a parte da string que atende à ER;

3.5 - [1],[2] etc -> Retorna os termos da string casados em cada grupo da ER;

 

 

Exemplo 1 - Localizando a data em uma string

Suponha que o usuário inseriu, dentre outras palavras de uma frase, uma expressão de data em um dos campos do seu formulário. Você quer então, capturar o dia, mês e ano dessa data, não importando a posição que a expressão de data ocupa na frase.

 

<script type="text/javascript">
//Frase recuperada de um campo text, por exemplo:
var texto = "Eu nasci em 01/23/4567";

/* Verificando se o texto recebido contém dois números (([\d]{2})): veja que estão entre parênteses;
seguidos de barra (\/);
Seguida de dois números (([\d]{2})): veja que estão entre parênteses;
seguidos de barra (\/);
Seguida de quatro números (([\d]{4})): veja que estão entre parênteses;

Os parênteses determinam os grupos!
*/
var RegExp = /([\d]{2})\/([\d]{2})\/([\d]{4})/;

if (texto.match(RegExp) != null) {
		document.write("Propriedades do método match: <br>"+
		"Frase: "+texto.match(RegExp).input+"<br>"+
		"Posição do 1º caractere: "+texto.match(RegExp).index+"<br>"+
		"Posição do último caractere: "+texto.match(RegExp).lastIndex+"<br>"+
		"Resultado da ER: "+texto.match(RegExp)[0]+"<br>"+
		"Primeiro grupo: "+texto.match(RegExp)[1]+"<br>"+
		"Segundo grupo: "+texto.match(RegExp)[2]+"<br>"+
		"Terceiro grupo: "+texto.match(RegExp)[3]+"<br>");
} else {
		document.write("Nenhum texto ou expressão foram casados!");
}
</script>

 

Exemplo 2 - Localizando apenas números em uma expressão

Suponha agora que o usuário deverá digitar uma chave-de-código em um formulário do seu site para fazer o download de uma apostila, por exemplo. Embora esse tipo de validação não seja tão eficiente em JavaScript, você quis utilizá-la mesmo assim pois seu servidor não tem ainda suporte a PHP ou ASP e, além disso, os seus usuários não entendem muito sobre código HTML ou JavaScript.

Bom, sendo assim, você criou um campo texto no seu site e nesse campo deverá ser inserida essa chave de código, que contém números e letras, de tamanho variado. No entanto, você quer pegar apenas os números que estão espalhados nessa chave-de-código para fazer uma posterior validação, vendo se aquela é uma chave válida ou não.

Como não existe local certo para os números ou letras, você resolveu utilizar ER para capturar apenas os números!

 

Veja o código abaixo:

<script type="text/javascript">
//Chave de código recuperada de um campo text, por exemplo:
var texto = "ÇASLDFE2FLAHÇS0DGKLJEIQWOE0IFJSDFKQÇLW9EKFJ";

//Pegando apenas os números contidos em um texto recebido:
var RegExp = /[\d]/g;

if (texto.match(RegExp) != null) {
	var strExpressao = "";
	for (var i = 0; i < texto.match(RegExp).length; i++) {
		strExpressao = strExpressao + texto.match(RegExp)[i];
	}
	document.write (strExpressao);
} else {
		document.write("Nenhum texto ou expressão foram casados!");
}
</script>

Nesse caso, utilizamos o modificador global (g) para fazer uma busca por partes, porém em toda a string. Ao utilizar o modificar global, o método é convertido também em um array, porém cada índice (inclusive o zero) armazenará cada ocorrência da ER na string.

Essa é uma maneira diferente de utilizar o método match, que também produz excelentes resultados!

 

Tudo bem, você poderia considerar esse exemplo um tanto quanto simples e vulnerável, pois qualquer um poderia, num simples olhar, ver os números presentes na chave e saber qual a sequência numérica correta e, a partir disso, curtir contigo, dizer que seu sistema não funciona, que você não é um bom desenvolvedor etc etc etc...

 

Mas é aí que eu queria chegar! E que tal inserirmos vários números e letras, tudo misturado, com números repetidos, letras ao acaso? Eu não digo que seria impossível, mas seria muito mais complicado alguém "descriptografar" a sua chave dessa maneira!!! O tempo que a pessoa iria gastar nisso talvez não valesse a pena!

 

Sendo assim, para aumentar a segurança, vamos criar uma chave com vários números e letras. Mas antes de ver o código-fonte abaixo, tente descobrir uma maneira de obter a sequência numérica correta que, nesse caso, também é 2009:

Chave = SL2K2K2LJH98759K0L825YWUK0LIEFHQ293485612985WEIOFH1K9L468VN234

 

Você iria perder horas e horas tentando descobrir isso, mas as ER vieram para resolver esse tipo de problema de uma maneira mais simples e com menos linhas de código possível.

Na chave acima, eu irei buscar por cada número que esteja entre as letras K e L (iniciais do meu nick), ou seja, a ER tentará localizar ...K2L....K0L....K0L.........K9L, resultando, após a extração dos números, em 2009! Assim, posso inserir quantas letras e números quiser, tendo apenas o cuidado de utilizar a sequência K*L em momentos especiais, mas em qualquer posição do código!

 

Sendo assim, segue o código abaixo:

<script type="text/javascript">
//Chave de código recuperada de um campo text, por exemplo:
var texto = "SL2K2K2LJH98759K0L825YWUK0LIEFHQ293485612985WEIOFH1K9L468VN234";

// Verificando apenas os segmentos K#L contidos em um texto recebido;
//Sendo que [\d] corresponde a um número qualquer.
var RegExp = /K[\d]L/g;

if (texto.match(RegExp) != null) {
	var strExpressao = "";
	for (var i = 0; i < texto.match(RegExp).length; i++) {
		strExpressao = strExpressao + texto.match(RegExp)[i];
	}
	document.write ("RegExp extraiu da variável texto:<br>"+strExpressao);
	document.write ("<br><br><br>");
		//Retirando apenas os números de strExpressao:
		var RegExp2 = /[\d]/g;
		var strExpressao2 = "";
		
		if (strExpressao.match(RegExp2) != null) {
			for (var i = 0; i < strExpressao.match(RegExp2).length; i++) {
			strExpressao2 = strExpressao2 + strExpressao.match(RegExp2)[i];
			}
			
			document.write ("RegExp2 extraiu da variável strExpressao:<br>"+strExpressao2);
		}
	
} else {
		document.write("Nenhum texto ou expressão foram casados!");
}
</script>

Importante: Esse tipo de utilização de chaves ou senhas não é eficiente em Java Script, pois o usuário pode olhar o código-fonte da página e descobrir o processo. Utilizamos os modelos acima apenas a título de exemplificação e didática.

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

4. Método replace

O método replace é o método de uma string e é nativo do JavaScript. No entanto, pode ser utilizado em conjunto com as Expressões Regulares extendendo significativamente a capacidade de manipulação dos grupos casados na string, pela ER.

 

Sintaxe: texto.replace(RegExp,"grupos");

 

Exemplo 1 - Máscaras para CPF

Suponha que no seu site existe um campo para o usuário digitar os números do CPF. Esse campo aceita apenas números, mas, antes do valor ser enviado ao Banco de Dados, você deseja converter a sequência numérica para o formato padrão do CPF, que é: ###.###.###-## (#: qualquer número de 0 a 9).

 

Segue o código:

<script type="text/javascript">
//CPF recuperada de um campo text, por exemplo:
var texto = "00000000000";

/* Dividindo por grupos:
Verificando se a expressão é iniciada por 3 números (^([\d]{3}));
seguidos de 3 números (([\d]{3}));
seguidos de 3 números (([\d]{3}));
seguidos de 2 números e finalizada (([\d]{2})$);
*/
var RegExp = /^([\d]{3})([\d]{3})([\d]{3})([\d]{2})$/;

	if (texto.search(RegExp) != -1) {
		var mascCPF = texto.replace(RegExp,"$1.$2.$3-$4");
		document.write (mascCPF);
	} else {
		document.write("Nenhum texto ou expressão foram casados!");
	}
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito