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