Mascaras Javascript - DATA - CEP - CPF - CNPJ - SITE

Uma questão que aflige muitas pessoas que entra na área de programação é como fazer com que o usuário tenha uma visão limpa do que esta digitando.

As expressões do javascript nos auxilia e muito para fazer isso de forma pratica e limpa.

Veja o script das mascaras mais utilizadas

<script>
function mascara(el,masc){
el.value=masc(el.value)
}
function soNumeros(d){
 return d.replace(/\D/g,"")
}
function semNumeros(d){
 return d.replace(/\d/g,"")
}
function soMinusculas(d){
 return d.toLowerCase()
}
function soMaiusculas(d){
 return d.toUpperCase()
}
function cep(d){
    d = soNumeros(d)
    d=d.replace(/^(\d{5})(\d)/,"$1-$2")
    return d
}
function cnpj(d){
    d = soNumeros(d)
    d=d.replace(/^(\d{2})(\d)/,"$1.$2")
    d=d.replace(/^(\d{2})\.(\d{3})(\d)/,"$1.$2.$3")
    d=d.replace(/\.(\d{3})(\d)/,".$1/$2")
    d=d.replace(/(\d{4})(\d)/,"$1-$2")
    return d
}
function cpf(d){
    d = soNumeros(d)
    d=d.replace(/(\d{3})(\d)/,"$1.$2")
    d=d.replace(/(\d{3})(\d)/,"$1.$2")

    d=d.replace(/(\d{3})(\d{1,2})$/,"$1-$2")
    return d
}
function url(d){
    d=d.replace(/http:\/\/?/,"")
 d = soMinusculas(d)
    dominio=d
    d="http://"+dominio
    return d
}
function telefone(d){
    d = soNumeros(d)
    d=d.replace(/^(\d\d)(\d)/g,"($1) $2")
    d=d.replace(/(\d{4})(\d)/,"$1-$2")
    return d
}
function data(d){
    d = soNumeros(d)
    d=d.replace(/(\d{2})(\d)/,"$1/$2")
 d=d.replace(/(\d{2})(\d)/,"$1/$2")
    return d
}
</script>

function mascara ela nada mais é de quem chama a mascara a ser executada ela recebe como parâmetro o elemento que esta chamando ela e qual tipo de mascara ele deseja mas não é obrigatório o uso dela chama-la diretamente é preciso fazer apenas algumas adaptações simples.

Como todas as mascaras aqui tem como base uma única função eu vou dar explicação só da função caso precise de um esclarecimento maior sinta se a vontade para perguntar.

a função que utilizamos para criar as mascaras é replace ela simplesmente substitui os caracteres que você especificar por outro ta mas e esse monte de barra por exemplo replace(/\D/g,"") as barras são delimitadores e nesse exemplo ele substitui tudo que não for número por "" (vazio) caso você passe para ela o seguinte texto ("15 Dias") ela retorna 15 para entender melhor veja abaixo

<script>
texto = "ABCDE abcDe 12345 HIJKL hijkl 67890";
alert(texto.match(/\d/)); // essa expressão diz para retornar o primeiro número que ele encontrar na variável texto naturalmente ele retorna 1.

alert(texto.match(/\d/g)); // já essa expressão diz para retornar todos os números naturalmente ele  retorna 1,2,3,4,5,6,7,8,9,0.

alert(texto.match(/[d]/)); // já essa expressão diz para retornar a primeira letra d  aqui ele encontrar retorna null pois na variável <strong>texto</strong> só existe "D".

alert(texto.match(/[d]/i)); // já essa expressão diz para retornar a primeira letra d  aqui ele encontrar naturalmente ele retorna "D".

alert(texto.match(/[d]/gi)); // já essa expressão diz para retornar a primeira letra d  aqui ele encontrar naturalmente ele retorna "D,D".

</script>

Veja os exemplos

Só números	Sem números
Só Minúsculas	Só Maiúsculas
CEP	CNPJ
CPF	Telefone
Data formato dd/mm/aaaa	URL