Regex input formatting with vue.js - regex

Question

I'm trying to format user input in vue.js. The input is representing time mm.ss. Two numbers then dot and two numbers again. The dot should appear automatically after first two number are typed. I was able to achieve it using rexeg here's the codepen:
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);
}
}
});
However the problem is when the input is there. Let's say '12.00' and you start deleting the number using backspace from the end. You get stuck on the dot. Unable to delete the dot and that is my problem. How can I change the regex to be able delete the dot? Or some other solution?

Answer 1

Please look at below code-
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;
}
}
});
Explanation: Try to add a point after 2 digit when there is more than 2 digits. otherwise remove all characters except digits.
https://codepen.io/ashfaq_haq/pen/xxxrbYO

Answer 2

I had ESLint build rules in place that were not allow me to use Regex. If you have the same issue simply removed the rules by configuring the eslintrc.js file
'rules': {
// allow regex test of phone numbers
'no-useless-escape': 0
}
and then you can create the const and use the test method. worked great for my phone number check.
const phoneNumberFormat =
new RegExp(/^[+]?(\d{1,2})?[\s.-]?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/)
const validatePhoneNumber = (context, event) => {
let address = context.address
if (!phoneNumberFormat.test(address.phoneNumber)) {
return false
}
return true
}

Answer 3

Your second capture group is optional, so it will try to add the . when you delete it because a two digit number also matches the regex. One option is to remove the optional syntax ?, use /^(\d{2})(\d{2})/g or /^(\d{2})(\d{1,2})/g so that it only starts to format when there are more than two numbers.
See https://codepen.io/leopsidom/pen/zYYzxKY.