Postagens
Male
Olá galera, bom este artigo retrata como usarmos expressão regular para mascaras em javascript.
Bom vou ensinar a como usarmos expressão regular para criação de varios tipos de mascaras.
Mãos na massa
Mascara.js
/*
* Script: Mascaras em Javascript
* Autor: Matheus Biagini de Lima Dias
* Data: 26/08/2008
* Obs:
*/
/*Função Pai de Mascaras*/
function Mascara(o,f){
v_obj=o
v_fun=f
setTimeout("execmascara()",1)
}
/*Função que Executa os objetos*/
function execmascara(){
v_obj.value=v_fun(v_obj.value)
}
/*Função que Determina as expressões regulares dos objetos*/
function leech(v){
v=v.replace(/o/gi,"0")
v=v.replace(/i/gi,"1")
v=v.replace(/z/gi,"2")
v=v.replace(/e/gi,"3")
v=v.replace(/a/gi,"4")
v=v.replace(/s/gi,"5")
v=v.replace(/t/gi,"7")
return v
}
/*Função que permite apenas numeros*/
function Integer(v){
return v.replace(/\D/g,"")
}
/*Função que padroniza telefone (11) 4184-1241*/
function Telefone(v){
v=v.replace(/\D/g,"")
v=v.replace(/^(\d\d)(\d)/g,"($1) $2")
v=v.replace(/(\d{4})(\d)/,"$1-$2")
return v
}
/*Função que padroniza telefone (11) 41841241*/
function TelefoneCall(v){
v=v.replace(/\D/g,"")
v=v.replace(/^(\d\d)(\d)/g,"($1) $2")
return v
}
/*Função que padroniza CPF*/
function Cpf(v){
v=v.replace(/\D/g,"")
v=v.replace(/(\d{3})(\d)/,"$1.$2")
v=v.replace(/(\d{3})(\d)/,"$1.$2")
v=v.replace(/(\d{3})(\d{1,2})$/,"$1-$2")
return v
}
/*Função que padroniza CEP*/
function Cep(v){
v=v.replace(/D/g,"")
v=v.replace(/^(\d{5})(\d)/,"$1-$2")
return v
}
/*Função que padroniza CNPJ*/
function Cnpj(v){
v=v.replace(/\D/g,"")
v=v.replace(/^(\d{2})(\d)/,"$1.$2")
v=v.replace(/^(\d{2})\.(\d{3})(\d)/,"$1.$2.$3")
v=v.replace(/\.(\d{3})(\d)/,".$1/$2")
v=v.replace(/(\d{4})(\d)/,"$1-$2")
return v
}
/*Função que permite apenas numeros Romanos*/
function Romanos(v){
v=v.toUpperCase()
v=v.replace(/[^IVXLCDM]/g,"")
while(v.replace(/^M{0,4}(CM|CD|D?C{0,3})(XC|XL|L?X{0,3})(IX|IV|V?I{0,3})$/,"")!="")
v=v.replace(/.$/,"")
return v
}
/*Função que padroniza o Site*/
function Site(v){
v=v.replace(/^http:\/\/?/,"")
dominio=v
caminho=""
if(v.indexOf("/")>-1)
dominio=v.split("/")[0]
caminho=v.replace(/[^\/]*/,"")
dominio=dominio.replace(/[^\w\.\+-:@]/g,"")
caminho=caminho.replace(/[^\w\d\+-@:\?&=%\(\)\.]/g,"")
caminho=caminho.replace(/([\?&])=/,"$1")
if(caminho!="")dominio=dominio.replace(/\.+$/,"")
v="http://"+dominio+caminho
return v
}
/*Função que padroniza DATA*/
function Data(v){
v=v.replace(/\D/g,"")
v=v.replace(/(\d{2})(\d)/,"$1/$2")
v=v.replace(/(\d{2})(\d)/,"$1/$2")
return v
}
/*Função que padroniza DATA*/
function Hora(v){
v=v.replace(/\D/g,"")
v=v.replace(/(\d{2})(\d)/,"$1:$2")
return v
}
/*Função que padroniza valor monétario*/
function Valor(v){
v=v.replace(/\D/g,"") //Remove tudo o que não é dígito
v=v.replace(/^([0-9]{3}\.?){3}-[0-9]{2}$/,"$1.$2");
//v=v.replace(/(\d{3})(\d)/g,"$1,$2")
v=v.replace(/(\d)(\d{2})$/,"$1.$2") //Coloca ponto antes dos 2 últimos digitos
return v
}
/*Função que padroniza Area*/
function Area(v){
v=v.replace(/\D/g,"")
v=v.replace(/(\d)(\d{2})$/,"$1.$2")
return v
}Agora nosso html para exibição destas mascaras:
teste.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Modelo 1 - Mascaras em javascript</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <!-- JS DAS MASCARAS --> <script src="Mascara.js"></script> </head> <body> <table width="100%" border="0"> <tr> <td colspan="2" align="center"><strong>Exemplos de Funções de mascaras em javascript</strong></td> </tr> <tr bgcolor="#e1e1e1"> <td width="13%">[Só numeros]</td> <td width="87%"><input name="int" type="text" id="int" onKeyDown="Mascara(this,Integer);" onKeyPress="Mascara(this,Integer);" onKeyUp="Mascara(this,Integer);"></td> </tr> <tr> <td width="13%">[Telefone]</td> <td width="87%"><input name="tel" type="text" id="tel" maxlength="14" onKeyDown="Mascara(this,Telefone);" onKeyPress="Mascara(this,Telefone);" onKeyUp="Mascara(this,Telefone);"></td> </tr> <tr bgcolor="#e1e1e1"> <td width="13%">[CPF]</td> <td width="87%"><input name="cpf" type="text" id="cpf" maxlength="14" onKeyDown="Mascara(this,Cpf);" onKeyPress="Mascara(this,Cpf);" onKeyUp="Mascara(this,Cpf);"></td> </tr> <tr> <td width="13%">[Cep]</td> <td width="87%"><input name="cep" type="text" id="cep" maxlength="9" onKeyDown="Mascara(this,Cep);" onKeyPress="Mascara(this,Cep);" onKeyUp="Mascara(this,Cep);"></td> </tr> <tr bgcolor="#e1e1e1"> <td width="13%">[CNPJ]</td> <td width="87%"><input name="cnpj" type="text" id="cnpj" maxlength="18" onKeyDown="Mascara(this,Cnpj);" onKeyPress="Mascara(this,Cnpj);" onKeyUp="Mascara(this,Cnpj);"></td> </tr> <tr> <td width="13%">[Romanos]</td> <td width="87%"><input name="rom" type="text" id="rom" onKeyDown="Mascara(this,Romanos);" onKeyPress="Mascara(this,Romanos);" onKeyUp="Mascara(this,Romanos);"></td> </tr> <tr bgcolor="#e1e1e1"> <td width="13%">[Site]</td> <td width="87%"><input name="sit" type="text" id="sit" onKeyDown="Mascara(this,Site);" onKeyPress="Mascara(this,Site);" onKeyUp="Mascara(this,Site);"></td> </tr> <tr> <td width="13%">[Data]</td> <td width="87%"><input name="date" type="text" id="date" maxlength="10" onKeyDown="Mascara(this,Data);" onKeyPress="Mascara(this,Data);" onKeyUp="Mascara(this,Data);"></td> </tr> <tr bgcolor="#e1e1e1"> <td width="13%">[Area Valor]</td> <td width="87%"><input name="arevalo" type="text" id="arevalo" onKeyDown="Mascara(this,Area);" onKeyPress="Mascara(this,Area);" onKeyUp="Mascara(this,Area);"></td> </tr> </table> </body> </html>
Vejamos algumas observações:
Note que criamos uma função que envia parametros para as demais funções (Mascara(o,f))
Onde envia o objeto (o) e qual função a ser usada (f).
Ex: Mascara de data : <input type="text" onKeyDown="Mascara(this,Area);">
E temos uma função que determina as expressões regulares dos objetos:
function leech(v){
v=v.replace(/o/gi,"0")
v=v.replace(/i/gi,"1")
v=v.replace(/z/gi,"2")
v=v.replace(/e/gi,"3")
v=v.replace(/a/gi,"4")
v=v.replace(/s/gi,"5")
v=v.replace(/t/gi,"7")
}
Bom é isso espero ter ajudado a galera, pois na minha opinião está é a forma mais rapida e organizada de trabalharmos com mascaras em javascript.
Caso tenha duvida em como usar expressões regulares pergunta ai que respondo.
Abraços a todos.
Bom proveito do código.
- JeffMalm likes this
