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

Ответ 1

Существующие ответы относительно длинные, и они выглядят как over-kill. Кроме того, они не работают полностью (например, одна проблема заключается в том, что вы не можете редактировать предыдущие символы).

Для желающих, согласно Wikipedia:

Допустимыми символами IBAN являются цифры от 0 до 9 и 26 латинских алфавитных символов с верхним регистром от A до Z.

Вот относительно короткая версия, похожая на существующие ответы:

document.getElementById('iban').addEventListener('input', function (e) {
  e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});

<label for="iban">iban</label>
<input id="iban" type="text" name="iban" />

Ответ 2

Используя обычный JavaScript, я бы предложил:

function space(el, after) {
    // defaults to a space after 4 characters:
    after = after || 4;

    /* removes all characters in the value that aren't a number,
       or in the range from A to Z (uppercase): */
    var v = el.value.replace(/[^\dA-Z]/g, ''),
    /* creating the regular expression, to allow for the 'after' variable
       to be used/changed: */
        reg = new RegExp(".{" + after + "}","g")
    el.value = v.replace(reg, function (a, b, c) {
        return a + ' ';
    });
}

var el = document.getElementById('iban');
el.addEventListener('keyup', function () {
    space(this, 4);
});

JS Fiddle demo.

Несколько с опозданием, я переписал выше, чтобы обрабатывать строки, а не узлы DOM:

function space(str, after) {
    if (!str) {
        return false;
    }
    after = after || 4;
    var v = str.replace(/[^\dA-Z]/g, ''),
        reg = new RegExp(".{" + after + "}", "g");
    return v.replace(reg, function (a) {
        return a + ' ';
    });
}

var el = document.getElementById('iban');
el.addEventListener('keyup', function () {
    this.value = space(this.value, 4);
});

JS Fiddle demo.

Литература:

• addEventListener().
• регулярные выражения JavaScript.

Ответ 3

Вы должны захватить каждую группу из 4 цифр, а затем поставить пробел между каждой группой.

  $('input').blur(function () {
  //Replace each group 4 digits  with a group plus a space
        var reformat = this.value.replace(/(\d{4})/g, function(match){
        return match + " ";
        });
        this.value = reformat;
    })

А этот обновляет элемент при вводе

 //Keys pressed 0 times
var downed = 0; 
$('#test').keydown(function (g) {
    if(g.code.match("^Digit")){
        downed++;
      console.log(g)
    }

    if(downed == 1){
        var reformat = this.value.replace(/(\d{4}\s*)/g, function(match){
            //Strip spaces
            if(match.match(/\s/)){return match;}
            return match + " ";
    });
    console.log(reformat);
    this.value = reformat; 
    //Start recount
        downed = 0;
    }
});

Проверьте скрипку

Ответ 4

для тысяч на angular 4 в трубе  integer = integer.replace(/[^\dA-Z]/g, '').replace(/(. {3})/g, '$ 1.'). trim();

Ответ 5

Код от Джоша Крози действительно хороший, но не полный.

Две проблемы с этим;

• Если каретка находится не в конце, а, например, в предыдущей последней позиции и пользователь начинает печатать, иногда каретка не остается в предыдущей последней позиции
• Другая проблема связана с устройствами Android 7+. Эти устройства обновляют позицию каретки чуть позже, это означает, что для чтения местоположения каретки требуется метод setTimeout().

Приведенный ниже код основан на коде Джоша Крози, теперь с двумя упомянутыми выше проблемами, исправленными и немного более подробными для удобства чтения:

var isAndroid = navigator.userAgent.indexOf("ndroid") > -1;
var element = document.getElementById('iban');

element.addEventListener('input', function () {
    if (isAndroid) {
        // For android 7+ the update of the cursor location is a little bit behind, hence the little delay.
        setTimeout(reformatInputField);
        return;
    }
    reformatInputField();
});

function reformatInputField() {
    function format(value) {
        return value.replace(/[^\dA-Z]/gi, '')
            .toUpperCase()
            .replace(/(.{4})/g, '$1 ')
            .trim();
    }
    function countSpaces(text) {
        var spaces = text.match(/(\s+)/g);
        return spaces ? spaces.length : 0;
    }

    var position = element.selectionEnd;
    var previousValue = element.value;
    element.value = format(element.value);

    if (position !== element.value.length) {
        var beforeCaret = previousValue.substr(0, position);
        var countPrevious = countSpaces(beforeCaret);
        var countCurrent = countSpaces(format(beforeCaret));
        element.selectionEnd = position + (countCurrent - countPrevious);
    }
}

<label for="iban">iban</label>
<input id="iban" type="text" name="iban" size="35" />

Ответ 6

Мне нужно то же самое, но для формы оплаты BVR/BVR + swiss. Так что мне нужно добавить пробел каждые 5 символов , но с конца строки.

Пример: "52 86571 22001 00000 10520 15992" или иногда короче, как "843 14293 10520 15992".

Итак, вот решение, изменив строку до и после добавления пробелов, если rev = 1.

function space(str, stp, rev) {
    if (!str) {
        return false;
    }
    if (rev == 1) {
        str = str.split('').reverse().join('');
    }
    if(stp > 0) {
        var v = str.replace(/[^\dA-Z]/g, ''),
            reg = new RegExp(".{" + stp + "}", "g");
        str = v.replace(reg, function (a) {
            return a + ' ';
        });
    }
    if (rev == 1) {
        str = str.split('').reverse().join('');
    }
    return str;
}

Использование:

var refTxt = space(refNum, 5, 1);

Ответ 7

Это самая короткая версия, использующая JQuery для ввода с number типа или tel:

$('input[type=number], input[type=tel]').on('input', function (e) {
     e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});

Вы также можете изменить 4 на любой другой символ, который вы хотите.

Ответ 8

Я написал простую функцию, расширяющую функцию Дэвида для обработки последнего пробела. Также вы можете указать разделитель.

function spacify(str, after, c) {
    if (!str) {
        return false;
    }
    after = after || 4;
    c = c || " ";
    var v = str.replace(/[^\dA-Z]/g, ''),
        reg = new RegExp(".{" + after + "}", "g");
    return v.replace(reg, function (a) {
        return a + c;
    }).replace(/[^0-9]+$/, "");
}
console.log(spacify("123123123131",4," "))
console.log(spacify("12312312313",4,"-"))