CategoryExpressão Regular

Máscara cartão de crédito com javascript e expressão regular – regex

EU já havia postado diversas máscaras com javascript e regex, e hoje um cara no fórum pediu uma máscara para cartão de crédito.

É bem simples, 4 grupos de números separados por espaços.”9999 9999 9999 9999″.
Eu odeio os plugins de máscaras, pois eles sempre dão algum tipo de problema, como impedir usar backspace, o backspace funcionar até se tiver readonly, comer números, ser impossível editar corretamente, jogar o cursor no lugar errado..

Então eu sempre uso essas máscaras com expressões regulares. Funcionam muito bem, são super crossbrowsers, e tem ótima performance.

<html>
<head>
    <title>Mascara Cartão de Crédito</title>
<script type="text/javascript">
/* Máscaras ER */
function mascara(o,f){
    v_obj=o
    v_fun=f
    setTimeout("execmascara()",1)
}
function execmascara(){
    v_obj.value=v_fun(v_obj.value)
}
function mcc(v){
    v=v.replace(/\D/g,"");
    v=v.replace(/^(\d{4})(\d)/g,"$1 $2");
    v=v.replace(/^(\d{4})\s(\d{4})(\d)/g,"$1 $2 $3");
    v=v.replace(/^(\d{4})\s(\d{4})\s(\d{4})(\d)/g,"$1 $2 $3 $4");
    return v;
}
function id( el ){
	return document.getElementById( el );
}
window.onload = function(){
	id('cc').onkeypress = function(){
		mascara( this, mcc );
	}
}
</script>

</head>
<body>

    <input type="tel" name="cc" id="cc" maxlength="19" />

</body>
</html>

Comente se vc usar também.

Exemplo regex para casar um padrão de link – javascript

Exemplo básico de uso do método [b].test()[/b] do objeto Regex.

Vou casar todos os links, que terminem em 32 caracteres(letras ou números).

<a href="http://www.site.com.br/caminho/pasta/c8f388d1917311e2a180000c29d05625">sim</a>
<a href="http://www.site.com.br/caminho/pasta/c8f388d1917311e2a180000c29d05625">sim</a>
<a href="http://www.site.com.br/caminho/pasta/c8f388d1917311e2a180000c29d05625aa">nao</a>
<a href="http://www.site.com.br/caminho/pasta/c8f388d1917311e2a180000c29d05625">sim</a>

<a href="http://www.site.com.br">nao</a>

<a href="http://www.site.com.br/caminho/pasta/c8f388d1917311e2a180000c29d05625aa">nao</a>
<a href="http://www.site.com.br/caminho/pasta/123412341234aaaabbbbccccddddeeee">sim</a>


<style>
.t { color: #f00; }
</style>
<script>
	var as = document.getElementsByTagName('a'),
		max = as.length;

	while(max--){
		var er = /\/[a-z0-9]{32}$/gi;

		if(er.test(as[max].href)){
			as[max].className = 't';
		}
	}
</script>

Mais um código que fiz para o iMasters, e resolvi postar aqui. =)

Formatar moeda no onblur – javascript sem jQuery

Diferente das demais máscaras de moeda em javascript, assim como essa minha que formata usando Expressão Regular no onkeyUp do campo, a máscara que apresento agora, formata no evento onblur.

Aceita as entradas:

,1 = 0,10
,10 = 0,10
1 = 1,00
10 = 10,00
100 = 100,00

money-blur.js

'use strict';
function _signalFirst(v) {
  return /^(,|\.)/.test(v);
}
function _signalOne(v) {
  return /,|\.+\d$/.test(v);
}
function _onlyNumber(v) {
  return /^\d+$/.test(v);
}
function _rightPosition(v) {
  return /(,|\.)\d{2}$/.test(v);
}
function _format(v) {
  var length = v.length;

  if (_signalFirst(v)) {
    console.log('_signalFirst');

    v = v.replace(/[,.]/, '');
    if (length===2) v = '0,' + v + '0';
    else v = '0,' + v;
  } else if (_onlyNumber(v)) {
    console.log('_onlyNumber');

    v = v + ',00';
  } else if (_rightPosition(v)) {
    console.log('_rightPosition');

    v = v.replace(/[,.]/, '');
    v = v.replace(/(\d)(\d{2})$/, '$1,$2');
  } else if (_signalOne(v)) {
    console.log('_signalOne');

    v = v.replace(/[,.]/, '');
    v = v + '0';
    v = v.replace(/(\d)(\d{2})$/,"$1,$2");
  } else {
    v = v.replace(/[,.]/, '');
    v = v.replace(/(\d{1,3})$/g,"$1,00");
    v = v.replace(/(\d{1,3})(\d{3},00)$/,"$1.$2");
  }
  return v;
}

if (typeof exports !== 'undefined') {
  if (typeof module !== 'undefined' && module.exports) {
    exports = module.exports = _format;
  }
  exports._format = _format;
}

usando no teu html..

<script type="text/javascript">
function id(el){
  return document.getElementById(el);
}
window.onload = function(){
  id('moeda').onkeyup = function() {
      var v = this.value;
      v = v.replace(/[^\d,.]/, '');
      this.value = v;
  };
  id('moeda').onblur = function() {
    var v = this.value;
    this.value = _format(v);
  }
};
</script>
<input type="text" name="moeda" id="moeda" />

É isso galera. Comente caso usem =)

Demonstração no Github

http://wbruno.github.io/examples/money-blur/

Como remover máscaras com Expressões Regulares

Para entender Expressões Regulares, é preciso conseguir enxergar os padrões das strings.

Um telefone possui o seguinte padrão:

(xx) xxxx-xxxx ou no caso de São Paulo(neste momento): (xx) 9xxxx-xxxx
Sendo cada x, um número 1,2,3,4,5,6,7,8 ou 9.

Eu posso escrever uma ER que case com os telefones assim:

([0-9]{2}) 9?[0-9]{4}-[0-9]{4}

Sendo o 9 ali “opcional”. Para remover a máscara de números de telefone, posso procurar quais são os caracteres que não quero, e tirá-los:

str.replace('(','').replace(')', '').replace(' ','').replace('-','');

Mas isso é deveras trabalhoso.

Eu poderia fazer uma Expressão Regular para pegar todos esses caracteres e remover eles:

str.replace(/[\(\)\.\s-]+/g,'');

Mas ai, tb ainda não tá bacana.

Posso pensar ao contrário: remover tudo, menos oque eu quero:

str.replace(/[^0-9]+/g,'');

Ou seja, removo tudo oque não for números de 0 até 9. Ou se preferir: /[\D]+/g == /[^\d]+/g

Lembrando que \d é o mesmo que [0-9].

Cortando uma string nos primeiros “N” caracteres – JavaScript com Expressão Regular

Vou usar expressão regular com javascript, para mostrar como cortar uma string nos “N” primeiros caracteres.

Eu poderia usar a função .substr(), mas ai não teria graça.. hehe
Continue reading