Форматирование ввода регулярных выражений с помощью vue.js

Question

Я пытаюсь отформатировать ввод пользователя в vue.js. Ввод представляет время мм.сс. Два числа затем точка и снова два числа. Точка должна появиться автоматически после ввода первых двух чисел. Я смог добиться этого, используя рексег, вот код:

https://codepen.io/Marek92/pen/KKKqKjx

<div id="app">
  <h1>{{ title }}</h1>

  <input type="text" v-model="performance">
</div>
new Vue({
  el: '#app',
  data: {
    title: 'Input formating!',
    performance: '12.00'
  },

  watch: {
            performance() {
                this.performance = this.performance.replace(/[^0-9]/g, '')
                    .replace(/^(\d{2})(\d{2})?/g, '$1.$2')
                    .substr(0, 5);
            }
        }
});

Однако проблема в том, когда ввод есть. Скажем «12,00», и вы начнете удалять номер, используя клавишу Backspace с конца. Вы застряли на точке. Невозможно удалить точку, и это моя проблема. Как я могу изменить регулярное выражение, чтобы иметь возможность удалить точку? Или какое-то другое решение?

Спасибо!

Answer 1

Пожалуйста, посмотрите ниже код-

new Vue({
  el: '#app',
  data: {
    title: 'Input formating!',
    performance: '12.00'
  },

  watch: {
            performance() {
                 var a = this.performance.replace(/[^0-9]/g, '')
                    .substr(0, 5);
                 if (a.length >= 3) {
                     a = a.substring(0, 2) + '.' + a.substring(2, a.length)
                 }
                 this.performance =a;     
            }
        }
});

Объяснение : Попробуйте добавить точку после 2 цифр, если есть более 2 цифр. в противном случае удалите все символы, кроме цифр.

https://codepen.io/ashfaq_haq/pen/xxxrbYO

Answer 2

Ваша вторая группа захвата является необязательной, поэтому она попытается добавить . при удалении, поскольку двузначное число также соответствует регулярному выражению. Один из вариантов - удалить необязательный синтаксис ?, использовать /^(\d{2})(\d{2})/g или /^(\d{2})(\d{1,2})/g, чтобы он начал форматироваться только при наличии более двух чисел.

См. https://codepen.io/leopsidom/pen/zYYzxKY.