Search credit card number in an input or textbox, after this remove it [closed]

Navigation
1

I need to validate if in a <input> or <textarea> there is a credit card number, after this remove it or replace it with XXXX for security issues in a chat I am developing.

Example:

    
asked by SantiagoVictorinoC 16.05.2017 в 18:20
source

2 answers

3

You can use a Regex series to detect if the card number is of any known type (numbers may vary in number of digits and prefixes) and then replace the value of the input with a string of type 'xxxx' and then the number.

Here is an example, if you support other cards, here you have a list of regular expressions to validate the source. 

function getCardType(cardNo) {
  var cards = {
    "American Express": /^3[47][0-9]{13}$/,
    "Mastercard": /^5[1-5][0-9]{14}$/,
    "Visa": /^4[0-9]{12}(?:[0-9]{3})?$/
  };
  
  for(var card in cards) {
    if (cards[card].test(cardNo)) {
      return card;
    }
  }
  
  return undefined;
}

$('input').on('change', function() {
  var value = $(this).val().trim();
  
  var cardType = getCardType(value);
  
  if (!cardType) {
    alert('tarjeta invalida');
  } else {
    alert('tarjeta tipo:' + cardType);
    $(this).val(Array(value.length-4).join("X")+value.substring(value.length-4));
  }      
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Ejemplo usar: 4910123412341234 (Visa)
<input type="text">

Edition

In the specific case of yours, where the card number is embedded in the text I leave this example, which is similar, what changes is that the regex do not have the characters start and end of line for the same reasons. If you have to bring some regex of the aforementioned link, it would be convenient to replace the ^ and $ by \b so that you can find the card number within the text as a separate word. 

function extractCardInfo(text) {
  var cards = {
    "American Express": /\b3[47][0-9]{13}\b/,
    "Mastercard": /\b5[1-5][0-9]{14}\b/,
    "Visa": /\b4[0-9]{12}(?:[0-9]{3})?\b/
  };
  
  for(var card in cards) {
    if (cards[card].test(text)) {
      var arr = text.match(cards[card]);
      return { type: card, number: arr[0] };
    }
  }
  
  return undefined;
}

$('textarea').on('change', function() {
  var value = $(this).val();
  
  var card = extractCardInfo(value);
  
  if (card) {
    alert('tarjeta tipo:' + card.type);
    var nuevoValor = Array(card.number.length-4).join("X")+card.number.substring(card.number.length-4);
    $(this).val(value.replace(card.number, nuevoValor));
  }      
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea rows="4" cols="50">
Ejemplo, editar y hacer tab para ver como funciona este es el numero de tarjeta 4910123412341234 (Visa) salu2
</textarea>
    
answered by 16.05.2017 / 18:47
source
0

To put the values with a XX you can use: 

str = str.replace(/\d(?=\d{4})/g, "X");

It will only show you the last 4 digits. You can see more information here

And if you want to validate the textbox in Javascript you can do it like this: 

<script type="text/javascript">
    function validar() {
        //obteniendo el valor que se puso en campo text del formulario
        miCampoTexto = document.getElementById("miCampo").value;
        //la condición
        if (miCampoTexto.length == 0) {
            return false;
        }
        return true;
    }
</script>

<form action="mipagina.php" onsubmit="return validar()">
    <input type="text" id="miCampo" name="miCampo"><br>
    <input type="submit" value="Enviar">
</form>
    
answered by 16.05.2017 в 18:42
Hide in bootstrap 4 remove non-alphanumeric characters in r