10

Em uma determinada página para alteração de dados cadastrados, em um dos campos preciso limitar a quantidade de caracteres que pode ser alterado. Existem 2 campos inputs e um deles fica oculto armazenando o nome na forma atual. No input visível também é armazenado o nome no formato atual e o usuário pode fazer alterações. Usei o OnBlur pra quando o usuário sair do campo um método js compara a string do input oculto com da input visível, se houver mais de 3 alterações uma mensagem é passada pro usuário e o nome volta pro formato anterior.

O problema é que não consegui uma lógica que atenda todas as regras, o que complica é que caracteres podem ser removidos, alterados ou inseridos, ou seja, se a informação Hnrikuei esta gravada e o usuário deseja corrigir para Henrique três alterações devem ser contadas:

  1. 'e' adicionado,
  2. 'i' removido
  3. 'k' trocado para 'q'
4
  • Acho que entendi a questão da alteração dos caracteres. Por exemplo, caso o usuário preencha o campo com "George" e depois muda para "Geor", será possível, pois só alteraram-se 2 caracteres, "g" e "e". É isso mesmo? Mas tem algo que não entendi muito bem, para que a input oculta? Commented 15/11/2015 às 16:26
  • Na input oculta está o nome no formato em que ele veio do BD. Ai sempre que ele sai do campo o OnBlur manda o valor da input oculta e da input visível onde foram feitas as alterações. Commented 15/11/2015 às 16:44
  • @GeorgeWurthmann por favor poste o código que você ja fez e se possivel crie alguns exemplos que podessem nos ajudar a entender o problema. Commented 15/11/2015 às 17:42
  • @Gabriel Rodrigues, testarei a solução indicada pelo Bacco. Quer que eu poste meu código mesmo assim? Commented 15/11/2015 às 17:54

2 Respostas 2

11

A Distância de Levenshtein é um dos algoritmos mais conhecidos para calcular diferença entre duas strings.

Veja uma adaptação de outra questão para o seu caso específico:

function levenshtein(str1, str2) {
  var m = str1.length,
      n = str2.length,
      d = [],
      i, j;

  if (!m) return n;
  if (!n) return m;

  for (i = 0; i <= m; i++) d[i] = [i];
  for (j = 0; j <= n; j++) d[0][j] = j;

  for (j = 1; j <= n; j++) {
    for (i = 1; i <= m; i++) {
      if (str1[i-1] == str2[j-1]) d[i][j] = d[i-1][j-1];
      else d[i][j] = Math.min(d[i-1][j], d[i][j-1], d[i-1][j-1])+1;
    }
  }
  return d[m][n];
}

// Daqui para baixo, o código é apenas para demonstração de uso.
function calc() {
  var t1 = document.getElementById('t1');
  var t2 = document.getElementById('t2');
  var r1 = document.getElementById('r1');
  var d  = levenshtein( t1.value, t2.value );
  r1.innerHTML = d;
  r2.innerHTML = d>3?'Não':'Sim';
}
calc();
<strong>Altere os campos para testar a função</strong><br>
Palavra 1:<br>
<input id="t1" type="text" value="Hnrikuei" onKeyUp="calc()"><br>
Palavra 2:<br>
<input id="t2" type="text" value="Henrique" onKeyUp="calc()"><br>
Diferença:<br>
<div id="r1">?</div>
Valida (até 3):<br>
<div id="r2">?</div>


Segue um link recomendado pelo @Cold com técnicas de medição de similaridade entre strings:
http://en.wikipedia.org/wiki/Category:String_similarity_measures

1
  • 3
    É exatamente isso que preciso, perfeito! Muito obrigado @Bacco e todos os outros envolvidos. Commented 15/11/2015 às 18:07
3

Bem, fiz um exemplo no JsFiddle: http://jsfiddle.net/SamirChaves/y41q39yd/4/

Você vai perceber que há duas caixas de texto. Basicamente, o sistema irá verificar se há uma diferença superior a 3 caracteres.

    function verifyChange(){

        var span = document.getElementsByTagName("span")[0];

        var name = document.getElementById("name_user");
        var correcao = document.getElementById("correcao_name_user");

        var char1 = []; //quantidade de caracteres do name_user
        var char2 = []; //quantidade de caracteres do correcao_name_user

        for(var i = 0; i < name.value.length; i++){
            char1[i] = name.value.substring(i, i+1);
        }
        for(var j = 0; j < correcao.value.length; j++){
            char2[j] = correcao.value.substring(j, j+1);
        }
        if(char1.length - char2.length > 3 || char2.length - char1.length > 3){

            span.innerHTML = "Modificação inválida.";

        }else{
            var NCrt = 0; //nº de caracteres modificados
            var n = 0;
            if(char1.length == char2.length){
                for(var i = 0; i < char1.length; i++){
                    if(char1[i] != char2[i]){
                        NCrt++;
                    }
                }
            }else{
                if ( char1.length < char2.length){
                    Mlength = char1.length
                    
                    for(var j = 0; i < char2.length; i++){
                        for(var i = 0; i < char1.length; i++){
                            if(char1[j] != char2[i]){
                                NCrt++;
                            }
                    	}
                        if(NCrt == char2.length){
                        	n++;
                        }
                    }
                }else {
                    
                    for(var j = 0; i < char1.length; i++){
                        for(var i = 0; i < char2.length; i++){
                            if(char2[j] != char1[i]){
                                NCrt++;
                            }
                    	}
                        if(NCrt == char1.length){
                        	n++;
                        }
                    }
                }
            }
            if(NCrt > 3 || n > 3){
                span.innerHTML = "Modificação inválida.";
            }else{
            	span.innerHTML = "Modificação válida.";
            }
        }
    }
<form action="javascript: verifyChange()">
  <input type="text" onblur="verifyChange()" id="name_user" value="George">
  <input type="text"  onblur="verifyChange()"  id="correcao_name_user" value="gege">

  <input type="submit" value="Verificar" onclick="verifyChange()">
  <br>
  <br>
  <span></span>

</form>

Fiz em javascript puro mesmo.

A propriedade substring, funciona capturando o caractere da String, por exemplo:

    var ex = "Exemplo";
    ex.substring(0, 3);

Resultaria em:

    Exe

Ele conta como se funcionasse igual a uma seleção,: |E|x|e|m|p|l|o|

no caso acima, ele selecionou da primeira barra (0) a quarta (3).

Veja mais sobre o subtring aqui: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/substring

Há também o substr, explicado aqui: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr

2
  • Samir, fiz algo parecido em js puro també e tive os problema de lógica que comentei com você. Teste, por exemplo George e Gege. Ele retorna inválido, mas apenas 2 letras foram removidas. Commented 15/11/2015 às 17:25
  • É.. você tem razão.. Desculpe-me, tentarei corrigir esse problema e editarei a resposta. Commented 15/11/2015 às 17:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .