Как добавить пробел после каждых 4 цифр для номера карты?

Question

[whydoyou]

const cc = document.getElementById("cc");
const ccWrapper = document.getElementById("cc-wrapper");
var b = document.getElementById("btnSumbit");

class Luhn {
  constructor(text) {
    this.text = String(text).replace(/[\s]/g, "");
    this.len = text.length;

  }
  validate() {
    let odd = false;
    let total = 0;
    let calc, calc2;

    if (this.len === 0)
      return false;

    if (!/^[0-9]+$/.test(this.text))
      return false;

    for (let i = this.len; i > 0; i--) {
      calc = parseInt(this.text.charAt(i - 1));
      if (!odd) {
        total += calc;
      } else {
        calc2 = calc * 2;

        switch (calc2) {
          case 10:
            calc2 = 1;
            break;
          case 12:
            calc2 = 3;
            break;
          case 14:
            calc2 = 5;
            break;
          case 16:
            calc2 = 7;
            break;
          case 18:
            calc2 = 9;
            break;
          default:
            calc2 = calc2;
        }
        total += calc2;
      }
      odd = !odd;
    }

    return ((total % 10) === 0);
  }
}

function check() {
  let luhnChecker = new Luhn(cc.value);
  luhnChecker.validate() ? b.removeAttribute("disabled", "disabled") : b.setAttribute("disabled", "disabled");
  luhnChecker.validate() ? ccWrapper.className = "pass" : ccWrapper.className = "fail";
}

Доброго вечера всем, как добавить к следующей проверке пробел после каждых 4 цифр?

к примеру "0000 0000 0000 0000"

буду благодарен за помощь!

Comments

[whydoyou]

Роман, не поможете с решением вопроса? :(

целый день пытаюсь решить, не выходит ничего

[Роман]

А вообще у вас какаято жесть, вся логика пишеться в пару строк. Если никто не ответит до тех пор пока я не доберус до компа, скину ответ. С телефона некомфортно кодить)

[Роман]

whydoyou, ответили же уже?

[whydoyou]

Роман, не разобрался, мне нужно чтобы именно при вводе в инпат добавлялись пробелы и при этом проверка на валидность карты работала :(

[whydoyou]

Роман, я делал пробелы, но тогда проверка не работает

не понимаю

[whydoyou]

Роман, есть возможность помочь? пожалуйста

[Роман]

whydoyou, вам больше нет возможности помочь, селяви.

Answer 1

[whydoyou]

function maskCC(event) {
    var vcc = this.value.replace(/\D/g, '');
    this.value = '';
    for(var i = 0; i < vcc.length; i++) {
        this.value += (i%4==0 && i != 0 ? ' ' : '') + vcc[i];
    }
}
document.getElementById('cc').addEventListener('input', maskCC, false);

при использовании этого варианта перестает работать проверка поля карты

Answer 2

[kikkigenkai]

str.split(/(\d{4})/).filter(item => item !== '').join(' ')

зачем столько кода, если это делается в одну строку:\

Comments

[Роман]

затем, что автор не правильно задал вопрос. Ему нужно не только сделать каждый 4й символ пробелом но и правильно все это привязать к форме, при этом текущий код привязки он не показал. в общем автор нехороший человек, морочит себе и нам головы))))